Modulfejléc2016.05.05. 10:07, Juci
Egyedien
Ma egy kicsit fejtegetni fogom, hogyan tehetsz egyedivé egy modulfejlécet. Megannyi trükk van hozzá!
Most a szélső menüre koncentrálok, de tudjuk, hogy ugyanezeket a tulajdonságokat lehet adni egy középső menünek is!
Ez a kód az alap kódunk
.column_side_td .module .modtitle {
border:2px solid #E6E6E6;
background:transparent!important;
Font-family:'Playfair Display'!important;
font-size:12px;
padding-top:3px;
padding-bottom:5px;
font-weight:900!important;
font-style:italic;
text-align:center!important;
color:#7D7C7C!important;
}
Lehet látni, hogy sehogyan sem mozgattuk térben a modulfejlécet eddig. Így néz ki alapból most a modulunk:
Most adunk neki pár új tulajdonságot.  Szeretném ha térben mozgatható lenne és eldöntöttem, hogy azt szeretném ha lejjebb kerülne a modulfejléc. Több tulajdonságra is szükségem lesz:
position:absolute!important; /*azért, hogy mozgatható legyen*/
margin-top:-10px!important; /*azért, hogy lejjebb mozduljon*/
z-index:2!important; /*azért, hogy térben ne a tartalmas modul mögött jelenlen meg, hanem előtte*/
width:250px!important; /*meghatározom a szélségét, ezzel is lehet játszani*/
Most pedig játszadozzunk.
01) Itt a modulfejléc háttere átlátszó és csak egy felső szegélye van, de mivel be van süllyesztve így néz ki. Azért hosszabb, mert a modtitle width értéke nagyobb, mint a sima column_side Itt a margin-left:-50px; is hozzákerült az értékekhez, hogy vizszíntesen is mozgathassuk.
02) Itt pedig kisebb a width érték, mint a column_side-nál alapból, így összeugrik. Háttérszínt adtam neki, hogy szépen kirajzolódjon.
03)A margin-left értéket nagyon negatívra húztam így bal oldali menü esetén szépen kivándorolt a bal oldalára a modulfejléc.
FONTOS! Mivel ha előrébb hozod térben és függőlegesen lefelé mozgatod a modulfejlécet azzal fogsz szembesülni, hogy a szöveg túlmászik alatta. Ha adsz neki egy padding-top:20-30px-es értéket esetleg !important jelzővel akkor lejjebb fog ez kúszni!
|
AJÁNLOM AZ OLDALT
"So bring your passport girl, I'm trying to show you the world"
Szeretném ha térben mozgatható lenne és eldöntöttem, hogy azt szeretném ha lejjebb kerülne a modulfejléc. Több tulajdonságra is szükségem lesz:
