Hvordan man bygger en HTML5- og CSS3-sidelayout med absolutt posisjonering - dummier

Du kan bruke absolutt posisjonering for å lage anHTML5 og CSS3-sidelayout. Denne prosessen innebærer noen avveier. Du har en tendens til å få bedre kontroll over siden din med absolutt posisjonering (sammenlignet med flytende teknikker), men absolutt layout krever mer planlegging og mer detaljert oppmerksomhet.

Teknikken for å skape en helt posisjonert layout ligner den flytende teknikken (i generell forstand).

Oversikt over absolutt layout

Før du begynner å sette siden sammen med absolutt posisjonering, er det godt å planlegge hele prosessen. Her er et eksempel på hvordan prosessen skal gå:

1. Planlegg nettstedet.

   Å ha en tegning som angir hvordan nettstedet ditt skal se ut, er veldig viktig. I absolutt posisjonering er planleggingen enda viktigere enn flytende design fordi du må spesifisere størrelsen og plasseringen til hvert element.

2. Angi en total størrelse.

   Denne bestemte type layout har en fast størrelse. Opprett en all div som huser alle de andre elementene og spesifiser størrelsen på denne diven (i en fast enhet for nå, vanligvis px eller em).

3. Lag HTML.

   HTML-siden skal ha en navngitt div for hver del av siden (så hvis du har overskrifter, kolonner og bunntekster, trenger du en div for hver).

4. Bygg et CSS-stilark.

   CSS-stilene kan være interne eller koblede, men fordi absolutt posisjonering har en tendens til å kreve litt mer markering enn flytende, foretrekkes eksterne stilarter.

5. Identifiser hvert element.

   Det er enklere å se hva som skjer hvis du tilordner en annen farget ramme til hvert element.

6. Gjør hvert element helt posisjonert.

   Angi posisjon: absolutt i CSS for hvert element i oppsettet.

7. Angi størrelsen på hvert element.

   Angi høyden og bredden på hvert element i henhold til diagrammet. (Du gjorde lage et diagram, ikke sant?)

8. Bestem posisjonen til hvert element.

   Bruk venstre og øverste attributter for å bestemme hvor hvert element går i layoutet.

9. Still opp oppsettet ditt.

   Du vil sannsynligvis ønske å justere marginer og grenser. Du må kanskje gjøre noen tilpasninger for å få alt til å fungere.

Slik skriver du HTML

HTML-koden er ganske enkel:

absLayout. html

Layout med absolutt posisjonering

HTML-filen kaller et eksternt stilark kalt absLayout. css.

Legg til CSS

CSS-koden er litt lang, men ikke for vanskelig:

/ * absLayout.css * / #all {border: 1px solid black; bredde: 800px; høyde: 600px; posisjon: absolutt; venstre: 0px; topp: 0px;} #head {border: 1px solid green; posisjon: absolutt; bredde: 800px; høyde: 100px; topp: 0px; venstre: 0px; text-align: center;} #menu {border: 1px solid rød; posisjon: absolutt; bredde: 140px; høyde: 500px; topp: 100px; venstre: 0px; polstring-venstre: 5px; padding-right: 5px;} #content {border: 1px solid blue; posisjon: absolutt; bredde: 645px; høyde: 500px; topp: 100px; venstre: 150px; padding-left: 5px;}

Et statisk layout laget med absolutt posisjonering har noen viktige funksjoner å huske på:

• Du er forpliktet til å plassere alt. Når du begynner å bruke absolutt posisjonering, må du bruke den gjennom hele nettstedet ditt. Alle hovedelementene krever absolutt posisjonering fordi den normale strømningsmekanismen ikke lenger er på plass.

  Du kan fortsatt bruke flytende layout inne et element med absolutt posisjon, men alle dine hovedelementer (overskrift, kolonner og fot) må ha absolutt posisjon hvis en av dem gjør det.

• Du bør spesifisere størrelse og posisjon. Med en flytende layout, oppfordrer du fortsatt en viss mengde fluiditet. Absolutt posisjonering betyr at du tar ansvaret for både form og størrelse på hvert element i oppsettet.

• Absolutt posisjonering er mindre tilpasningsdyktig. Med denne teknikken er du ganske bundet til en bestemt skjermbredde og høyde. Du har problemer med å tilpasse seg til tabletter og mobiltelefoner.

• Alle bredder og høyder må legges opp. Når du bestemmer størrelsen på skjermen, må alle høyder, bredder, marginer, polstring og grenser legges til, eller du får noen merkelige resultater. Når du bruker absolutt posisjonering, er du også sannsynlig å bruke litt kvalitetstid med kalkulatoren, finne ut alle bredder og høyder.