Jag är en 18 årig kille som går sista året på ProCivitas i Malmö. Här skriver jag om resor, kläder, musik, film och mycket annat ur mitt liv. Jag gillar att spendera min tid med vännerna och min flickvän Paulina, jag drar gärna ut och festar och vilda upptåg är något ni kommer att få läsa om..
Kontakt [email protected]




Sponsra gärna bloggen med ett klick nedan..


RSS 2.0
bloglovin

Hemligheten bakom "Blondinbella"-menyn

För alla er som frågat mig ett antal gånger så tänkte jag skriva lite kort om min vänstermeny som följer med sidan när man rullar ner.
Detta är för de som kan lite om html.



Jag arbetar med lager (layers), även kallat "AP Div"s. Det är inte mkt annat än en liten osynlig ruta som du kan med kod bestäma exakt var den skall vara etc.
Det är väldigt likt layers som i photoshop men man kan med kod bestäma var dem ska ligga någonstans.
<div style="position: relative; z-index: 9; left: 0px; top: 0px; padding:16px;border:0px;" >
Hej detta är insidan av en AP Div.
Här kan du lägga bilder etc.

</div>

Här ser ni ett exempel på en ap div som jag valt ska vara 0pixlar ifrån topen av hemsidan och 0 pixlar ifrån vänstersidan.

Position
Relative - Den här inställningen gör att lagret är relativt till övriga hemsidan. Dvs hemsidans kanter
Fixed - Den här inställningen gör att lagret är relativt till SKÄRMENs visning av hemsidan. Det väl säga att den hela tiden är på exakt samma plats även om man rullar ner så är den fortfarande kvar. Gå in här för att se exemplet "Tbks till startsidan".

Z-index - Om du har många lager så kan du ange index, dvs om ett lager har nr 1 och ett nr 2 så kommer tvåan hamna framför nummer 1.
Left
Right
Top
Bottom
- Dessa anger hur långt ifrån vänster, höger, toppen, bottnen av sidan som lagret ska finnas. obs du kan/bör inte ange både höger och vänster eller top och botten. Välj höger eller vänster, top eller botten.
Padding - Är avståndet runt om själva lagret där det ska vara tomrum.
Border - Om du vill ha en kant på lagret, vilket du INTE vill för lagret ska va onsynligt för du redan designet en så bra bild i lagret att du inte behöver någon kant.

Mer info så


För att få lagret att med fördröjning följa med hemsidan á la mig är i 2 steg.

Steg Nr 1

Ladda ner javascriptet - Klicka här
Jag ska inte ta credit för javascriptet..
Då jag laddat ner det själv och endast modifierat det lite



Steg Nr 2
Skriv in ditt lager och DIREKT UNDER DETTA kopierar du in koden

Exempel
<div style="position: relative; z-index: 9; left: 0px; top: 0px; padding:16px;border:0px;" >

Detta är mitt lager

</div>

HÄR DIREKT EFTER "</div>" skriver du in javascriptet.


Steg Nr 3

För att få lagret och javascriptet att fungera ihop MÅSTE man ange "id=floatdiv" i lagret

Exempel

<div id="floatdiv" style="position: absolute; z-index: 9; left: 0px; top: 0px; padding:16px;border:0px;" >


Jag tänker INTE svara på en massa individuella frågor, men är det något i inlägget ni inte förstår eller något jag skrivit otydligt/fel så säg till så uppdaterar jag inlägget!!


Kommentarer
Postat av: Emelie

=D Bra att du skrev inlägg om detta:)

2009-02-22 @ 12:48:36
URL: http://emeliesplanet.blogg.se/
Postat av: viccy

ändy, din blogg ser asbra ut! sitsnygg bild på dig, den i vänstra hörnet! ser sjukt fräsch ut:) (det gör du annars också tolka det inte fel:P)

puss

2009-02-28 @ 01:00:32

Kommentera inlägget här:


Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback