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>



1 608 megtekintés