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ő: raczger Hozzászólások(0)

Új hozzászólás

Webprogramozás Tutorialok DIV-ek kezelése I. rész

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

Új hozzászólás