Gondolom már találkoztatok az alábbi modulfejléc stílussal, egyszerű és mutatós, és el sem hinnétek mennyire pofon egyszerű megcsinálni!

Ehhez nagymértékben hozzájárul a gportálos modulfejléc és modulok felépítése. Ugye igazából maga egy modul, egy táblázat, aminek van teteje alja és közepe is és ezek vannak külömböző osztályokkal ellátva. Viszont a bennük található tartalom min-mind egy-egy (vagy több-több) külön elem.

.modtitle {} ugye ő egy modulfejléc
.column_side .modtitle {} ő már egy konkrétan oldalsó modulfejléc
.column_side .modtitle div {} ő pedig még konkrétabban az oldalsó modulfejléc szövege

Ugye megvan már ránézésre is hogy a képen látható hatás érdekében, a modulfejlécet és a benne található tartalmat külön-külön kell mozgatnunk. A következő kóddal érhetjük el a kívánt hatást!

Pirossal emeltem a ki a kódban a nagyon fontos részeket.
Alapvetően a jelenségünk úgy néz ki hogy van egy táblázat cellánk, és abban van egy dobozunk, a doboz a rendelkezésre álló összes helyet kitölti. Nagyon nem mozgatható a cellán belül sem, ezért a div display értékekét átírjuk inline-ra, így egy akkora egységet kapunk ami magában foglalja a szöveget, és nem az egész rendelkezésére álló helyet, ez jól látszik ha a .column_side .modtitle div-nek háttérszínt állítunk be.
A szöveg középre helyezése, az inline elemekre nem azok az elhelyezési szabályok érvényesek mint a dobozokra, nem működik rájuk a float tulajdonság és margin-ok segítségével sem helyezhetjük középre. De a módszer százszor egyszerűbb! Az "anyadoboznak" mondjuk meg hogy a benne található szöveg legyen középen! Majd a szövegre is ráerőítünk picit, az align: center-el.
A vonalra való ráhelyezés pedig még ezeknél is egyszerűbb, láthatjátok hogy magának a modulfejlécnek felírtunk egy felső keretet, és a div-et a top: -7px-el toltuk rá. 

Súgó Még nincs hozzászólás.

Új hozzászólás Frissítés