Hvordan lage en avansert Div Layout

Når du oppretter en nettside, er det vanlig praksis å bruke en divisjon for å holde og posisjon innholdet på siden din. Noen Web-designere bruker divs for å erstatte tradisjonelle bord, for å erstatte rammer og, i noen tilfeller, er det bare å plassere et bilde eller kommentarer. Det er mulig å lage en avansert layout ved hjelp divs som den primære organisatoriske element, som omfatter noen rammer, tabeller, bilder og annet innhold du ønsker, slik at alt vises akkurat som du har tenkt.

Bruksanvisning

1 Lag en tegning eller digitalt bilde av dine planer for den endelige nettstedet layout. Dette vil gi deg en idé om hvor du trenger for å lage divs og hvordan du kan plassere dem riktig.

2 Lag en container DIV den størrelsen du vil at siden skal vises. For eksempel, hvis du vil at siden skal vise maksimalt 1000 piksler bred, opprette en DIV med at bredde for å holde de mindre divisjoner og en høyde lik innholdet lengden. Legg til "overflow-x: hidden;" for å hindre indre divs fra strekker seg til høyre lenger enn du ønsker. Dette gjør fortsatt Y verdi for å justere etter behov.

3 Lag divisjonene i beholderen DIV som vil fungere som din rammer hvis ønskelig. Hvis du vil ha en ramme øverst på siden, lage en DIV plassert helt med null avstand fra toppen og venstre og en bredde lik ett hundre prosent på siden. Plasser tittellinjen innholdet i denne DIV.

4 Sett inn en navigeringslinje DIV hvis ønskelig. For eksempel, hvis du ønsker en vertikal meny på venstre side av skjermen, skaper en divisjon bredden på menyen, og deretter legge til "float: left;" til eiendommene. Dette sikrer navigasjonsfeltet vises under tittelen bar og til venstre på siden.

5 Opprett en innholds DIV absolutt posisjonert med den venstre verdi lik navigasjonslinjen bredde og topp verdi lik tittellinjen høyde. Trekk bredden på navigasjonsfeltet fra bredden av beholderen DIV, og bruke resultatet som bredden på innholdet divisjon. Dette sikrer innholdet DIV er den perfekte størrelsen for å justere med kantene på siden din.

6 Bruk mindre divs for elementer innen innhold DIV, for eksempel bilder eller tabeller. Bruk absolutt posisjonering for å sikre at de vises riktig for alle brukere, og legge til en høy Z-indeks for å vise objektet ovenfor annet innhold. Slett noen kommando i koden trenger du ikke for en bestemt DIV. For eksempel, hvis du ikke ønsker å angi høyden, kopier koden og slette høyden attributtet.

Hint

• <Div style = "position: absolute; top: 0px; venstre: 0px; width: 900px; height: auto; overflow-x: skjult; z-index: 100;"> DIV innhold her </ div>
• Divs vil automatisk endre størrelse til å passe innholdet hvis ingen bredde eller høyde målinger er spesifisert.
• Divs som er plassert som "absolutt" eller "fast" kan ikke bruke "flyte" attributt.
• En DIV opprettet i en annen vil posisjonere i forhold til den overordnede divisjon. Hvis du ønsker å plassere utelukkende basert på kanten av nettleseren, ikke reir divisjonene.