Centrering av webbsida (CSS)

sökt i forumet?!?!?!?

;)

det finns en tråd lite längre ner där det snackas om att använda nyare metoder för att centrera med css, kolla in tråden.. låter som om det bör kunna lösa dina problem.. :)

Hehe lustigt! Trodde för mitt liv inte att det skulle finnas en tråd på samma ämne.

Dock. Problemet är att jag gjort som lösningen beskrivs i den tråden, med det här exemplet:

#layoutlayer {
position: absolute;
left: 50%;
top: 50%;
width: 924px;
height: 695px;
margin-left: -462px;
margin-top: -347px;
border: none;
}

Min kod var alltså helt analog vad jag kan se (fast endast med horisontell centrering):

#main {
position:absolute;
left:50%;
margin-left:-575px;
width: 1007px;
margin-top: 50px;
}

Kan det vara bannern till höger som fuckar det?

våga vägra css ;D
testat med center?

Testat med: margin: 0px auto;

margin: 0px auto; funkar i IE efter version 5, men jag är orolig att många fortfarande kör gamla versioner... dessutom är jag lite osäker på hur jag gör med bannern till höger isåfall? som jag gör nu kompenserar jag bara lite med marginalen.

center tror jag inte funkar i css...

Nej, men det gick väl att blanda html och css sist jag kollade...

Du måste mena lägre än version fem?
Och det är nog aldrig någon som har haft det som har surfat in på min sida det här året, och jag har iaf runt 20-30 besökare varje dag, då de flesta kör XP eller högre, och där följer IE6 med på köpet. För annars funkar det utmärkt, aldrig varit nått fel på det.

Och för att komma förbi det med bannern lägger du bara en liten container runt allt ihop och sätter 0px auto på den.

Det kanske inte är så farligt, som du säger. Jag undrar bara hur det ser ut i IE5, blir det vänsterjusterat eller vad?

Tipset om bannern var utmärkt!

Kan tyvärr inte säga att jag har tillgång till att testa det med IE5 testar BARA mina sidor med Firefox 2.0, Internet Explorer 6.0, och safari. Och hittils har aldrig någon klagat, då jag har en hel del år på nacken som kodknackare.

Och för att titta lite på statistik för att göra dig säker på att du inte behöver bry dig om de som sitter på IE 5 (om dom finns) så får du se min stats från 4 månader tillbaka (2006-08-11):

Internet Explorer 4 0% Internet Explorer 5 0% Internet Explorer 6 32% Mozilla 61% Netscape 4 0% Netscape 6 & 7 0% Linux Konqueror 0% Opera 1% Gecko 0% Safari 3% Opera mini (*) 0% Playstation 0% Internet Explorer 7.0 2% Internet Explorer 4 mini (*) 0% Övriga 0%

(Sidan har i just detta nu haft 2357 besökare.)

Förlåt för den dåliga listan :P

Internet Explorer 4: 0%
Internet Explorer 5: 0%
Internet Explorer 6: 32%
Internet Explorer 7: 2%
Mozilla: 61%
Netscape 4: 0%
Netscape 6 & 7: 0%
Linux Konqueror: 0%
Opera: 1%
Gecko: 0%
Safari: 3%
Opera mini (*): 0%
Playstation: 0%
Internet Explorer 4 mini (*): 0%
Övriga: 0%

* Opera mini och Internet Explorer 4 mini används på mobiltelefoner och handdatorer.

margin-left:auto
margin-right:auto

Skulle jag ha haft i min...

assembly Det betyder precis samma som det jag skrev ;)

tack för svaren =)

har dock inte fått det helt att funka ännu. har den här koden:

#container {
margin: 0px auto;
}

#main {
width: 1007px;
float: left;
}

#jamba {
float:left;
width:120px;
height:600;
}

där ligger main och jamba som divvar inuti container. ändå vänster/upp-justeras hela innehållet, dvs inga marginaler alls.

vad kan vara fel? testsidan kan ses på:

http://www.virtualfeed.com/index.php

och cssen:

http://www.virtualfeed.com/mall.css

ledsen för rörig kod.

felet e att du beblandar dig med jamba min käre vän!

Jo det felet är jag fullt medveten om =) men jag är inte bättre än att jag gladeligen säljer min själ om jag får ett ok pris.

:'(

själasäljare kommer inte till hemsidehimlen, så du får drass med den som straff!

Kan du posta hela din css-fil?

Visst kan jag det:

#main {
position:absolute;
left:50%;
margin-left:-575px;
width: 1007px;
margin-top: 50px;
}

body {background-color:#F6F6F6;
 color:#000000;
font-family:verdana;
 }

p { font-size:12px;
 color: #555;
line-height: 150%;
margin-left:30px;
margin-right:30px;}
 
 .title {color:#90B8C6; font-size:14px;
 margin-top:15px; margin-left:30px;}
 .titleNav {color:#90B8C6; font-size:14px;
 margin-top:0px; margin-left:0px;line-height: 100%;}
 .text1 {font-size:small}
 
a {color:#444;font-weight:bold;
 text-decoration:none}
a:hover {text-decoration:underline;}

#jamba {
position:absolute;
left:50%;
top: 42;
margin-left:378px;
width:120px;
height:600;
}

#kommentar {
position:absolute;
left:50%;
top: 455;
margin-left:-416px;
width:190px;
height:80;
}

oh shit vad klantigt... fel version =(

denna är rätt:

body {background-color:#F6F6F6;
color:#000000;
font-family:verdana;
}

p { font-size:12px;
color: #555;
line-height: 135%;
margin-left:30px;
margin-right:30px;}

.title {color:#90B8C6; font-size:14px;
margin-top:15px; margin-left:30px;}
.titleNav {color:#90B8C6; font-size:14px;
margin-top:0px; margin-left:0px;line-height: 100%;}
.text1 {font-size:small}

a {color:#444;font-weight:bold;
text-decoration:none}
a:hover {text-decoration:underline;}

b.red {color:#CA95C6}
i.red {color:#CA95C6}

#container {
margin: 0px auto;
}

#main {
width: 1007px;
float: left;
}

#jamba {
float:left;
width:120px;
height:600;
}

#kommentar {
position:absolute;
left:50%;
top: 495;
margin-left:-486px;
width:190px;
height:80;
}

#searchbox {
position:absolute;
left:50%;
top: 485;
margin-left:-481px;
width:190px;
height:80;
}

Skit i CSSen..

Gör detta istället på mainsidan:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr><td align="center" valign="middle">

 HÄR SKA HELA SIDAN LIGGA. CSS ÄR SKIT!!! ;)

  </td></tr>
</table>
</body>
</html>

Detta kommer GARANTERAT att hålla sidan i mitten och göra det på rätt sätt! Allt annat är egentligen onödigt krångel.

Tack för mig :D

Hur blir det om du sätter det här i body:
body {background-color:#F6F6F6;
color:#000000;
font-family:verdana;
margin-left:auto;
margin-right:auto;
}

?

hur går det Refused?

hela tricket med margin: auto är att köra text-align: center på body. för att motverka att all text etc. centerars sätter du text-align: left på din #container-div.

Max:

Hehe tack =) men jag skulle hemskt gärna få detta att funka med CSS om jag kan.

nilsL:

Ingen skillnad dessvärre...

ToRKeL:

Fungerade ej. Jag tror dessutom det där är nåt slags IE-workaround? Det ska inte behövas att man blandar in text-align.

va inte så jävla tjurig refused..
jävligt jobbigt med html centrering ;P

svälj css-stoltheten..
alternativet e väl ett script som räknar ut fönstret storlek och därigenom ger värden på de margins som är aktuella..

det torde väl rimligtvis fungera?

varför göra det jobbigare än vad det är? =P

Av samma anledning till att jag inte använder frames: det känns lika bra att lära sig göra det rätt från början. Jag har ju inte sidan för att tjäna pengar främst (då skulle jag blivit besviken hehe) utan för att lära mig.

aha okej.. kan lära dig en sak då :) alla sätt är rätt, förutom dom som är uppenbart fel.. i både programmering och scriptning som html och css är.

funkare inte att köra position: center eller nått då?
fast det har väl nån redan skrivit?

så vitt jag kan se så är det ju iaf den absoluta positionen i samband med din margin width som gör att det fuckar upp sig..

efter 2min i firebug gav
#main{
    width: 1007px;
    margin: 50px auto;
}

rätt resultat i FF2 iaf, förutom #kommentar-diven som var positionerad absolute utav någon anledning.

jag tycker den ser bra ut som den är =) man tänker inte på att den inte är centrerad eftersom Jamba reklamen tar den biten så allting blir centrerat inkl. jamba.

Refused: På tal om tjäna pengar. Hur går det till rent skattemässigt när man håller tillhandahåller betal-sms-tjänster? Är det något man själv måste ta upp som en övrig inkomst i deklarationen?

Fattar tyvärr inte vad som är fel, ser bra ut för mig, förutom när jag kör adblocker (som jag vanligtvis gör, så centreras den inte).

skez & VeCn:

notera att det är testsidan som jag provar margin auto på nu men inte blir centrerad:

http://www.virtualfeed.com/index.php

med css: http://www.virtualfeed.com/mall.css

den gamla pussa.se har alltså gammal kod.

Torkel:

Ok ska prova!

CapKillah:

Om du inte har företag så drar de arbetsgivaravgifter osv också, så du får ut ca en tredjedel.

ref, bara textrutan som flyttas =D

joda:

På vad menar du? pussa.se använder alltså en "gammal" metod att centrera, som inte funkar om upplösningen/fönstet är för litet. den senare länken till testsidan (virtualfeed) försöker centrera med margin auto men misslyckas...

refused, när ja ändrade storlek på fönstret så vare nån textruta som flyttades.. resten låg statiskt =)

Hjälp pussa.se bli bäst! den alltså

testade du att inte köra position: absolute som jag sa?

typ

position: center
width: 1000whatever..
margin-left: auto

?

borde väl gå att lägga in allt i en maxad container och sedan centrera innehållet i den också?

men det har du kanske testat?

Refused: Fyfan vad dåligt. Tack för infon iallafall.

Ibland skriver man som en kratta: "..när man håller tillhandahåller.." :)

joda: position kan vara static (standard), fixed, relative eller absolute. det enda(?) som kan ha värdet center är text-align.

jaha.. va trist..
ta relative då.. då borde den väl anpassa sig efter fönstret och inte fuckas upp som den gör nu?

eller har jag missförstått problemet?