Få in css-boxar i tables

2005-05-13 19:56

#1

Filip
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

Anmäl Ändra Gilla Svara

2005-05-13 20:22

#2

Danne V
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

Anmäl Ändra Gilla Svara

2005-05-13 20:25

#3

Filip
Medlem ●
Öland
2005-05-13 20:25

ahh danke, skall genast kolla detta,

tack danne

Anmäl Ändra Gilla Svara

2005-05-13 20:56

#4

Micke F
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

Anmäl Ändra Gilla Svara

2005-05-13 21:23

#5

Filip
Medlem ●
Öland
2005-05-13 21:23

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

Anmäl Ändra Gilla Svara

2005-05-13 21:39

#6

Danne V
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.

Anmäl Ändra Gilla Svara

2005-05-13 21:50

#7

Filip
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...

Anmäl Ändra Gilla Svara

2005-05-13 22:27

#8

Danne V
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.

Anmäl Ändra Gilla Svara

2005-05-14 23:14

#9

system.log
Medlem ●
Göteborg
2005-05-14 23:14

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

Anmäl Ändra Gilla Svara

Få in css-boxar i tables

Senaste nytt