Bottenmarginal — webForum

Mika3lMedlem sedan nov. 20018 492 inlägg

14 feb. 2007 17:10#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>&nbsp;&nbsp;Reveal&nbsp;&nbsp;</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.

cayaMedlem sedan aug. 20051 448 inlägg

14 feb. 2007 17:42#2

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

Mika3lMedlem sedan nov. 20018 492 inlägg

14 feb. 2007 22:27#3

Tack för ditt svar!

Testade lite förut innan jag läste här och gjorde två divar i content-diven. En för innehållet med bakgrundsfärg osv och en transparent under. Fungerar bra tycker jag! :)

<div id="contentbox" style="position: absolute; top: 260px; left: 225px; width: 400px; z-index: 2;">
<div id="content" style="background: #FCFCFC; padding: 7px; width: 400px;">
textig text
</div>
<div id="bottomspace" style="height: 50px;">
</div>
</div>