CSS hvordan center stiller man en webside med brug af CSS

Tilmeldt 10. Nov 09

Indlæg ialt: 0

slettet_bruger Skrevet 12-12-2010 kl. 20:17

Hvor mange stjerner giver du? :

hej Aminos

mit CSS er lige til rotterne, jeg kan ikke få centerstillet min side med CSS de anvisninger jeg har findet indtil nu funker ikke, kan nogen hjælpe

Fra Nykøbing Falster

Tilmeldt 17. Jul 08

Indlæg ialt: 5906

Casper Schneidereit Fra Casper Schneidereit A/S Skrevet 12-12-2010 kl. 20:19

Hvor mange stjerner giver du? :

Du kan benytter: margin-left: auto; margin-right: auto; på det element du vil center i forhold til et andet element. Men hvis vi kunne se din source code, så vil det være meget nemmere at give et konkret svar :-).

+10 timers online kursus i ejendomsinvestering

Fra Horsens

Tilmeldt 21. Jul 09

Indlæg ialt: 668

Anders Nielsen Skrevet 12-12-2010 kl. 20:23

Hvor mange stjerner giver du? :

Hej,

Tror egentlig ikke forummet er beregnet til den slags - jeg vil dog gerne svare

Du lægger det hele ind i en wrapper -og så lægger du din navigationsbjælke og hovedtekst ind i wrapperen.

Send en personlig meddelelse, så sender jeg dig koden.

Måske kan du bruge det.

VH

Anders

Fra Puerto De La Duquesa

Tilmeldt 13. Jul 09

Indlæg ialt: 3506

DesignYOU - Allan Hansen Fra DesignYOU - Kreative løsninger Skrevet 12-12-2010 kl. 20:48

Hvor mange stjerner giver du? :

Fireball:
mit CSS er lige til rotterne, jeg kan ikke få centerstillet min side med CSS de anvisninger jeg har findet indtil nu funker ikke, kan nogen hjælpe

Du laver en Mainwrapper sådan her:

Din hjemmeside her ....

</div>

CSS til din mainwrapper:

.mainwrapper {
    width : 100%;
    margin : 0 auto;
    padding : 0;
}

Dette fungere hos mig i alle browsere ;)

/allan

- Unikke web design til gode priser -

Fra Puerto De La Duquesa

Tilmeldt 13. Jul 09

Indlæg ialt: 3506

DesignYOU - Allan Hansen Fra DesignYOU - Kreative løsninger Skrevet 12-12-2010 kl. 20:48

Hvor mange stjerner giver du? :

Anders:
Tror egentlig ikke forummet er beregnet til den slags -

Jo da her kan alle få hjælp Wink

/allan

- Unikke web design til gode priser -

Tilmeldt 30. May 10

Indlæg ialt: 22

m2w_kenneth Skrevet 12-12-2010 kl. 22:53

Hvor mange stjerner giver du? :

Hvis du arbejder med position egenskaber er der er en anden ganske god metode. Lad os sige din side har et overordnet tag der hedder noget i retning af <div id="wrapper">, så vil din css kode være noget i retning af:

div#wrapper {
position:absolute;
left:50%;
width:900px;
margin:0 0 0 -450px;
}

Grunden til at den er -450px er for at margin halverer positionen ift. sidens bredde. Derfor bør du ændre margin til minus det halve af sidens totale bredde.

Fra Aarhus C

Tilmeldt 9. Sep 10

Indlæg ialt: 684

Lars Rasmussen Fra 1337 ApS Skrevet 12-12-2010 kl. 23:00

Hvor mange stjerner giver du? :

Jeg benytter også

margin: 0 auto 0 auto;

Dog har jeg før haft problemer med nogle IE-versioner, og har derfor været nødsaget til at bruge følgende op samme tid:

body{

text-align: center;

}

#wrapper{

text-align: left;

}

Fra Københavnsområdet

Tilmeldt 24. Feb 10

Indlæg ialt: 69

Quaero Skrevet 12-12-2010 kl. 23:46

Hvor mange stjerner giver du? :

Som DesignYOU allerede har beskrevet, centrerer man et block-element (dvs. <div>, <table>, <b>, <strong> osv...) ved at bruge følgende "hack":

.centrer-element {
margin: 0 auto;
width: 1024px;
}

- hertil er det vigtigt at bemærke, at der skal angives en width i din CSS, for at hacket virker korrekt.

"margin-left: auto; margin-right: auto;" har den samme effekt, som ovenstående, men "fylder" unødvendigt i din CSS-fil (antal tegn).

"text-align: center;" har ikke den tilsigtede effekt på block-elementers ydre egenskaber - kun de indre.

"positionering" af elementer bør kun anvendes, hvis man har fuldstændig styr på HTML/CSS, og ved hvad man gør - og i langt de fleste tilfælde er positionering af HTML-elementer slet ikke nødvendigt (Keep it simple).

Din linkguide til steder på nettet med viden, information og ressourcer

Fra Varde

Tilmeldt 30. Oct 07

Indlæg ialt: 250

Rasmus Henriksen Fra RH Freelance Skrevet 13-12-2010 kl. 00:07

Hvor mange stjerner giver du? :

DesignYOU:

.mainwrapper {
    width : 100%;
    margin : 0 auto;
    padding : 0;
}

Med width 100% er der intet at centrere :) Men ellers ja, det er den "rigtige" metode. Bemærk at man blot kan angive margin: auto;

Hvis du derimod skal have en margin til top og bund, eksempelvis 50px kan du skrive margin: 50px auto; eller forskellige margin: 50px auto 40px auto;

Margin angives i rækkefølgen margin: top højre bund venstre; og auto skal være angivet i højre og venstre.

Venligst
Rasmus

Fra Varde

Tilmeldt 30. Oct 07

Indlæg ialt: 250

Rasmus Henriksen Fra RH Freelance Skrevet 13-12-2010 kl. 00:10

Hvor mange stjerner giver du? :

m2w_kenneth:

div#wrapper {
position:absolute;
left:50%;
width:900px;
margin:0 0 0 -450px;
}

Man kommer meget hurtigt galt afsted med sådanne løsninger :) Specielt fordi absolute elementer ikke "trækker" parent elementer med til bund (dvs parent element vil ikke slutte der hvor absolute elementet i virkeligheden slutter) - den bliver ikke "regnet" som indhold der fylder noget. Den ligger blot og flyver uafhængig af andre elementer.