Bricks Builder Div

A Div egy általános célú, blokk szintű wrapper elem, ami sima

A döntéshez elég egyetlen kérdést feltenni: önállóan is értelmes tartalmat képvisel ez az elem? Ha igen, akkor Block. Ha az elrendezésért felel, akkor Container. Ha csak segít pozícionálni vagy összefogni valami apróságot, akkor Div. Fölöttük pedig ott a Section, ami a teljes szélességű oldalblokkot adja, a hero-t, a CTA-t, a láblécet. Div-et tehát akkor válassz, ha az elem egy-két gyerekből áll, nem fog bővülni, dekoratív a szerepe, vagy csak egy position: relative szülő kell egy abszolút pozicionált gyerekhez. Ha ennél nagyobb dologhoz nyúlnál vele, majdnem biztosan Block vagy Container kellene helyette.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Div”, és a megfelelő szülőelembe húzod. Üres wrapperként jelenik meg, innentől a belső elem adja az értelmét. Egyetlen szokást érdemes felvenni hozzá: nevezd át a struktúrapanelen, amint létrehoztad – „Ikon wrapper”, „Badge”, „Overlay”. Egy névtelen Div-láncot később senki nem fog érteni, beleértve saját magadat is. A Ctrl+Shift+Z az utolsó módosítást vonja vissza, ha elrontanál valamit szerkesztés közben.

Display és elrendezés. A Div alapból display: block, tehát a benne lévő elemek egymás alá kerülnek. Ha ikont és szöveget kell egy sorba tenni, váltsd flex-re, Align Items: center és 8–12px gap mellett, ez a leggyakoribb Div-beállítás az egész Bricksben. Inline-block akkor jó, ha a Div szélességét a tartalma szabja meg, és sorba kell illeszkednie más elemekkel, tipikusan badge-nél vagy tagnél. Grid-et Div szinten ritkán kell használni, de lehet.

Méret. A Width és a Height általában maradhat auto-n, a tartalom szabja meg. Badge-nél vagy kör alakú ikonnál viszont fix px érték adja az egyforma méretet: egy 48×48px-es Div border-radius: 50% értékkel, flex megjelenítéssel és középre igazított tartalommal pontosan azt a kör alakú ikonhátteret adja, amit a legtöbb feature boxban látni. Egy dolgot érdemes fejben tartani: az üres Div-nek nincs mérete, tartalom vagy explicit width és height nélkül 0×0 pixeles marad.

Pozíció és z-index. A Position: relative akkor kell a Div-en, ha benne egy absolute pozicionált gyerek ül, és fordítva: egy absolute Div mindig a legközelebbi pozicionált őséhez igazodik, tehát a szülőn ott kell lennie a relative-nak, különben az elem az egész oldalhoz képest pozícionálódik. Overlay rétegnél a z-index sorrendjét is mindig állítsd be kézzel, különben véletlenszerű lesz a rétegek egymásra kerülése: háttér 1, overlay 2, tartalom 3.

Stílus. A háttér, keret, border-radius és padding ugyanúgy elérhető, mint a nagyobb elemeknél. Badge-nél bevált kombináció: brand színű vagy piros (#e74c3c) háttér, 4px 12px padding, 4px border-radius a szögletes, 999px a pill formához, és 12–14px félkövér betűméret.

Az overlay egy Div, ami félig átlátszó vagy egyszínű rétegként fekszik egy kép vagy egy Section fölött, jellemzően azért, hogy a fölé kerülő szöveg olvasható maradjon. A recept mindig ugyanaz: a képet tartalmazó Block vagy Container kap egy position: relative értéket, belé kerül egy Div position: absolute pozícióval, Top és Left 0-n, 100% szélességgel és magassággal, a hátterébe pedig például rgba(0, 0, 0, 0.45). A rétegsorrend a z-indexből jön: a kép 1-en, az overlay Div 2-n, a szöveget vagy gombot tartalmazó elem 3-on, az utóbbin position: relative értékkel, különben nem érvényesül a z-index.

A badge ugyanennek a mintának a kistestvére: egy Div, ami a szülő Block sarkába van pozícionálva, például position: absolute mellett top: 16px és right: 16px értékkel, benne egyetlen rövid szöveggel („Új”, „Akció”, „Top”). Itt is a szülő Block position: relative értéke a kulcs, enélkül a badge elvándorol a kártyáról. Mindkét esetben igaz, hogy maga a Div nem tartalmi elem, csak a réteget és a pozíciót adja, a tartalom benne vagy mellette külön elemként él.