HTML ja CSS algajatele (Osa 44): Sisuala kujundamine

Nüüd alustame menüüga, mis kuvatakse ülemises aknaalas.

<div class="header">
<div class="header-top">
<h1>Sinu raamatupidaja</h1>
</div>
<div class="topmenu">
<ul>
 <li><a href="index.html">Esileht</a></li>
 <li><a href="#">Meist</a></li>
 <li><a href="#">Kuidas me töötame</a></li>
 <li><a href="#">Kontakt</a></li>
 <li><a href="#">Imprint</a></li>
</ul>
</div>
<div class="header-img">
</div>
</div>

Hintergrundikujunduse loomisel korrake ühepikslisse pilti nii, et element oleks täielikult täidetud.

.topmenu {
   taustapildi URL-i: url(../images/menue.jpg);
   taustakordus: korduvalt;
   laius: 978 pikslit;
   kõrgus: 37 pikslit;
   ujumine: vasakule;
}

Seejärel saab menüü vormindada. Selliste menüüde puhul ei ole tegelikult midagi erilist, mida arvesse võtta. Olulised on alati vaid järgmised aspektid:

Sel hetkel, mil sündmus toimub natuke muul viisil, kuvatakse erinev taustagraafika.

.content-right {
   laius: 210 pikslit;
   ujumine: paremale;
   polsterdamine-parem: 20 pikslit;
   ülemise-polsterdamine: 20 pikslit;
   piir: 1 piksel katkendlik #eee;
}

Edasi jätkame tegeliku menüü määratlemisega. Sel korral on üksused siiski üksteise all. Kõik, mida peate tegema, on pöörata tähelepanu sellele, et loendipunktide nägemine on peidetud. Ülejäänud menüü kujunduse lõpliku väljanägemise määrab lõpuks teie.

.content-right ul {
   loendipunkti-tüüp: pole;
}
.content-right ul li {
   polsterdamine-vasakul: 45 pikslit;
   polsterdamine-üleval: 4 pikslit;
   polsterdamine-all: 4 pikslit;
   põhja-alumine-laius: 1 piksel;
   põhja-alumine-stiil: katkendlik;
   põhja-alumine-värv: #ccc;
}
.content-right ul li a {
   fondi-perekond: Arial, Helvetica, sans-serif;
   fondi-suurus: 12 pikslit;
   värv: #000;
   teksti-kaunistus: pole;
   teksti-joondamine: vasakule;
   displei: plokk;
}
.content-right ul li a:hover {
   värv: #0b90d6;
}

Selles etapis peaks brauseris kuvatama järgmine pilt:

Alla menüü

Veebisaidi jaluses on veel üks menüü. Ka siin, veebisaidil PSD-Tutorials.de, kasutatakse sellist menüüd, et pakkuda üldist teabelehti.





Meie veebisaidil on lisaks autoriõiguse märkus. Mõlemad asjad on tegelikult üsna tüüpilised veebilehtede jaoks. Kõigepealt aga HTML-struktuur.

<div class="bottom">
 <ul>
  <li><a href="index.html">Kodu</a></li>
  <li><a href="#">Meist</a></li>
  <li><a href="#">Uudised</a></li>
  <li><a href="#">Kontrollkeskus</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Õigusalane teave</a></li>
  <li><a href="#">Sitemap</a></li>
 </ul>
 <p>© Copyright 2014 by PSD-Tutorials.de</p>
</div>

Tegemist on lihtsa ul-loendiga. Iga loendiüksus sisaldab menüüüksust. ul-loendi all on p-element, kus asub autoriõiguse märkus. Nüüd on vaja veel CSS-süntaks.

.bottom {
   background-image: url(../images/footer.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   text-align: center;
   width: 1000px;
   height: 110px;
   float: left;
 }

Kuidas te lõpp-menüü kujundate, jääb lõpuks ikkagi teie otsustada. Enda puhul kasutan uuesti värvide üleminekut. Te saate aga kasutada ka lihtsat taustavärvi või isegi CSS3 süntaksi. Minu graafika versiooni puhul on aga oluline, et taustakordus blokeeritakse background-repeat: no-repeat; abil.

Vaadake kõigepealt tulemust:





Siin silma hakkavad valged triibud, mis kuvatakse iga menüüüksuse kõrval. Need on defineeritud erinevate border-left deklaratsioonide abil, mis tähendab lõppkokkuvõttes, et deklaratsioonid kehtivad vastavalt iga elemendi vasakule servale.

Kogu süntaks all-menüü jaoks näeb välja järgmine:

.bottom ul {
   margin-top: 30px;
   list-style-type: none;
}
.bottom ul li {
   display: inline;
   border-left-width: 1px;
   border-left-style: solid;
   border-left-color: #fff;
}
.bottom ul li a {
   font-size: 12px;
   color: #fff;
   text-decoration: none;
   padding-right: 15px;
   padding-left: 15px;
}
.bottom ul li a:hover {
   text-decoration: underline;
}
.bottom p {
   font-size: 12px;
   color: #fff;
   margin-top: 40px;
}
.bottom a {
   font-size: 12px;
   color: #fff;
   margin-top: 40px;
}
.bottom a:hover {
   text-decoration: none;
}

Üks eripära võrreldes ülem-menüüga on see, et tegelikult ei laadita hõljumisjuhul lisagraafikat. Kuid selleks, et külastajatele siiski märku anda, et nad hiirega lingi kohal on, allajoonitakse üksikud lingid, kui hõljumise sündmus toimub.

See veebilehe põhietapp on lõpetatud. Mis veel puudu on, on lehekülje kujundamine. Sellest rohkem järgmistel õpetustel.