Hejsan, nu sitter jag här med ett problem.
Jag vill skapa en sida, användandes xhtml och css, och det har visat sig vara en svårare nöt att knäcka, än jag först trodde.
Jag har kodat ihop den, med xhtml och css, men naturligtvis så såg den inte alls lika bra ut i andra upplösningar, och är ytterst samarbetsovillig ;)
Så jag kodade lite snabbt ihop hur jag skulle önska att sidan såg ut i klart skick, fast med tabeller. Så jag kommer bifoga både tabell (ful) kod, för att visa hur jag vill ha det, och sedan xhtml/css koden jag sitter med, som inte är riktigt lika fungerande.
Design:
<html style="width: 100%; height: 100%; padding: 0px; margin: 0px;">
<head>
<title>table2div</title>
</head>
<body style="width: 100%; height: 100%; padding: 0px; margin: 0px;">
<table border="1" style="width: 100%; height: 100%;">
<tr>
<td rowspan="5" style="width: 70%; height: 90%;" valign="top">
<p style="text-align: center">Innehåll</p>
</td>
<td style="height: 6%;">
</td>
</tr>
<tr>
<td style="width: 30%; height: 36%;" valign="top">
<p style="text-align: center">Länkar</p>
</td>
</tr>
<tr>
<td style="height: 6%;">
</td>
</tr>
<tr>
<td style="width: 30%; height: 36%;" valign="top">
<p style="text-align: center">Lite andra länkar</p>
</td>
</tr>
<tr>
<td style="height: 6%;">
</td>
</tr>
<tr>
<td colspan="2">
<p style="text-align: center">Sidfot</p>
</td>
</tr>
</table>
</body>
</html>
(x)html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>xhtml</title>
<link rel="stylesheet" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="content">
innehåll
</div>
<div id="navbar">
länkar
</div>
<div id="inavbar">
lite fler länkar
</div>
<div id="foot">
Sidfot
</div>
</body>
</html>
css
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #000000;
background-color: #ffffff;
}
#content {
position: absolute;
bottom: 5%;
left: 20px;
height: 92%;
width: 71%;
border: 2px #000000 solid;
padding-left: 10px;
padding-right: 10px;
overflow: auto;
}
#foot {
position: absolute;
bottom: 2%;
left: 0px;
width: 100%;
text-align: center;
}
#navbar {
position: absolute;
bottom: 57%;
right: 20px;
height: 40%;
width: 20%;
padding-left: 10px;
padding-right: 10px;
}
#inavbar {
position: absolute;
bottom: 5%;
right: 20px;
height: 40%;
width: 20%;
border: 2px #000000 solid;
padding-left: 10px;
padding-right: 10px;
}
Det skulle vara ypperligt, om det gick att få sidfoten att alltid ligga utmed webbläsarens kant, så om det nu finns mer text i innehållsutrymmet, än vad som finns plats i fönstret, så expanderar innehålls delen nedåt, och pressar ned sidfoten också.
Och när jag nu tänker på det, så kanske det skulle vara bra om länkytorna på något sätt var fixerade, och alltid var i bild, hur mycket man än scrollar nedåt. Går det ens att göra?
Med iframe hade det ju varit plättlätt, men ville lära mig något nytt den här gången. Tog mig kanske lite för mycket vatten över huvudet ;)
MVH Patrik