Få in css-boxar i tables

Tråden skapades och har fått 8 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Öland
  • 2005-05-13 19:56

Har en weblayout jag gjort, mycket uppbyggd på boxar i css. Nu vill jag ha hela layouten centrerad på sidan.

Visst borde detta kunna gå att göra enklast i tabeller? Men hur? Mina boxar lägger sig bara över tabellerna...

//Filip

  • Medlem
  • Karlstad
  • 2005-05-13 20:22

"Boxar" kan vara absolut, relativt eller inte positionerade alls, och det beror på vilken sort du har. De två första kan inte ligga i en tabell.

Men du centrerar sidan enklast genom att lägga ALLT i ytterligare en <div>, en s.k. "wrapper". Skriv dit <div> direkt efter <body> och sedan </div> direkt före </body>. Sedan ger du den ett id, t.ex. "wrapper" och definerar bredd med CSS, samt höger och vänstermarginal till "auto".

För att IE/Win ska fatta, så måste du definera "text: centered" i CSS för body-taggen. Eftersom detta kommer att slå igenom till alla stilar i dokumentet, så måste du ange i de andra stilarna om du vill ha vänster- eller högermarginal.

EDIT: Här är förresten ett par bra beskrivningar:
http://www.andybudd.com/archives/2004/02/css_crib_sheet_3_centering_a_div/index.php
http://www.simplebits.com/notebook/2004/09/08/centering.html

  • Medlem
  • Öland
  • 2005-05-13 20:25

ahh danke, skall genast kolla detta,

tack danne

  • Medlem
  • Höganäs
  • 2005-05-13 20:56

Kan för övrigt varmt rekommendera Dan Cederholms (Simplebits.com) bok "Web Standards Solutions"! Rakt på sak, klara och bra exempel.

css för centrering, div id="wrap" direkt efter body-taggen:

body {
	margin: 0;
	padding: 0;
	text-align: center;
}

#wrap {
	margin: 20px auto; /* 20px från överkant, centrerad */
	width: 720px;

	text-align: left; /* resten av sidan vänsterjusteard */
}

/M

  • Medlem
  • Öland
  • 2005-05-13 21:23

funkar ju perfekt! hur funkar det på höjden?

  • Medlem
  • Karlstad
  • 2005-05-13 21:39
Ursprungligen av Filip:

funkar ju perfekt! hur funkar det på höjden?

Vertikal centrering?
Det skulle du ha frågat om från början, för si det funkar inte med en <div> och CSS alls, det. Istället får du stoppa in alltsammans på sidan i en ny tabell som du centrerar horisontellt. Sedan sätter du valign="middle" i <td> taggen. Därefter går du hit: http://apptools.com/examples/tableheight.php och kollar särskilt in länken längst ned som heter "Standards mode valid code rendering that works".
Tekniken funkar i alla moderna W3C DOM kompatibla webbläsare (dvs alla som är 4-5 år och nyare) utom IE/Mac som skiter i den vertikala centreringen och lägger upp sajten högst upp. Men det spelar ju mindre roll, eftersom knappt nån använder eländet längre, och om nån ändå gör det, så vet dom ju inte att sidan egentligen skall vara vertikalt centrerad.

  • Medlem
  • Öland
  • 2005-05-13 21:50

grejjen var egentligen att jag ville ha det bara på längden men kan vara bra att veta hur man gör för att få det på höjden, skall genast kolla upp detta med...

  • Medlem
  • Karlstad
  • 2005-05-13 22:27
Ursprungligen av Filip:

grejjen var egentligen att jag ville ha det bara på längden men kan vara bra att veta hur man gör för att få det på höjden, skall genast kolla upp detta med...

Okidoki. Bokmärk den där sidan hos apptools.com till dess.

Hacket med text-align behövs bara för IE 5.*/Win. IE6 fattar "margin:0 auto;" när den är i standardläge.

1
Bevaka tråden