det är alltid lite klurigare med absolut positionerade divar.
prova att göra om dem till flytande, och sätt en bottenpadding på body. om du fortfarande stöter på samma problem så hojta till igen
Frågan#1
Hej!
Vill ha en marginal längst ner på min sida med lite luft men jag lyckas inte få till det. Har försökt både direkt i CSS-filen och med divar men ingenting har velat fungera.
Så här ser koden ut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Reveal </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
<div id="loggo" style="position: absolute; top: 25px; left: 25px; width: 350px; height: 153px;">
<a href="index.asp"><img src="images/loggo.gif" alt=" REVEAL " style="width: 350px; height: 158px; border: 0px;" /></a>
</div>
<div id="rightbox" style="position: absolute; top: 50px; left: 450px; width: 150px; text-align: right;">
<a href="#" style="font-size: 12px;" class="menu">INFO@REVEAL.SE</a>
</div>
<div id="menu" style="position: absolute; top: 260px; left: 25px; width: 200px;">
<a href="index.asp" class="menu">News</a><br /><br style="line-height: 4px;" />
<a href="theband.asp" class="menu">The band</a><br /><br style="line-height: 4px;" />
<a href="shows.asp" class="menu">Shows</a><br /><br style="line-height: 4px;" />
<a href="media.asp" class="menu">Media</a><br /><br style="line-height: 4px;" />
<a href="gbook.asp" class="menu">Guestbook</a><br /><br style="line-height: 4px;" />
</div>
<div id="header" style="position: absolute; top: 190px; left: 225px;">
<img src="images/header_news.gif" alt="NEWS" style="width: 120px; height: 70px; border: 0px;" />
</div>
<div id="ornament1" style="position: absolute; top: 211px; left: 405px; z-index: 1;">
<img src="images/content_ornament.gif" style="width: 300px; height: 100px; border: 0px;" />
</div>
<div id="content" style="position: absolute; top: 260px; left: 225px; width: 400px; background: #FCFCFC; padding: 7px; z-index: 2;">
lite innehåll...
</div>
</body>
</html>
body {
background: url('images/bg.jpg');
font-family: Arial, Helvetica, Verdana, Tahoma;
font-size: 11px;
color: #111111;
font-weight: normal;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 100%;
}
a {
font-family: Arial, Helvetica, Verdana, Tahoma;
font-size: 11px;
color: #590000;
font-weight: normal;
text-decoration: none;
}
a:hover {
color: #BDBDBD;
}
a.menu {
font-family: Times, Tahoma, Arial, Helvetica, Verdana;
font-size: 11px;
color: #FCFCFC;
text-decoration: none;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 4px;
}
a:hover.menu {
background: #FCFCFC;
color: #760000;
}
.subtitle {
font-size: 13px;
font-weight: bold;
color: #640000;
}
"content" ändrar storlek i höjdled beroende på innehållet. Annars är det inget som ändras för olika sidor.