I djup: Myspace DIV överlägg (5 / 6 steg)

Steg 5: DIV tabeller

i början när jag pratade om tålamod detta är vad jag talar om. I det här steget måste du placera alla dina olika DIV tabeller för din sektioner. Detta är förmodligen svåraste för de flesta, eller åtminstone de försvårande.
Okej så första bra start med min avsnitt, koden för tabellen kommer att se ut så här:

< div id = layer1 style = "position: absolute; topp: 20; vänster: 20; bredd: 300, höjd: 300; z-index: 1; stoppning: 5px; bakgrundsfärg: transparent; " >
Detta är var innehållet i rutan går.
< / div >

Dessa måste gå i slutet av du vill jag möta avsnitt.

Först och främst måste vi ställa in bredd och höjd, är detta det enklaste sättet att göra det perfekt.
1.) öppen upp din bakgrund i din image editor igen.
2.) plocka avsnittet du planerar att göra först, öppna verktyget rektangulär markeringsram och välj delen av rutan du planerar på att göra.

3.) Okej nu Redigera -> Kopiera. Gå till Arkiv nytt, med Photoshop, det automatiskt passar med de pixlar du har kopierat, med andra kan det vara olika. Så nu borde du har den bredd och höjden.
4.) så min är 240 x 185, så nu kan tillämpa den på koden och gå vidare.

< div id = layer1 style = "position: absolute; topp: 20; vänster: 20; bredd: 240; höjd: 185; z-index: 1; stoppning: 5px; bakgrundsfärg: 00FF00; " >
Detta är var innehållet i rutan går.
< / div >

Nu vill göra det lite enklare, ändra bakgrundsfärgen till något så att du kan se hela rutan som du placerar den, kommer att vi ändra tillbaka till öppet senare att fixa bakgrunden.

< div id = "layer2" style = "position: absolute; topp: 20; vänster: 20; bredd: 240; höjd: 185; z-index: 1; stoppning: 5px; bakgrund-color: FF00FF; " >
Detta är var innehållet i rutan går.
< / div >

Denna del, måste jag erkänna. Helt suger :D
men du kommer få igenom den: P
Nu måste vi placera boxen fin och jämn, Lägg till topp: 20 att göra det gå mer ner, lägga till vänster: 20 att göra det gå över. Detta tar dig troligen flera försök att placera, är särskilt du vill ha det ännu. Börja med toppen, få ner ens och placera det med vänster.

Som ni kan se med detta jag måste flytta lite mer upp, just nu dess på topp: 256
Så nu har jag den passar jämnt uppifrån, på 250

Nu placera den från vänstra marginalen, vilket är samma koncept.
Okej så nu har jag min tabell ställen precis där jag vill ha det:

Och min kod ser nu ut så här
< div id = "layer2" style = "position: absolute; topp: 250; vänster: 143; bredd: 240; höjd: 185; z-index: 1; stoppning: 5px; bakgrundsfärg: transparent;" >
Detta är var innehållet i rutan går.
< / div >

Nu kan du växla färg tillbaka till transparent och Lägg till ditt innehåll:

Så nu är det där jag menade att du skulle behöva några grundläggande HTML-kunskaper, att faktiskt lägga till innehåll till rutorna. Min box ser nu ut så här:

Även om du kan lägga till vad du vill ha som ditt innehåll.

Min låda DIV koden nu ser ut så här (för varje referens kan du):

< div id = "layer2" style = "position: absolute; topp: 250; vänster: 143; bredd: 240; höjd: 185; z-index: 1; stoppning: 5px; bakgrundsfärg: transparent; " >
< en href = "http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmllbmRJRD04MTk3Mjk1" >
< center >
< img src = "http://a384.ac-images.myspacecdn.com/images01/58/m_d065aa4a35adac5501ddcca3a9672fc7.jpg" / >< / center >< /a >< br / >< b > hane < br / > 17 år gamla < br / > Prescott, Arizona < /b >
< br / >< en href = "http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmllbmRJRD04MTk3Mjk1" > Visa alla bilder < /a >
< / div >

Nu, det är samma process att fylla alla rutor, men eftersom jag skulle föredra att lägga till en rullningslist till min om mig avsnitt, jag ska visa dig hur man gör det, som är lika enkelt som att lägga till en rad kod.

Detta är koden för min om mig avsnitt, märker en förändring som gör det till en scrollbar avsnitt:
< div id = "layer2" style = "position: absolute; topp: 256; vänster: 450; bredd: 376; höjd: 204; z-index: 1; stoppning: 5px; bakgrundsfärg: insyn. overflow: auto;" >
allt innehåll här
< / div >

Nu bara upprepa detta tills du har fyllt upp alla dina lådor. : D