Nettsteddesign for bedrifter og andre organisasjoner inneholder ofte veldefinerte merkevare- og markedsføringselementer. Hvis nettstedet ditt har en nettside du vil ha sentrert, kan du gjøre det selv ved hjelp av en kombinasjon av HTML og CSS (Cascading Style Sheet) -koden. Mange utviklere bruker rullegenskaper for websidenes elementer for å diktere sentreringsegenskaper, men dette er ikke alltid pålitelig. For å definere et sentrert nettstedoppsett og en side som vil vises uten rullefelt, er det nødvendig med noen få CSS-deklarasjoner.

1.

Opprett HTML-siden din. Hvis du har en side du allerede jobber med, åpner du den. Ellers opprett en ny fil i et tekstredigeringsprogram og lagre det med ".html" -utvidelsen. Bruk følgende oversikt:

Legg merke til at siden har en seksjon for CSS-koden i hodet og et element i kroppen. Innholdet på siden skal plasseres inne i dette elementet. Hvis du jobber med en eksisterende side, kan du finne CSS-koden for den, som kan lagres i en egen CSS-fil som er koblet til fra sidehodet.

2.

Identifiser sidebeholderen i CSS. For å utforme det inneholdende elementet må du først identifisere det i CSS-koden. I stil-delen i sidens hode eller en egen fil hvis det er det du jobber med, legger du til følgende velg og skisser:

container {

}

Dette identifiserer elementet med "container" som sin ID-attributt. Stildeklarasjonene for elementet vil vises mellom åpnings- og lukkekonsollene. Alternativt kan du identifisere elementet ved hjelp av en klasseattributtverdi som følger:

.container {

}

Dette vil identifisere følgende element:

3.

Påfør en fast bredde til elementet for å sentrere innholdet. For å sentrere elementene på siden din, må det inneholdende elementet ha en fast bredde. Legg til en mellom CSS-parentesene for "container" -elementet som følger:

bredde: 800 ganger;

Endre høydeverdien som passer til ditt design. Nå kan du bruke en marginalegenskap som vil tvinge elementet til å sitte på siden:

margin: auto;

4.

Forhindre at elementet ruller. Hvis du ikke vil at siden skal rulle, må du bruke en høydeegenskap til beholderelementet som følger:

høyde: 90%;

Endre verdien som passer til ditt design. Hvis elementene inne i beholderen opptar mer plass enn dette og du ønsker å forhindre rulling, må du skjule elementoverløpet som følger:

flow: hidden;

Dette forhindrer rullefeltet fra å vises selv om innholdet på siden din er mer enn den tildelte høyden i brukerens nettleser.

5.

Lagre og se siden din. Åpne den i en nettleser eller last opp den til nettstedet ditt for å se resultatet. Det kan hende du må gjøre justeringer for å komme frem til ønsket design. Pass på at du tester siden når du har fullført innhold i det, da utseendet kan variere betydelig.

Tips

• Ulike nettlesere implementerer CSS-regler på varierende måter, så sørg for at du tester sidene dine på mer enn én.

Advarsel

• Å skjule overflødigheten av et websideelement kan føre til at noen av brukerne ikke ser alle sidene dine.