Relatív pozíciójú DIV-ek létrehozása az Adobe Dreamweaver CS6-ban

Az Adobe Dreamweaver CS6 AP (Absolute-Positioned) Divs-einek pontossága és pixel szerinti pozicionálása meglehetősen felszabadító lehet a tervezők számára, különösen azok számára, akik szeretik a nyomtatási alapú elrendezések rugalmasságát.

Bizonyos esetekben azonban előfordulhat, hogy a dobozok összhangban vannak az oldal egyéb tartalmával. Az AP Div-ek más elemek felett lebegnek, így az oldal más tartalmának eltolása nincs hatással a pozíciójukra, ami lehet jó vagy rossz.

A hagyományosabb soron belüli viselkedés érdekében létrehozhat DIV-ket, amelyek relatív pozicionálást használnak . Ez lehetővé teszi egy elem eltolását a körülvevő tartalommal együtt, így folyékonyabb elrendezést biztosít. Ez a fajta elhelyezés fontos beágyazott tartalom esetén, vagy minden olyan helyzetben, amikor az elemeknek összhangban kell lenniük más oldaltartalommal.

Ehhez a feladathoz használja az Insert Div Tag eszközt, amelyet az Insert panel Common és Layout kategóriáiban találhat meg.

Kövesse az alábbi lépéseket egy viszonylag elhelyezett DIV létrehozásához:

Kattintson az oldalon belülre, hogy a kurzort egy meglévő AP Div-on belül helyezze el, majd kattintson az Insert Div címke eszközre a Beszúrás panel Általános és Elrendezés kategóriái alatt.

Amikor megjelenik a Div tag beszúrása párbeszédpanel, finomhangolja az új DIV helyét úgy, hogy kiválaszt egy helyet a Beszúrás legördülő listából.

Például válassza a Címke kezdete után lehetőséget, ha el szeretné helyezni egy meglévő DIV címkén belül az oldalon.

A Div tag beszúrása párbeszédpanel legördülő listájával is elhelyezheti a DIV elemet az oldalon meglévő elemek elé, után vagy belsejébe. Hagyja a Beszúrás legördülő listát a Beszúrási pontnál értékre állítva, hogy elhagyja azt a mezőt, ahol rajzolta, vagy válasszon egy másik helyet, ahol létre szeretné hozni a DIV-t.

Ha van már meglévő osztályválasztója, amelyet alkalmazni szeretne, válassza ki azt az Osztály legördülő listából; ellenkező esetben hagyja üresen.

Ha egy meglévő azonosító nem érhető el, írjon be egy új nevet az ID mezőbe, és kattintson az Új CSS-szabály gombra egy új létrehozásához.

Amikor megjelenik az Új CSS-szabály párbeszédpanel, győződjön meg arról, hogy az új választó az ID értékre van állítva, és a név előtt van egy font jel (#). Kattintson az OK gombra.

Amikor megjelenik a CSS-szabály meghatározása párbeszédpanel, kattintson a bal oldali Kategória listából, és válassza a Helymeghatározás lehetőséget a CSS pozicionálási tulajdonságainak megtekintéséhez.

A Helymeghatározás területen válassza a Relatív lehetőséget a Pozíció menüből, adjon meg egy szélesség és magasság értéket a Szélesség és Magasság szövegmezőkben, és adjon meg egy Felső és Bal értéket a Helymeghatározás tulajdonságai alatt. Kattintson az OK gombra.

Kattintson az OK gombra a Div tag beszúrása párbeszédpanel bezárásához.

Megjelenik egy új, viszonylag elhelyezett DIV helyőrző szöveggel.

A Top és Left értékek némileg eltérően viselkednek az abszolút és a viszonylagosan elhelyezett DIV-eknél. Relatív pozicionálás esetén ezek az értékek eltolást jeleznek a környező tartalomhoz képest, szemben az oldalon belüli beállított pozícióval.