Centrera layout.

12 svar · 5 635 visningar · startad av Lasse H 5 maj 2006

Lasse HMedlem sedan aug. 20051 506 inlägg

Trådstart5 maj 2006 14:34#1

Hur centrerar jag den här layouten?
Nu ligger sidan till vänster på skärmen.
Jag vill ha den på mitten.
Eller är det inte denna CSS mall som bestämmer det?

#layout {float: left; width: 900px; background: url("bild/top1.jpg");}
#sidhuvud {padding: 0 10px 20px 10px; margin: 0;}
#kolumncontainer{float: left; width: 900px; background: #dba742;}
#kolumn1 {float: left; width: 579px; padding: 10px; border-left: 1px solid #000000; background: #ffffff;}
#kolumn2 {float: left; width: 280px; padding: 10px; border-top: 1px solid #000000;}
#sidfot {clear: both; width: 880px; padding: 10px 10px 0 10px; margin: 0; background: url("bild/bot1.jpg");}

oskarsMedlem sedan nov. 20051 317 inlägg

5 maj 2006 14:43#2

testa

* {margin:0 auto; padding:0 auto;}

TroxyMedlem sedan mars 20041 505 inlägg

5 maj 2006 15:15#3

Visa din HTML-kod.

För att centrera en hemsida så är det lättast att lägga allting i en div, som du sedan sätter margin: 0 auto på.

Lasse HMedlem sedan aug. 20051 506 inlägg

5 maj 2006 15:27#4

oskars skrev:

testa
* {margin:0 auto; padding:0 auto;}

Det funkade bra att göra på det viset.
Sidan blev centrerad som jag ville.
Tyvärr blev det strul med bakgrundsbilden när jag kollade i Firefox.
I Explorer blev det bra.
Får se vad jag kan göra åt saken senare.

Lasse HMedlem sedan aug. 20051 506 inlägg

5 maj 2006 15:28#5

Troxy skrev:

Visa din HTML-kod.

För att centrera en hemsida så är det lättast att lägga allting i en div, som du sedan sätter margin: 0 auto på.

Här finns koden:

http://www.tjuvgods.se/

TroxyMedlem sedan mars 20041 505 inlägg

5 maj 2006 17:53#6

#layout {margin: 0 auto; width: 900px; background: url("bild/top1.jpg");}

bossseMedlem sedan juni 2003771 inlägg

5 maj 2006 19:48#7

Om du också anger höjd så kan du centrera så här oavsett fönsterstorlek eller upplösning!

#layout
{ BACKGROUND: url(bild/top1.jpg);
FLOAT:left; WIDTH: 900px; HEIGHT:500px;
position:absolute; left:50%; top:50%;
margin-left:-450px; margin-top:-250px;}

Lasse HMedlem sedan aug. 20051 506 inlägg

5 maj 2006 20:39#8

Troxy skrev:

#layout {margin: 0 auto; width: 900px; background: url("bild/top1.jpg");}

Visst, det ser bra ut i Explorer men i Firefox blir det något knas med bakgrundsbilden.
Det blir en glipa mellan bilden och menyn.
Får kanske nöja mig med att sidan ligger som den gör till vänster på skärmen :OO

bossseMedlem sedan juni 2003771 inlägg

6 maj 2006 07:16#9

Jag får centrerat i både läsarna med koden nedan.
Se bifogade filer.

#layout
{ BACKGROUND: url(bild/top1.jpg);
FLOAT:left; WIDTH: 900px; HEIGHT:500px;
position:absolute; left:50%; top:50%;
margin-left:-450px; margin-top:-250px;}

bossseMedlem sedan juni 2003771 inlägg

6 maj 2006 07:35#10

Jag får centrerat i både läsarna med koden nedan.
Se bifogade filer.

#layout 
{ BACKGROUND: url(bild/top1.jpg); 
FLOAT:left; WIDTH: 900px; HEIGHT:500px; 
position:absolute; left:50%; top:50%; 
margin-left:-450px; margin-top:-250px;}

Ett annat sätt som borde funka är

#layout {BACKGROUND: url(bild/top1.jpg);  WIDTH: 900px; HEIGHT:100%;}

Lägg sedan center direkt innan div layout

<center><DIV id=layout>

Avsuta centreringen diret innan sista body-taggen

</center></BODY></HTML>

bossseMedlem sedan juni 2003771 inlägg

6 maj 2006 07:36#11

Ett annat sätt som borde funka är

#layout {BACKGROUND: url(bild/top1.jpg);  WIDTH: 900px; HEIGHT:100%;}

Lägg sedan center direkt innan div layout

<center><DIV id=layout>

Avsuta centreringen diret innan sista body-taggen

</center></BODY></HTML>

cayaMedlem sedan aug. 20051 448 inlägg

6 maj 2006 07:48#12

även
body { text-align:center; }
#layout { text-align:left; background: url(bild/top1.jpg);
width: 900px; height:500px; position:absolute; left:50%; top:50%;
margin-left:-450px; margin-top:-250px;
}

dvs, ta bort float och centertaggen, lägg till en centrering i body för att ie ska förstå

Lasse HMedlem sedan aug. 20051 506 inlägg

9 maj 2006 09:06#13

bossse skrev:

Jag får centrerat i både läsarna med koden nedan.
Se bifogade filer.

#layout
{ BACKGROUND: url(bild/top1.jpg);
FLOAT:left; WIDTH: 900px; HEIGHT:500px;
position:absolute; left:50%; top:50%;
margin-left:-450px; margin-top:-250px;}

Jag med, men kör jag 1280*1024 upplösning på skärmen hamnar sidan för långt ner på skärmen. annars ser det dock bra ut både i IE och FF.
Ska testa med de andra förslagen senare ikväll.