9 svar · 482 visningar · startad av überfuzz
Jag satt och pillade med en hemsida, den som ska ha den vill att den ska vara centrerad. Ok! Efter att jag prövat lite olika sätt kom jag fram till följande: body { position: absolute; left: 50%; width: 707px; margin-left: -353px; background: #ddc; } Mycket tack vare ett inlägg här i forumet där jag såg att man kunde ha negativa värden i marginalerna. Jag är grön på centrering och undrar om det finns någon finare lösning. Kan alla webläsare tolka min centrering? :q
Så här kanske?
[B]CSS:[/B]
body {
margin: 0; padding: 0;
text-align: center; } /* centrerar layouten 1 - för äldre webläsare */
#layout {
width:707px;
margin: 0 auto; /* centrerar layouten 2 */
text-align: left; } /* justerar tillbaka innehållet åt vänster */
[B]HTML:[/B]
<body>
<div id="layout"> : : </div>
</body>
Så vitt jag vet funker det i "alla" webläsare. :)
Okej, äldre läsare skriver du. Finns det någon tummregel eller liknade. Vad är en äldre läsare? Finns det något i min centrering som äldre läsare kan missa?
Förresten, vad är text-align för tagg? Vanlig justering?
überfuzz skrev:
Förresten, vad är text-align för tagg? Vanlig justering?
Det är ingen "tag", det är en CSS egenskap ("center" är värdet) ;)
Egenskapen justerar inline element på sidan (t.ex. text och bilder) i moderna webbläsare, allt i omoderna dito. Vad som är omoderna, kan du räkna ut från tiden från och med när IE 6 kom och tidigare.
I moderna webbläsare centreras blockelement (allt som enligt standard HTML läggs "automatiskt" på ny rad (<P> <Hx> tabeller etc utan användning av <br>) genom att ange vänster- och högermariginaler till "auto". Sådant som negativa värden och/eller fastställda avstånd (oavsett värde) från höger eller vänster är "fulkod" enligt mig! §e Hur centrerat något blir med det, beror också på vilken upplösning man har på skärmen.
Jag har för vana att testa koden i olika upplösningar. Upplösningen tycks inte påverka hur centrerat det blir med min "fulkod". ;-)
Som Mozfan påpekade - äldre webläsare = de som inte hanterar Css2 på ett okej sätt. Främst IE5. Därför text-align=center.
Du kan ju såklart centrera din sida på det sätt du vill!
Men den kod jag presenterade ovan är det sätt man vanligtvis använder. Och det finns väl ingen anledning att inte använda det som är vanligast - eftersom såna tekniker i större utsträckning är testade så att de fungerar i "alla" webläsare. :OO
En anledning att inte använda absolut positionering med negativ marginal är att innehållet på sidan försvinner bakom den vänstra kanten av fönstret om man råkar ha för litet fönster. Centrerar man med marginaler försvinner det bara bakom kanten på höger sida vilket man kan komma åt med rullningslisten.
nipon, skorpan> jag fattar vad ni menar, antar att jag får lägga om taktik. Tack för hjälpen!!!
ok, en fråga till. när jag sedan placerar ut mina div:ar. vilket är att föredra; justera placeringa med marign-left margin-top eller med position?
