Centrering af DIV
Hejsa...Håber der er én der kan hjælpe...
Jeg skal lave en footer på en side, som skal være centreret på bundlinjen.
Umidelbart ville jeg mene at CSS'en skulle se således ud:
#footer {
position: absolute;
bottom: 0px;
text-align: center;
}
Og min HTML:
<div id="footer">
<p>TEKST og BILLEDER !!!</p>
</div>
DIV'en sættes rigtig nok i bunden, men den er ikke centreret.
Nogen der kan hjælpe ?
På forhånd tak.
//PhatLasse
Her er helle min CSS og HTML, hvis det kan hjælpe:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Digital Empire.ath.cx</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="author" content="Lasse Andersen" />
<meta name="title" content="DigitalEmpire.ath.cx" />
<meta name="language" content="dan" />
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="topbanner">
<h1 style="color: #dfdfdf; font-size: 28px;">Digitalempire.ath.cx</h1>
</div>
<div id="topmenu">
<ul id="top">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#" title="">Item two</a></li>
<li><a href="#" title="">Item three</a></li>
<li><a href="#" title="">Item four</a></li>
<li><a href="#" title="">Item five</a></li>
</ul>
</div>
<div id="left">
<ul id="venstremenu">
<li><a href="#" title="">Item one</a></li>
<li><a href="#" title="">Item two</a></li>
<li><a href="#" title="">Item three</a></li>
<li><a href="#" title="">Item four</a></li>
<li><a href="#" title="">Item five</a></li>
</ul>
</div>
<div id="footer">
<p>
<a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" style="height="31" width="88" />
</a>
<a href="http://jigsaw.w3.org/css-validator/">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" style="width:88px;height:31px" />
</a>
</p>
</div>
<div id="content">
<h1>Overskrift</h1>
<p>Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test
Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test
Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test
Test test test test test test test Test test test test test test test Test test test test test test test</p>
<h2>Underoverskrift</h2>
<p>Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test
Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test
Test test test test test test test Test test test test test test test Test test test test test test test Test test test test test test test
Test test test test test test test Test test test test test test test Test test test test test test test</p>
</div>
</body>
</html>
body
{
background-color: #dfdfdf;
font-family: arial, helvetica, sans-serif;
font-size: 90%;
color:#333;
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
}
p
{
font-family: arial, helvetica, sans-serif;
color:#333;
margin: 5px 0px 10px 10px;
}
h1 {
font-family: arial, helvetica, sans-serif;
font-size:22px;
color:#600;
margin: 5px 0px 0px 0px;
}
h2 {
font-family: arial, helvetica, sans-serif;
font-size:14px;
color:#600;
margin: 5px 0px 0px 0px;
}
img {
border: 0;
}
/* LINK start */
a:link
{
color: #888;
background-color: transparent;
}
a:visited
{
color: #888;
background-color: transparent;
}
a:hover
{
color: #600;
background-color: transparent;
}
a:active
{
color: #600;
background-color: transparent;
}
/* LINK slut */
/* LAYOUT starter */
#topbanner {
margin: 0px 0px 0px 0px;
border: 0px;
padding-left: 10px;
background: #ffffff;
height: 60px;
}
#left {
position: absolute;
height: 500px;
background: #ffffff;
border: 1px dotted #888;
padding: 5px;
top: 100px;
left: 0px;
margin-left: 10px;
width: 150px;
}
#footer {
position: absolute;
bottom: 0px;
border: 0px;
background: #ffffff;
width:auto;
text-align: center;
}
#content {
margin-left: 170px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
border: 1px dotted #888;
background-color: #ffffff;
padding: 0px 10px 0px 10px;
}
/* LAYOUT slutter */
/* TOPMENU starter */
#topmenu ul
{
padding-left: 0;
margin-left: 0;
background-color: #fff;
color: #333;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#topmenu ul li
{
display: inline;
}
#topmenu ul li a
{
padding: 0.2em 1em;
background-color: #fff;
text-decoration: none;
float: right;
border-right: 1px solid #dfdfdf;
}
#topmenu ul li a:hover
{
background-color: #600;
color: #fff;
}
/* TOPMENU slutter */
/* VENSTREMENU starter */
#venstremenu
{
padding-left: 0;
margin-left: 0;
color: #333;
width: 150px;
}
#venstremenu li
{
list-style: none;
margin: 0;
padding: 0.25em;
color: #333;
}
#venstremenu li a
{
text-decoration: none;
}
/* VENSTREMENU slutter */
