Halloj
Jag har en liten tabell som jag vill ska ligga MITT i webbläsarfönstret, både y o x.
Hur gör man detta?
Allt i MITTEN av fönstret
15 svar · 933 visningar · startad av Ceeron
Något åt det här hållet?
<table border="1" width="100%" height="100%">
<tr>
<td width="100%">
<center>
<table border="1" width="300">
<tr>
<td width="100%"> </td>
</tr>
</table>
</center>
</td>
</tr>
</table>
Använd inte <center></center> taggarna... De är föråldrade.
<table border="1" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table border="1" width="300">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
Såvida du inte använder en föråldrad version av HTML, så finns det heller inget "height"-attribut för <table>.
:)
Denna metod med table är en riktig klassiker, men finns det inte något annat sätt så att man slipper en extra table? Har så det räcker tycker jag ;)
Fast det är bra att det funkar lika i alla upplösningar, webläsare, operativsystem etc
xtreme skrev:
..., men finns det inte något annat sätt så att man slipper en extra table? Har så det räcker tycker jag
Är du en bra kodare så gör en extra tabell inte så mycket eftersom du har bra pejl på läget i alla fall. ;)
Dryden, Dryden... §jr
[OBS glimt i ögat]En "bra kodare" vet att man kan göra detta på bredden iallafall med margin:auto i CSS :e :birp :e :birp :e [/OBS glimt i ögat]
http://www.webforum.nu/showthread.php?threadid=58808
Men vad det gäller höjden har åtminstånde inte jag någon garanterad lösning utan tabeller ;)
jarvklo skrev:
Men vad det gäller höjden har åtminstånde inte jag någon garanterad lösning utan tabeller
Och har du ingen garanterad lösning på höjdproblemet så har du ju inte hela lösningen ;) Alltså, kör lite nästlade tabeller, det mår man bara bra av :OO :e
Hur som helst, jag skulle kört med höjden och bredden på tabellen som jag först tipsade om, kanske något moddad likt Darrens förslag.
Det finns en annan lösning med javascript och lager inblandade. Men det är mycket enklare med nästlade tabeller... Att det inte finns någon höjd attribut för tabellen behöver du inte bry dig om på ett tag. De fungerar i alla webbläsare och det är det viktigaste.
Använder du css så kan du använda dig av height attributet där istället. Dock kommer du att stöta på vissa problem med IE 4 om du använder detta.
Här är ett försök som jag gjort tidigare:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ruta i mitten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, html, head
{
margin: 0px;
padding: 0px;
background: black;
width: 100%;
text-align: center;
}
#bossen
{
position: relative;
width: 300px;
margin-top: 10%;
margin-bottom: 10%;
margin-left: auto;
margin-right: auto;
background: black;
overflow: visible;
}
#mitten
{
position: relative;
margin-top: 0px;
border: 1px solid white;
font-size: 10px;
width: 300px;
color: white;
background: red;
font-family: verdana, sans-serif;
overflow: visible;
text-align: left;
padding: 5px;
height: 300px;
}
#mitten p:first-letter
{
font-size: 300%;
float: left;
padding-right: 0.2em;
}
#clear
{
clear: both;
overflow: visible;
}
</style>
</head>
<body>
<div id="bossen">
<div id="mitten">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="clear"> </div>
</div>
</body>
</html>
Det centrera inte allt på "riktigt" men det fungerade för mitt ändamål.
Hittade ett bättre exempel i en annan tråd:
http://www.peterbailey.net/dhtml/centered.htm
mikkeX
med den där metoden så hoppar min lilla tabell när mer till höger
bifogar screen...
vettefan va jag gör fel... ingen hejjar på css grejjer
Hmm... Har du inte bara räknat fel på de negativa marginalerna då?
Värdena du skall kolla upp är:
margin: -111px 0 0 -111px;
padding: 10px;
width: 200px;
height: 200px;
border: 1px solid #999;
Det "första" och "sista" margin-värdet (-111px i exemplet) kommer från summan padding (10px) + borderbredd (1px) + halva höjden/bredden (200/2 = 100px) - dvs du måste räkna om dessa värden till att motsvara höjd och bredd på din centrerade div...
det tackar vi för ;)
note: dock ser det ut som den håller till höger lite för mkt...
div.cntr {
position: absolute;
top: 50%;
left: 50%;
margin: -226px 0 0 -163px;
padding: 2px;
width: 450px;
height: 324px;
border: 0px
text-align: center;
z-index: 2;
}
hehe borde man kommit på själv ;)
Tack :P