Gyakorlat - Menü kicsinosítása

A "menüsávunk" a jelenlegi állapotában elég ramatyul néz ki. A mai napon viszonylag "széppé" varázsoljuk. A végeredmény a következő lesz:

Nézzük lépésenként. Először a listánkat vízszintessé tesszük és eltüntetjük a listajelölőket. A biztonság kedvéért levesszük az ul és li tag margóit és eltartásait.


#menü ul{   /*a menün belüli listán dolgozunk csak!!*/
list-style-type:none; /*eltüntetjük a listajelölőket*/
margin:0; /*a margók eltüntetése*/
padding:0; /*az eltartások eltüntetése*/
}


#menü ul li{ /*a menün belüli listán belüli listaelemekkel dolgozunk csak!!*/
float:left;  /*minden listaelemet lebegtetünk*/

margin:0; /*a li tagek margóit eltüntetjük*/
padding:0; /*a li tagek eltartásait eltüntetjük*/

}

A következő lépésben a menüpontok méretét számoljuk ki. 880px széles a menüsávunk. 4 menüpontunk van, tehát egy menüpontnak 220px szélesnek kell lenni.


#menü ul li{
float:left;

margin:0; 
padding:0; 
width:220px; /*a szélessége minden menüsávnak 220px legyen*/

}


Most megcsináljuk, hogy a szövegek vízszintesen és függőlegesen is középre legyenek igazítva.  Ehhez a már alkalmazott eltartásokra lesz szükségünk.


#menü ul li{
float:left;

margin:0; 
padding:0; 
width:220px;

font-size:20px; /*a betű mérete 20px legyen*/
padding:10px 0; /*a felső alsó eltartás legyen 10px*/
text-align:center; /*vízszintes középre igazítás*/


}


Az utolsó lépés pedig, hogy beállítjuk a háttérszínt.



#menü ul li{
background-color:red; /*háttérszín piros legyen*/
margin:0;
padding:0;
float:left;
width:220px;
font-size:20px;
padding:10px 0;
text-align:center;
}


Most már tudjuk a menüsávunk tényleges magasságát. 20px betűméret + 10px alsó + 10px felső eltartás = 40px. Be is állítjuk:
Először kicsréljük ezt:


#lábléc, #menü{
height:20px;
}

Erre:

#lábléc{
height:20px;
}



Utánna pedig beírjuk a következőt:


#menü{
height:40px;
}


A következő lépésben a linkeket fogjuk formázni. Először eltüntetjük az aláhúzást, utána a betűszínt fehérre állítjuk, félkövérre tesszük, s hogy az egész 220px széles menüpont kattintható legyen, a megjelenítést blockra állítjuk.


#menü a{
text-decoration:none; /*aláhúzás megszüntetése*/
color:white; /*betűszín átállítása*/
font-weight:bold; /*félkövér*/
display:block; /*blockolás :)*/
}


Legutolsó lépésként, ha a link felett van az egér, akkor háttérszíne legyen kék.


#menü ul li:hover{
background-color:blue;
}


A következő leckében a tartalom részt és a láblécet formázzuk meg. Azután pedig befejezzük a munkálatokat. Az eddig elkészült oldal letölthető CSS és HTML kódja.