Gyakorlat - Fejléc finomítása

A mai leckében finomítunk a fejléc kinézetén. Az eredeti tervet megváltoztatjuk, mert nem úgy néz ki, hogy ... jól néz ki :D. Szerintem a fejlécnek ne legyen fehér színe, magasságát csökkentsük le, a szöveg függőlegesen és vízszintesen legyen középre igazítva és növeljük a betűméretet is.

A végeredmény így fog kinézni.



Menjünk végig:
A fejlécnek ne legyen fehér színe. Ehhez módosítanunk kell a már megírt kódunkat.
Ezt:

#menü, #tartalom, #fejléc, #lábléc{

width:880px;

margin:0 auto;

background-color:white;

}

Erre:

#menü, #tartalom, #lábléc{

width:880px;

margin:0 auto;

background-color:white;

}


Utána pedig
Ezt:

#fejléc{

height:300px;

}
Erre:

#fejléc{

height:300px;
width:880px;
margin:0 auto;

}


Az első cserével a beállítások nem vonatkoznak majd a fejlécre, ezzel azt érjük el, hogy a fejléc nem fehér színű lesz. Azonban így a többi beállítást is töröljük, tehát a fejlécnek ezeket külön kell megadnunk.

A következő lépés:
Magasságát csökkentsük le, a betűméretet növeljük, függőlegesen és vízszintesen legyen középre igazítva.

A CSS-ben csak a táblázatoknál van lehetőségünk függőleges igazításokra. Szerintem ennek helyettesítésére a legjobb módszer, ha eltartásokat állítunk be. Van egy szövegünk, aminek a betűméretét állítsuk 20px-re.

 #fejléc{

height:300px;
width:880px;
margin:0 auto;
font-size:20px;

}


Én a betűtípust is átállítottam, s félkövérre raktam.


 #fejléc{

height:300px;
width:880px;
margin:0 auto;
font-size:20px;
font-family:Arial;
font-weight:bold;

}


Most nézzük meg a függőleges középre igazítást. Ha azt akarom, hogy a fejléc mérete csökkenjen (mondjuk 180px elég lesz :D), akkor a következőket kell figyelembe vennem: a betű mérete, eltartások, margók. Függőleges igazításról beszélek, tehát a magasság ebből áll össze: betűméret + alsó eltartás + felső eltartás = 180px. Ha a betűméretem 20px, akkor 160px marad a 2 eltartásra. Mivel középen van, mindkettő egyenlő, tehát a kód a következő:


 #fejléc{

width:880px;
margin:0 auto;
font-size:20px;
font-family:Arial;
font-weight:bold;
padding:80px 0;

}


A magasságra már nincs is szükség, mert a többi elemből jön össze.
Azonban van egy kis gond. A fejlécünk most biztos nem 180px. Miért is?
Ennek az az oka, hogy az alkalmazott <h1> tagnek is van margója (nem a tagnek van margója, hanem amit eredményez :D). Ha pixelpontosan (mondjuk megrendelésre) dolgozunk, akkor a a következő kóddal eltüntethetjük az esetleges margókat eltartásokat a h1-ekből:

h1{
margin:0;
padding:0;
}


De mi most szépségre megyünk, tehát "kísérletezünk". A Google Chrome segítségével (jobb klikk, elem vizságlata) megnézzük, hogy a Lorem Ipsum feliratnak mekkora a tényleges magassága. Esetünkben 80px. Akkor már csak 100px marad az eltartásra, tehát a végleges kód a következő:


 #fejléc{

width:880px;
margin:0 auto;
font-size:20px;
font-family:Arial;
font-weight:bold;
padding:50px 0;

}


Ezután már csak egy vízszintes igazítást és egy színváltoztatást kell eszközölnünk:



 #fejléc{

width:880px;
margin:0 auto;
font-size:20px;
font-family:Arial;
font-weight:bold;
padding:50px 0;
color:white;
text-align:center;

}

A következő leckében a menüt csinosítjuk ki.