Midtstille meny og innhold

[Tonny Kluften]

Hvordan midtstiller jeg meny og innhold slik som footeren her:
Pm for url

 

[Mr Vest]

For og få innholdet over i midten på siden kan du i css-diven som går rundt innholdet bruke f.eks "margin: 0 auto;"

I footeren på nettsiden du linker til er det bare teksten i footeren som er sentrert, noe du kan gjøre med vanlig html "<center>" eller med css "text-align:center;"

Jeg ble litt usikker på hva du mente mens jeg skrev her nå, så beklager om jeg er helt borte vekk med svaret mitt.

 

[Tonny Kluften]

Takk for det, men jeg trenger nok litt mere konkret hva jeg skal gjøre

 

[kongen]

<p align="center">TEKST</p>

eller

<div align="center">TEKST</div>

 

[zapotek]

Lag en DIV som går rundt alt innholdet, kall den feks. "Container" (alle de andre div'ene blir inne i denne). Så setter du "margin: 0 auto;" på denne som Atle nevner.

For eksempel:

#container
{
margin: 0 auto;
border: 0;
padding: 0;
width: (her setter du bredden du skal ha) px;
text-align: left;
}

 

[Tonny Kluften]

Jeg får ingen av forslagene deres til å fungere.

 

[zapotek]

Fra css'en din:

body
{
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}

.Main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}

Prøv på main istedenfor body.

 

[Mr Vest]

Altså, jeg lurer på om det muligens er noen misforståelser ute og går her. Er det egentlig nettsiden [Pm for url] du jobber med, eller er det en annen nettside,? og du bruker [Pm for url] som et eksempel?

På [Pm for url] er jo hele nettsiden i midten.. Er det innholdet som f.eks menyen på toppen du vil ha inn i midten?

 

[Tonny Kluften]

Det er nettsiden i linken jeg jobber med ja. Og både meny og innhold skal være i midten.

 

[Tonny Kluften]

body
{
  margin: 0 auto;
  padding: 0;
  background-color: #FFFFFF;
}

.Main
{
  margin: 0 auto;
}

Hjelper ikke. Jeg blir gal. Ok?

 

[peterandrej]

det skal være 0px auto; for å midtstille. evt bruk margin-left: auto; margin-right: auto; Men det er vel ikke div'ene du skal midtstille? Er det ikke innholdet? Legg i så tilfelle bare text-align: center; på alle div'er du finner.

Og for å si det sånn; det er MANGE div'er her. Hvem er det som har kodet dette egentlig? Fyren må jo være totalt inkompetent. Jeg har sjelden sett verre. Det var jo ca 30 div'er før man kom inn til innholdet. Herre-min-jesus!

Forøvrig, den menyen på toppen er jo en udef. liste, så der må du sette <li>-elementene til å være display: block; slik at de oppfører seg som div'er - og så må du sette margin: 0px auto på dem.

og i midten, dvs i innholdet, har du jo plutselig tabeller...

 

[zapotek]

Ja koden er usedvanlig rotete. Divene virker jo å være midtstilte alt. Det er bare å midtstille innholdet inni dem. Men jeg ville nesten ha startet å kodet denne helt på nytt igjen for å nøste opp alt.

 

[peterandrej]

Ja, du har jo bare 3 elementer her; navlinje, content og bunn. Hvorfor er det 10-15 div'er først i koden som alle er 10px brede? Hvorfor er det ørten div'er i midten?

Mitt tips: fjern alt utenom de 3 div'ene du trenger. Hvilket vil si:

#nav - toppmenyen.
#post-inner-article - innholdet (gi gjerne denne et annet navn)
#footer

Sett så alle disse 3 div'ene til margin-left og margin-right: auto; gi dem alle sammen en fixed width eks 950px, og sett text-align: center på alle div'ene. Menyen i toppen trenger ikke å være en liste. Det er lettere å style vanlige linker. Blir sånn #nav a, #nav a:hover, osv.

Og ta bort tabellen i midten. Hvis du ikke vil HA bildet til venstre og tittel til høyre da..

 

[Uregistrert]

<div><center>
Innhold
</center></div>

Denne virker nå på mine wp sider.

 

[michaelo]

Det er viktig å huske at for at margin: 0 auto; (man trenger ikke betegnelse (px, em osv) for verdioen "0") skal ha noen hensikt, så må elementet det påføres ha en gitt bredde. Alle block-nivå-elementer har i utgangspunktet 100% bredde, så dermed vil en midtstilling av denne ikke ha noen hensikt.

Så noe liknende burde gjøre susen:

body
{
  width: 100%;
}

.Main {
  width: 400px;
  margin: 0 auto;
}

For at dette skal fungere så er det også viktig at .Main ikke har position: absolute, eller noe floats.

Håper dette fungerer som forventet.