Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Haladó leírások
Haladó leírások : Fix bal oldali modul létrehozása

Fix bal oldali modul létrehozása


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 olvasd 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>
 
Leírás
 
1. 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!
 
 
2. 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.
3. É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 :)
 
 
 
 

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

Megjelent a The Sims 4 legújabb kiegészítõje, a Laundry Stuff Pack. Vajon megéri megvenni? Derítsd ki Te magad!    *****    Állatok - Könyvek - Zene - HobbiZoona Blog - Állatok - Könyvek - Zene - HobbiZoona Blog - Állatok - Könyvek - Zene -Katt    *****    Lépj be a lovak csodálatos világába! Nevelj te is nálunk! KATT KATT KATT KATT    *****    Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók    *****    Rendelj születési horoszkópot és 3 év elõrejelzés ajándékba a tiéd. Ne feledd a horoszkóp a lélek tükre,bele kell nézni!    *****    családi pótlék utalás 2018 - csp utalás - utalás idõpontja 2018 - családi pótlék kifizetések !    *****    Ismerd meg az Olicity párost! Minden a Zöld Íjász címû sikersorozat imádott szerelmespárjáról! Mindennap friss!    *****    SZEREPJÁTÉK! Ha aktív oldalon szeretnél játszani, nézz be és légy része egy egyedi történetnek! Csatlakozz!    *****    Karácsonyi képekkel vár a Mesetár! Kukkants be a két nyuszihoz és Miska macskához! Boldog ünnepeket kíván: Nyuszi Mama