2011. november 30., szerda

CSS Lebegtetés, Igazítás

A mi napon megismerkedünk részletesen a lebegtetéssel és az igazítással. A lebegtetéssel ebben a leckében már foglalkoztunk, de ma megnézzük részletesebben.
FLOATING - LEBEGTETÉS

Tehát mi is az a lebegtetés? A lebegtetés segítségével tudjuk az elemet pl. egy bekezdésen belül balra vagy jobbra igazítani, és az elemet "körbefuttatva, vagy négyzetesen, vagy szorosan" beszúrni (word-ös kifejezések :D). Tehát az elem körül van a szöveg.

Kétféle értéke lehet: left és right

elem{
float:left;
}

elem{
float:right;
}


Mit is jelent ez? Ha egy elem balra van lebegtetve, akkor az elem addig megy, amíg tud (persze a befoglaló elemen belül). Ugyanez jobbra is igaz.
Itt jól látható a lényeg.

Ha több elemet lebegtetünk, amik egymás után következnek, akkor az elemek egymás mellé kerülnek.
Itt jól látszik.

Ha beszúrnánk egy elemet egy lebegtetett elem után, akkor az (ha van még hely) az előző elem mellé kerül. Ha ezt el szeretnénk kerülni, használjuk a clear tulajdonság both értékét.

elem{
clead:both;
}


FONTOS! A lebegtetés az egyik legtöbbször használt tulajdonság a CSS-ben, szóval érdemes megtanulni. Ha valamit nem értesz, kérlek írj hozzászólást.

A mai másik témánk az igazítás. Nem szövegigazítás, hiszen azt ebben a leckében megnéztük. Tehát a mai napon másfajta igazításokat nézünk meg :D

Nézzük meg először, hogy mik azok a blokk elemek? Olyan elemek, melyek a rendelkezésre álló szélességet kitöltik, előttük, utánuk sortörés van. Ilyen például a cím <h1...>, bekezdés <p>, div <div>.
A mai leckében ezeknek az igazítását nézzük meg.

VÍZSZINTES KÖZÉPRE IGAZÍTÁS MARGÓKKAL

Ha a bal és a jobb margókat auto-ra állítjuk, akkor az elem középre kerül. Mert mindkettő annyi lesz, amennyit a kijelző mérete enged, tehát egyforma lesz --> középre kerül.

elem{
margin-left:auto;
margin-right:auto;
}


VÍZSZINTES IGAZÍTÁS A BAL ÉS JOBB TULAJDONSÁGOKKAL

Már az igazításoknál tanultunk az abszolút pozicionálásról, s ezért csak egy kódot mutatok.

elem{
position:absolute;
right:0;
}

Ennyit tartok fontosnak egyelőre. A holnapi lecke után megnézünk 2 "gyakorlati" feladatot is, melyben talán érthetővé válnak az eddig megtanultak :D Addig is jó tanulást.

Nincsenek megjegyzések:

Megjegyzés küldése