26 svar · 1 055 visningar · startad av Dryden
Jag får inte till att centrera min CSS-body horisontalt. Vertical-align känner jag till men resten då?
Vill helst slippa gå igenom varenda dokument, därav CSS:en... ;)
Så här ser min body ut idag:
BODY {background: #F8F8F8; margin:0px; padding:0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
Que? Skall du göra det i bodytaggen?
Är det en sida du vill skall placera sig på mitten både horisontalt och vertikalt? I sådana fall gör du väl detta i en div-tagg?!
Jag vill centrera den horisontalt, inte vertikalt.
Det kanske inte ens går i bodyn... :OO :l
En sista utväg är att slänga in en horisontal centrering här,
.main_table { vertical-align: top; }
men hur anger jag det? Har letat lite bland CSS-referenser men får inte till det.
Lek lite med den här: :)
[red]<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
color: #000;
background: #F8F8F8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
margin: -111px 0 0 -111px;
padding: 10px;
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #ccc;
text-align: left;
z-index: 2;
}
</style>
...
<div id="content">
Wee!
</div>[/red]
Jag fick inte till din variant, Palle.
Det jag vill är alltså att centrera en sajt både i höjdled och sidled. Men hur? :)
Fler bud? :)
Kolla http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Red: Sorry, såg inte att du ville centrera i höjdledd... :OO
BODY {
background: #F8F8F8;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
[b]text-align: center;[/b]
}
R// Fast om jag inte minns helt galet så måste det som ska ligga centrerat horisontalt ha position: relative så ifall det är main_table så använd följande också.
.main_table {
[b]position: relative[/b];
vertical-align: top;
}
Ännu ett förslag... kolla http://www.webforum.nu/showthread.php?s=&forumid=12&threadid=77437 i vilken jag själv ställde samma fråga. :)
Du skulle kunna fixa det med ett javascript som kollar höjden på webbläsarfönstret och sedan placerar elementet efter det. Jag har ett hemma någonstans, skulle kunna leta upp det senare idag.
Wee. Gick (delvis) på mitt förslag. ;)
Jag skulle ha löst det genom att baka in hela rasket i en tabell...
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0"><tr valign="middle"><td></td><td width="780" align="center">
[blue]<!-- sidan -->[/blue]
<td></td></td></tr></table>
</body>
Dryden skrev:
Vill helst slippa gå igenom varenda dokument, därav CSS:en...
Engine^ skrev:
Jag skulle ha löst det genom att baka in hela rasket i en tabell...
:OO ;)
Nästan. Till att börja med måste han ändra i alla filer men efter han gjort det och vill ändra igen så behöver han bara ändra på ett ställe. :)
Nexus86: exakt så. :) Inte för att lösningen som Engine^ gav inte skulle fungera, den kändes dock inte lika smidig.
Dock kvarstår två problem:
- sidan centreras inte i Firebird.
- den ram jag lagt runt huvudtabellen syns bara i IE.
Jag använder mig av följande kod i CSS:en:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F8F8F8;
font-family: Verdana, Arial, Helvetica, serif;
font-size: 10px;
text-align: center;
}
#content {
width: 0%;
height: 0%;
margin-top: 10px;
border: 2px solid #D1AB46;
background-color: #F2E7C8;
z-index: 2;
}
Och sedan kör jag <div id=content> i dokumenten.
Japp, jag vet. Jag kan nog stryka en del av den här koden. ;)
Men, varför centreras det inte i Firebird och varför syns heller inte ramen i samma bläddrare?
I Mozilla är den inte centrerad på nån ledd!?
Jag löste det med att sätta height: 100% i både body och html. Sedan skapade jag en tabell och satte height: 100% i table och td. Lägg in siten där så centreras den i höjdled, sidled fixar man med en div.
Dryden skrev:
Jag fick inte till din variant, Palle.
Det jag vill är alltså att centrera en sajt både i höjdled och sidled. Men hur? :)Fler bud? :)
Jag är med på vad du menar och den koden jag visade här tidigare gör det, dock måste matte-snillet vara framme och göra en uträkning gällande de negativa talen i css-mallen.
Dessa ska baseras på tabellens bredd och höjd.
Skall nu mera bara centreras i sidled.
Den skall bara vara centrerad i sidled och jag vill sköta allt via CSS:en.
- den ram jag lagt runt huvudtabellen syns bara i IE.
hmm.. Den syns faktiskt längst upp till vänster om du tittar ordentligt, men Firebird lyssnar på dina inställningar ;)
#content {
width: 0%;
height: 0%;
Förmodligen har du problemet med centreringen som en följd av detta eftersom det som visas hanteras som en "overflow" utöver din minimala #content i Firebird ;)