Centrera med float?

2007-11-16 10:17

#1

Dana
Medlem ●
Trollhättan
2007-11-16 10:17

Hej!

Jag hittar verkligen inget om hur man centrerar med float.. Går det inte centrera med float?
Det finns en massa tutorials om hur man gör allt så att det får ett "flow" från vänster till höger, så att hemsidan får den egenskapen, att flöda på samma sätt som texten.

Men jag vill centrera alla boxar ovanpå varann, som man kan göra med absolute. Jag tänkte testa på float nu, eftersom folk säger att det funkar bättre i olika webbläsare.

Någon?

\\Dana

Anmäl Ändra Gilla Svara

2007-11-16 11:01

#2

irrelogical
Medlem ●
Göteborg
2007-11-16 11:01

Att centrera blockelement (div t ex) gör man generellt genom att sätta margin-left: auto; och margin-right: auto;, dock funkar inte det i IE6. Där får man istället sätta text-align: center; på det elementet som omsluter det man vill centrera, och sedan text-align: left; på det elementet som centreras. (annars blir allt inuti det också centrerat)

Anmäl Ändra Gilla Svara

2007-11-16 12:24

#3

Dana
Medlem ●
Trollhättan
2007-11-16 12:24

det vore super om nån kunde pilla ihop en enkel och snabb css-kod, eller liknande som hade centrerade element.

Jag får inte till det ordentligt!:)

Anmäl Ändra Gilla Svara

2007-11-16 12:24

#4

ninjamac
Medlem ●
Malmö
2007-11-16 12:24

Du kan inte centrera med float. Precis som irrelogical säger så gör du det med margin. För att skapa en sida som är centrerad med valmöjligheten att centrera inuti sig så gör du så här:

<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
body{text-align:center;}
#container{margin:auto;width:785px;position:relative;}
#leftalign{text-align:left;}
</style>
</head>
<body>
<div id="container">här blir ALLT<br/>centrerat
<div id="leftalign">denna box är centrerad <br/>men innehållet blir vänsterställt</div>
</div>
</body>
</html>

Anmäl Ändra Gilla Svara

2007-11-16 12:29

#5

Dana
Medlem ●
Trollhättan
2007-11-16 12:29

Asgrymt!:D Tack ska du ha!

Anmäl Ändra Gilla Svara

2007-11-16 16:09

#6

Adrian B
Medlem ●
Umeå
2007-11-16 16:09

Dead Centre kan vara en bra länk i sammanhanget.

Men här är den riktiga utmaningen: Centrera ett block med text i höjdled vid sidan av en bild - helt bisarrt svårt, går typ inte att få bra [i alla stora webbläsare]. Jämför det med valign="middle" i en tabellcell och man överväger nästan att bryta mot principerna om att inte använda tabeller för layout...

Anmäl Ändra Gilla Svara

2007-11-17 04:07

#7

ninjamac
Medlem ●
Malmö
2007-11-17 04:07

Dead Centre-tekniken har jag använt mig av på en del hemsidor tidigare, men den har ett tillkortakommande som jag aldrig egentligen trivts med - just det faktum att övre högra hörnet inte stannar vid 0,0. Testa att minska fönstret på Dead Centre-sidan. Och det är inte så trivialt, speciellt inte om du har en ganska bred sida. Jag har några layouter som kräver 1024-skärm för full bredd - jag har helt enkelt disponerat en högerkolumn som inte är kritisk för webbsidans vardande, men som 800-bredd-besökarna kan komma om åt om de tvunget vill, genom att scrolla högerut. Detta går inte att göra med Dead Centre-varianten.

Anmäl Ändra Gilla Svara

2007-11-17 13:36

#8

Adrian B
Medlem ●
Umeå
2007-11-17 13:36

Ursprungligen av ninjamac:

Dead Centre-tekniken har jag använt mig av på en del hemsidor tidigare, men den har ett tillkortakommande som jag aldrig egentligen trivts med - just det faktum att övre högra hörnet inte stannar vid 0,0. Testa att minska fönstret på Dead Centre-sidan. Och det är inte så trivialt, speciellt inte om du har en ganska bred sida.

Gå till inlägget

Ah, det kan stämma. Jag har mest använt det för tillfällen då man vill placera något mitt sidan, som det här t.ex.

Ursprungligen av ninjamac:

Ps - jag har en boxmodell som fixar utmaningen du pratar om:)

Gå till inlägget

Låter intressant. Jag googlade rätt intensivt i ämnet utan att hitta en tillfredställande modell förut.

Anmäl Ändra Gilla Svara

2007-11-17 04:12

#9

ninjamac
Medlem ●
Malmö
2007-11-17 04:12

Ps - jag har en boxmodell som fixar utmaningen du pratar om:)

Jag började på en liten demo. Men faktum är att jag är så otroligt nöjd med min boxmodell så jag påbörjade en hel demosida istället. Jag postar länk när den är klar.

Senast redigerat 2007-11-17 06:02

Anmäl Ändra Gilla Svara

Centrera med float?

Senaste nytt