Erre a leírásra is sokan vagytok kíváncsiak, így az általam lehető legegyszerűbb módját hoztam el kóddal együtt. A demót csak képen tudjátok megnézni. Egy kis magyarázat azért tartozik ehhez a kódhoz, úgyhogy kérlek olvassátok el a cikket! Egyébként arról van szó, hogy a szélső modulod fixen a lap tetején marad akkor is, ha te lefelé görgeted a honlapodat.
 

Kód
Ez már a kész kód. Az, amit ezen a képen látsz. Ha ezt elviszed, akkor nagyon már semmin nem kell majd módosítanod, csak a CSS részén. Lejjebb 1-2 szó a kódról…
 

<div class="fix_modul">

<span class="fix_modul_head">Fix modul címe</span>

<p style="text-align: justify;">

Ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, Ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, Ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, Ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, Ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, Ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, ide jön a tartalom, </p>

</div>

<style type="text/css">

.fix_modul {

   LEFT: 8px;

   WIDTH: 245px;

   POSITION: fixed;

   TOP: 5px;

   HEIGHT: 300px;

   background-color: #ffffff;

   padding: 5px;

   border: 1px solid #E6E6E6;

}

.fix_modul_head {

   font-family: Tahoma, "Trebuchet MS";

   font-size: 14px;

   color: #ffffff;

   background-color: #8D8D8D;

   background-repeat: repeat-x;

   padding-top: 4px; /* modul széle és a szöveg közti távolság */

   padding-bottom: 4px; /* modul széle és a szöveg közti távolság */

   border: 0px;

   letter-spacing: 2px;

   text-transform: uppercase;

   font-style: normal;

   font-weight: normal;

}

--></style>

Ez a kód akkor a legelőnyösebb, ha olyan honlapon használod, ami bannermentesítve van. Azért, mert szerintem úgy a legesztétikusabb a kód, ha a lap tetjén van a modul. De ha neked úgy is tetszik, hogy annyival lejjebb dobod, hogy a banner alá teszed, akkor nekem úgy is jó :) Egy kép arról, hogyha van banner és úgy teszed a kódot a lap tetejére. Nem szabad és nem is szép!

 

 

Minden esetben a honlapodat bal oldalasra állítsd be ilyenkor és úgy használd a kódot, mert különben elfog csúszni az oldal. Inkább utána CSS-sel dobd el a honlapodat beljebb.

És most lásd a képeken is, hogy miről is van szó. Görgetsz lefelé, már a lap alján vagy és a modul még mindig a lap tetején van :)

 

 

1 360 megtekintés