Div szakaszok vízszintes pozícionálása

 

Táblázatok vízszintes pozícionálása

 

 

A div szakaszok sorrendje a szövegfolyamban:
<div class="divszakaszok"> {width: 90%; border: 1px solid black;}

<div id="fixed01"> {top: 80px; left: 200px;} </div>
<div id="absolute01"> {top: 10px; left: 20px;}</div>
<div id="absolute02"> {margin-top: 80px; margin-left: 250px;}</div>
<div id="relative"> {top: 10px; left: 50px;}</div>
<div id="statikus"> {margin-bottom: 10px; margin-left: 10px;}</div>

</div>

 

 

Felcseréljük a div szakaszok sorrendjét.

A div szakaszok sorrendje a szövegfolyamban:
<div class="divszakaszok"> {width: 90%; border: 1px solid black;}
<div id="statikus"> {margin-top: 10px; margin-left: 10px;} </div>
<div id="absolute"> {margin-top: 10px; margin-left: 350px;} </div>
<div id="relative"> {margin-top: 10px; margin-left: 120px;} </div>
</div>

Ha jól megnézzük, a weboldalon, azaz, a valóságban más a megjelenési sorrend.

 

• Az absolute meghatározás:
  • A top: ..... px; left: .....px; meghatározásnál, a div szakasz kezdeti pozíciója a monitorunk bal felső sarka (top: 0; left: 0;), és nem a weboldalunk bal felső sarka.
  • A margin-top: .....px; margin-left: .....px; meghatározásnál, a div szakasz kezdeti pozíciója, azon div szakasz bal felső sarka, melyben elhelyeztük az absolute típusú div szakaszt.
    Ezzel a fajta elhelyezési meghatározással, weboldalunk területén belül jeleníthetjük meg, az absolute div szakaszt is.
• A fix div szakasz kezdeti pozíciója a monitorunk bal felső sarka (top: 0; left: 0;), azaz nem érdekli, hogy weblapunkat, balra vagy középre pozícionáljuk (1600px széles monitornál sem.)
• A fix div szakasz vízszintes pozícióját a left: ..... px; értékkel tudjuk beállítani.
• Legnagyobb vízszintes (jobbra eltolt) pozícióját úgy állítsuk be, hogy a div szakasz szélességét, vonjuk ki 800px értékből, és ez legyen a left értéke. Így a kis képernyős monitorok jobb oldalán lesz látható, 1600px méretű monitoroknál középre kerül, azaz weblapunk területén belül marad.
• Ha a szabványméretű 800px széles weblapunkat (vagy a szabványtól eltérő, tetszőleges szélességű weblapunkat), balra pozícionáljuk és nem középre, akkor weboldalunkon a fixed és abszolúte div szakasz beállítása, minden monitoron egyforma pozícióban jelenik meg.

---

 

A div szakaszok megjelenése, ha ezeket, egymás után írjuk meg,
a szövegfolyamban.

A bemutatóban, eltérő megírási sorrendben történik a bemutatásuk.
A div szakaszokra jellemző típus meghatározások eltérőek, de a pozíció meghatározások, megegyeznek.
A margin-top: .... px; érték, nincs meghatározva!

1. relativ{position: relative; width: 100px; height: 50px; margin-left: 10px;}
2. static{position: static; width: 100px; height: 50px; margin-left: 40px;}
3. absolute{position: absolute; width: 100px; height: 50px; margin-left: 70px;}

 

Sorrend: 1; 2; 3; Típus meghatározás nincs 1.Normál 2.Normál 3.Normál	Sorrend: 1; 2; 3; Típus sorrend: Relativ; Static; Absolute; 1.Relativ. 2.Static. 3.Absolute.	Sorrend: 1; 3; 2; Típus sorrend: Relativ; Absolute; Static; 1.Relativ. 3.Absolute. 2.Static.
Sorrend: 2; 1; 3; Típus sorrend: Static; Relativ; Absolute; 2.Static. 1.Relativ. 3.Absolute.	Sorrend: 2; 3; 1; Típus sorrend: Static; Absolute; Relativ; 2.Static. 3.Absolute. 1.Relativ.	Sorrend: 3; 1; 2; Típus sorrend: Absolute; Relativ; Static; 3.Absolute. 1.Relativ. 2.Static.
Sorrend: 3; 2; 1; Típus sorrend: Absolute; Static; Relativ; 3.Absolute. 2.Static. 1.Relativ.

 

A következő részben, meghatározzuk a top értéket is, ez egyforma lesz mindegyik div szakasznál.

1. relativ{position: relative; width: 100px; height: 50px; margin-top: 10px; margin-left: 10px;}
2. static{position: static; width: 100px; height: 50px; margin-top: 10px; margin-left: 40px;}
3. absolute{position: absolute; width: 100px; height: 50px; margin-top: 10px; margin-left: 70px;}

 

Sorrend: 1; 2; 3; Típus meghatározás nincs 1.Normál 2.Normál 3.Normál	Sorrend: 1; 2; 3; Típus sorrend: Relativ; Static; Absolute; 1.Relativ. 2.Static. 3.Absolute.	Sorrend: 1; 3; 2; Típus sorrend: Relativ; Absolute; Static; 1.Relativ. 3.Absolute. 2.Static.
Sorrend: 2; 1; 3; Típus sorrend: Static; Relativ; Absolute; 2.Static. 1.Relativ. 3.Absolute.	Sorrend: 2; 3; 1; Típus sorrend: Static; Absolute; Relativ; 2.Static. 3.Absolute. 1.Relativ.	Sorrend: 3; 1; 2; Típus sorrend: Absolute; Relativ; Static; 3.Absolute. 1.Relativ. 2.Static.
Sorrend: 3; 2; 1; Típus sorrend: Absolute; Static; Relativ; 3.Absolute. 2.Static. 1.Relativ.

 

 

Ne feledjük!
Adott div szakasz magassága Explorer és Mozilla Firefox böngészőben nem egyforma. Ezt, nekünk kell korigálni stíluslapon, azaz CSS-fájlban, hogy mindkét böngésző egyformán jelenítse meg.

Egy adott div szakasz szélessége, a következőkből tevődik össze:
width + border + padding = div szakasz szélessége

Bővebben, azaz részletesen, lásd a Div méretei témakörben:

 

Vissza a lap elejére