PHP-Script.hu
Kiemelt hirdetés:
2018. június 24. 14:34 vasárnap, ma Iván névnap van


grafika


Videóbázis


Kategória: HTML, CSS
DIV-ek kezelése I. rész
2007.03.31. 21:26

Régebben az oldalak nagy részét táblázat segítségével pozicionálták általában, mára azonban DIV-el másnéven layer-ekkel(rétegekkel) végzik, mely sokkal rugalmasabb, kezelhetőbb. Egyedül rájönni a fortélyaira nehezebb egy kicsit, de nem vészes, mert ha rájön az ember táblázatot már nem nagyon fog használni. Én magam is főleg DIV-eket használok, ám régen én is táblázattal szenvedtem, melyben túl sok volt a korlátozás. Főleg az volt a rossz, hogy nehéz volt optimalizálni az Internet Explorer-re és Firefox-ra együtt. Ám a DIV-eket a két vezető böngésző szinte ugyanúgy, kis eltérésekkel azonosan kezeli.


A div a html kódban így néz ki:

1
<div></div>

Persze ez így önmagában nem ér semmit sem...

1
<div id="elsodiv"></div>

A style.css-ben megfogja ez keresni a #elsodiv részt, és az lesz a style-ja az adott divnek.

1
2
3
4
5
#elsodiv{
width:200px;
height:200px;
background-color:#0066CC;
}

Így most a DIV-nek 200*200-as lesz a mérete, de ha pl túlfut rajta a szöveg az már nem a diven belül lesz hanem kilóg, ha azt akarjuk, hogy a benne lévő tartalomhoz igazodjon "auto" -t kell odaírnunk.
Ahhoz hogy mégjobban pozicionálni tudjuk, használnunk kell a top, és a left parancsot is.

1
2
3
4
5
6
7
#elsodiv{
width:200px;
height:200px;
background-color:#0066CC;
top:10px;
left:10px;
}

Így a DIV most már a lap tetejétől, és bal oldalától 10-10 pixel távolságra lesz.

Így elsőre ennyit, szépen be kell osztani.
A következő részben az absolute és relative pozicionálásról lesz szó.


 Szerző: userraczger Hozzászólások(0) Hozzászólások Megosztás az iWiW-en Megosztás az Facebook-on Megosztás a Google Reader-ben Megosztás az Twitter-en 

Listázás:  Idő szerint:
Webprogramozás arr Tutorialok info DIV-ek kezelése I. rész

Ebbe a topikba még nem érkezett hozzászólás.

Listázás:  Idő szerint:


© 2006-2018 PHP-Script.hu, Minden jog fenntartva!
Design: Rácz Gergely, Oldalmotor: Rácz Gergely
Impresszum - Oldaltörténet - Oldalszabályzat