In de diepte: Myspace DIV Overlays (5 / 6 stap)

Stap 5: DIV tabellen

In het begin toen ik sprak over geduld, dit wat ik is over spreek. In deze stap moet u om al uw afzonderlijke tabellen DIV voor uw secties. Dit is waarschijnlijk het moeilijkste voor de meeste mensen, of althans de meest verzwarende.
Oke dus eerst goed start met mijn sectie, zal de code voor de tabel als volgt uitzien:

< div id = layer1 stijl = "position: absolute; boven: 20; links: 20; Breedte: 300; hoogte: 300; z-index: 1; opvulling: 5px; background-color: transparant; " >
Dit waren de inhoud van het vak gaat.
< / div >

Deze moeten gaan op het einde van u graag wil ontmoeten sectie.

Eerst en vooral moeten we de breedte en hoogte, is dit de eenvoudigste manier om het perfect te maken.
1.) toegankelijk opwaarts uw achtergrond in de beeldeditor opnieuw.
2.) pick de sectie u doen eerst van plan, opent de rectangular marquee tool en kies het deel van het vak plan u te doen.

3.) Oke nu bewerken -> kopiëren. Ga vervolgens naar bestand nieuw, met Photoshop, zal het automatisch aanpassen met de pixels die u hebt gekopieerd, met anderen kan verschillende. Dus nu moet je de breedte/hoogte.
4.) zodat de mijne is 240 x 185, dus nu kunt toepassen op de code en verplaatsen op.

< div id = layer1 stijl = "position: absolute; boven: 20; links: 20; breedte: 240; hoogte: 185; z-index: 1; opvulling: 5px; achtergrondkleur: 00FF00; " >
Dit waren de inhoud van het vak gaat.
< / div >

Nu dingen een beetje gemakkelijker te maken, wijzigt u de achtergrondkleur aan iets zodat kunt u de gehele doos zoals u deze hebt geplaatst, zal wij wisseling op weerom voor transparante om later op te lossen van de achtergrond.

< div id = "layer2" style = "position: absolute; boven: 20; links: 20; breedte: 240; hoogte: 185; z-index: 1; opvulling: 5px; background-color: FF00FF; " >
Dit waren de inhoud van het vak gaat.
< / div >

Dit deel, moet ik toegeven. Totaal zuigt :D
maar je krijgt door het: P
Nu moeten we het vak mooi en zelfs, toevoegen aan de top: 20 om er meer dalen, toevoegen aan links: 20 te maken gaan over te plaatsen. Dit vindt u waarschijnlijk verschillende proberen te plaatsen, met name is dat je zelfs willen. Begin met de top, zelfs naar beneden krijgen en plaats het dan met de linker.

Zoals u met dit zien kunt ik nodig om het te verplaatsen een beetje meer omhoog, nu haar op terug naar boven: 256
Dus nu heb ik het gelijkmatig geschikt vanaf de top, bij 250

Nu om het te plaatsen vanaf de linkermarge, die het zelfde concept is.
Oke dus nu heb ik mijn tabel plaatsen rechts waar ik wil:

En mijn code ziet er nu als volgt
< div id = "layer2" style = "position: absolute; Top: 250; links: 143; breedte: 240; hoogte: 185; z-index: 1; opvulling: 5px; background-color: transparant;" >
Dit waren de inhoud van het vak gaat.
< / div >

U kunt nu de kleur wissel weerom voor transparante en uw inhoud toe te voegen:

Dit is dus nu waar ik bedoeld moet u enige basiskennis van HTML, daadwerkelijk inhoud toevoegen aan de vakken. Mijn vak ziet er nu als volgt uit:

Hoewel u wat je zou willen als uw inhoud toevoegen kunt.

Mijn DIV vak code ziet er nu uitzien (voor elke verwijzing die u wellicht):

< div id = "layer2" style = "position: absolute; Top: 250; links: 143; breedte: 240; hoogte: 185; z-index: 1; opvulling: 5px; background-color: transparant; " >
< een href = "http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmllbmRJRD04MTk3Mjk1" >
< center >
< img src = "http://a384.ac-images.myspacecdn.com/images01/58/m_d065aa4a35adac5501ddcca3a9672fc7.jpg" / >< / center >< /a >< br / >< b > Male < br / > 17 jaar oude < br / > < /b > Prescott, Arizona
< br / >< een href = "http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmllbmRJRD04MTk3Mjk1" > Alle foto's < /a >
< / div >

Nu, het is hetzelfde proces te vullen alle vakken, maar aangezien ik liever een schuifbalk aan toevoegen mijn over mij sectie, ik zal je laten zien hoe dat te doen, die is net zo eenvoudig als het toevoegen van een regel code.

Dit is de code voor mijn over mij sectie, merken de één verandering die het maakt in een scrollbar-sectie:
< div id = "layer2" style = "position: absolute; boven: 256; links: 450; breedte: 376; hoogte: 204; z-index: 1; opvulling: 5px; background-color: transparant; overloop: automobiel;" >
alle inhoud hier
< / div >

Nu net herhaal deze stap totdat u alle uw dozen hebt opgevuld. : D