"Kasper Kyndsberg" <nospam@kyndsberg.dk> wrote in news:3d24b38a$0$12672
$edfadb0f@dspool01.news.tele.dk:
>
http://kaboom.dk/rodekassen/css/vcenter/
Jeg har lige fedtet Kaspers negative marginer ind i et eksempel jeg har
leget lidt med på det sidste. Det er en boks der er centreret horisontalt
og vertikalt, og så er scrollbaren "flyttet over på den anden side" af
menuen...
.... men det bedste er nu alligevel at det er valid HTML :) (som dog ser
bedst ud i Mozilla).
HTML og CSS ses herunder:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-
8859-1" />
<title>Centreret horisontalt og vertikalt</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table width="100%"><tr><td style="text-align: center;">
<div id="main">
<div id="top">
<h1>Centreret horisontalt og vertikalt</h1>
</div>
<div id="menu">
<a href="#">Et link</a><a href="#">Et andet link</a>
</div>
<div id="nested">
<div id="content">
<a name="top"></a>
<div class="paragraph">
Her kan man skrive en masse indhold - prøv
selv...
</div>
</div>
</div>
<div id="bottom">
Så er bunden vist nået
</div>
</div>
</td></tr></table>
</body>
</html>
BODY {
text-align: center; background-color: #808080;
}
DIV {
font-family: Verdana; text-align: left;
}
H1 {
margin: 0em; font-size: 1.5em;
}
A {
color: #334549;
text-decoration: none;
font-weight: bold;
}
A:hover {
text-decoration: underline;
}
#menu A {
display: block;
width: 100%;
padding-bottom: 10px;
}
#main {
position: absolute;
top: 50%; left: 50%;
width: 70%; min-width: 700px; height: 35em;
margin-top: -17em; margin-left: -35%;;
background-color: #FFFFFF;
border: 1px solid #000000;
font-size: smaller;
}
#top {
top: 0%; width: 99%;
height: 2em; padding: 0.5em 0.5%;
background-color: #345678; color: #FFFFFF;
}
#menu {
position: absolute;
top: 4.5em; left: 65%; width: 28%;
overflow: hidden;
z-index: 2;
qborder: 1px solid blue;
}
#nested {
padding: 1em 0em 2em 1em;
height: 27em;
overflow: auto;
z-index: 1;
qborder: 1px solid red;
}
#bottom {
position: absolute;
bottom: 0%;
width: 99%; height: 1em;
padding: 0.5em 0.5%; margin: 0em;
background-color: #334549; color: #FFFFFF;
}
#content {
width: 57%;
}