HTML & CSSur HTML, XHTML & CSS
8 svar · 652 visningar · startad av EmmaW
Hejhej :)
Jag har suttit hela dagen med html/css och försökt klura ut hur jag ska lyckas centera ett "table" vertikalt utan framgång. Finns det någon som vet hur man göra det :q Skulle verkligen behöva se ett exempel på en kod för ett vertikalt centerat table... :x
Du får ha en extra tabell utanpå din ordinarie tabell, exempel:
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table border="1" width="500" cellspacing="0" cellpadding="0">
<tr>
<td>Innehåller i tabellen centrerat vertikalt</td>
</tr>
</table>
</td>
</tr>
</table>
Tack för svar! :)
Jag testade lägga in din kod i dreamweaver i body, spara och sedan titta på den i en webläsare. Men den visar tyvärr bara en horisontellt centrerat table.. vad gör jag för fel? :/
I morse hittade jag en guide på webdesignskolan.se genom att söka på "verticalalign" men tyvärr lyckas jag inte genomföra det som står där, jag är inte tillräckligt bra på koder ännu..
Koden fungerar fint när jag testar. Vad du gör för fel kan jag inte svara på om du inte bifogar din kod. ;)
K@llen skrev:
Koden fungerar fint när jag testar. Vad du gör för fel kan jag inte svara på om du inte bifogar din kod. ;)
Oj, det skulle jag tänkt på, förlåt :r
Här kommer koden:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head><body>
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table border="1" width="500" cellspacing="0" cellpadding="0">
<tr>
<td>Innehåller i tabellen centrerat vertikalt</td>
</tr>
</table>
</td>
</tr>
</table></body>
</html>
Jag skulle också kunna ladda upp sidan och ge dig en länk om du vill? :)
Hmm...
Problemet du upplever kommer sig av att sidans höjd inte är den höjd som man kanske först tror ;)
Orsaken är rent tekniskt i princip (och något förenklat) att du kör med den <!DOCTYPE du gör, och att sidans totalhöjd tack vare det skall tolkas som "lika hög som innehållet du petar in" och inte "lika hög som webbläsarfönstret".
I ditt fall blir tabellen då så att säga 100% av sin egen höjd (typ) - och det oavsett vilken procentsats du lägger in som höjd...
Den kanske vanligaste åtgärden för detta är att s.a.s. "sträcka ut" höjden på html och body-elementen till att bli 100% av webbläsarfönstret med hjälp av lite CSS t.ex. såhär:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
[b][red]<style type="text/css">
html,body {margin:0;padding:0;height: 100%}
</style>[/red][/b]
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table border="1" width="500" cellspacing="0" cellpadding="0">
<tr>
<td>Innehåller i tabellen centrerat vertikalt</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Alternativ 2 (som jag ser det ett sämre alternativ pga att det utlöser större skillnader mellan olika webbläsares sätt att tolka din kod) är att helt enkelt ta bort den <!DOCTYPE su använder (vilket jag misstänker att K@llen gjorde när han testade ut sitt exempel till att börja med ;) )
Sedan vill jag också påpeka att du bör se över din kod ett varv till så att den validerar (height är t.ex. inte ett "godkänt" attribut till <table> även om det trots det fungerar) - och t.ex. bör du ändra den "yttersta" <table>-starttaggen till
<table border="1" cellspacing="0" cellpadding="0" width="100%" style="height:100%">
- men det är egentligen en annan (men som jag ser det ack så viktig) historia :birp
Håller med Jarvklo i sitt resomemang. Med tanke på sättet att bygga layout använde jag annan doctype (HTML 4.01 Transitional). Glömde dock förmedla den lilla detaljen som du presenterar med att styla body/html-elementet. Tack för förtydligandet. :)
Nu när Jarvklo redan börjat gå in på hur man bör göra kan vi ta det hela vägen. Att bygga en layout med tabeller är inte den bästa grunden. Hade jag gjort sidan hade jag byggt upp den som en div-layout i stället för med tabeller.
Mitt förslag! Denna ligger alltid centrerad oavsett upplösning eller fönsterstorlek.
Tabellstorleken är i mitt exempel 98% för tydligheten.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin:0; padding:0;text-align:center}
table#center { border:1px solid black;height:98%; width:98%;position:absolute;left:1%;top:1%;}
td {background:gray;border:1px solid black}
</style>
</head>
<body>
<table id="center" cellpadding=2 cellspacing=2>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table
</body>
</html>
Den från jarvklo funkade precis som jag ville, fin fint!
Den från bossse var bra för den ändrade storlek på cellerna också, fast det var inte riktigt det jag sökte nu så jag kör på den första.
Tack så mycket allihop :)