Régebbi időkben elterjedt volt a táblázatos kialakítás, így
egyszerű volt több oszlopos elrendezést kialakítani.
Ma a dobozmodellt használjuk egy oldal kialakításnál, mert a
honlapon megjeleníteni kívánt elemek mindegyike téglalap alakú területet foglal
el. W3C szabvány szerint igazíthatjuk a dobozon belül elhelyezkedő szöveget, ami
azért is fontos, mert így a böngészők többsége jól fogja megjeleníteni a kívánt
tartalmat.
Adhatunk belső margót, paddingot. Ekkor a doboz keretétől
toljuk el a szöveget. Megadási formája lehet:
- padding-top – felső belső margó
- padding-right – jobb belső margó
- padding-left – bal belső margó
- padding-bottom – alsó belső margó
Vagy
másképp: padding: 5px 10px 15px 20px; Ekkor egy sorban megadjuk az összes
értéket a következő sorrendben: felső (5px), jobb (10px), alsó (15px), bal (20px).
Amennyiben a felső és alsó, illetve a jobb és bal megegyezik, akkor elég azt a
kettő értéket megadni: padding:5px 10px;
Az értéket mindig px-ben kell megadni.
Az értéket mindig px-ben kell megadni.
A
doboznak adhatunk külső margót is, ekkor egy másik doboztól való távolságát
határozzuk meg. Megadási formája lehet:
- margin-top – felső külső margó
- margin-right – jobb külső margó
- margin-left – bal külső margó
- margin-bottom – alsó külső margó
Másképp
is megadhatjuk, paddinghoz hasonló módon vagy 4 érték megadásával, a sorrend
ugyanaz (felső, jobb, alsó, bal), ha pedig a két szemközti megegyezik, akkor
két érték megadásával.
A
következő egyszerű példánál látható a lényeg. Készítünk egy divet, melynek az
alapot fogja szolgálni, tartalomnak nevezzük el. Ez a kiinduló dobozunk. Ebbe
teszünk egy bekezdés <p></p> tagek között.
HTML kód:
<body>
<div class="tartalom">
<p>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum blandit leo
at auctor. Aliquam scelerisque purus vel felis gravida id pellentesque lectus
imperdiet. Aenean non neque nisl, eget vehicula nunc. Etiam eget purus felis.
Maecenas consequat magna eu augue consequat iaculis. Etiam vitae enim lorem.
Donec nibh nibh, vestibulum quis consectetur nec, cursus eget arcu. Etiam sed
neque quis erat facilisis varius lobortis quis dolor.<br /><br />
</p>
</div>
</body>
CSS kód:
.tartalom{
width:600px;
margin:0 auto;
}
.tartalom p{
background:lightblue;
padding:10px;
margin:30px 10px;
text-align:justify;
}
A tartalom divünk mérete 600px
és középre igazítjuk margin: 0 auto-val. (HTML5-ben a <center></center>
tagek nem érvényesülnek.) A szövegnek megadtunk egy 10px-es belső margót, ezt a
lila szín jelzi az alábbi képen. A külső margó alul, felül 30px, jobbra, balra
10px, ezt a sárga szín szemlélteti.
Ezeket tudjuk használni szövegek és képek igazítása során.
Amennyiben egymás mellé helyezünk dobozokat, a külső margót
hozzá kell számolni, mert gyakran amiatt csúsznak egymás alá a divek.
Nincsenek megjegyzések:
Megjegyzés küldése