HTML / CSS Problem

LeonS · 5. Februar 2007

Hallo Leute
habe folgendes Problem , wenn in dem Div "leftNav" mehr Inhalt
ist als in der Div "content", dann wird das Hintergrund bild nur bis zum Ende des
Inhalts des Divs "content" angezeigt, der Inhalt des Divs leftNav geht dann über die Seite
hinaus

//EDIT:
Hab das Problem gelöst in dem ich dem content ne min-height gegeben habe.
Wenn jemand noch ne andere Lösung kennt (die CSS1 konform ist) , immer her damit.

Hier mal der Code:

html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
 <head>
  <title>blabla</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">   
</head>

 <body>
<div id="container">
<div id="header">
<div id="leftBannerBox">
leftBannerbox<br /><br /><br /><br /><br />
Noch kein Benutzerkonto?

<!-- leftBannerBox --></div>
<div id="rightBannerBox">
rightBannerBox

<!-- rightBannerBox --></div>

<!-- header --></div>

<div id="main">

<div id="mainTop">

<div id="leftMainBox">
<h1>Letzte News</h1>
03.02. - Collision und Skaven<br />
01.02. - Januar Newsletter erschienen<br />
31.01. - Noch mehr Previews<br />
30.01. - War-Welten Vorschau und mehr<br />
30.01. - Eurogamer Preview

<!-- leftMainBox --></div>

<div id="rightMainBox">
<h1>Letzte Videos</h1>
03.02. - Collision und Skaven<br />
01.02. - Januar Newsletter erschienen<br />
31.01. - Noch mehr Previews<br />
30.01. - War-Welten Vorschau und mehr<br />
30.01. - Eurogamer Preview

<!-- rightMainBox --></div>

<!-- mainTop --></div>



<div id="column">

<div id="leftNav">
ads<br />
ads<br />
sd<br />
sda<br />

d<br />
ds<br />
ds<br />
ds<br />
<br />
ds<br />
ds<br />
d<br />
sd<br />
<br />
ads<br />
ads<br />
sd<br />
sda<br />

d<br />
ds<br />
ds<br />
ds<br />
<br />
ds<br />
ds<br />
d<br />
sd<br />
<br />
ads<br />
ads<br />
sd<br />
sda<br />

d<br />
ds<br />
ds<br />
ds<br />
<br />
ds<br />
ds<br />
d<br />
sd<br />
<br />

<!-- leftNav --></div>

<div id="content">
daamfoeijfweoawoejfjwaoöjwjfeoiwjfwöjfaoöwejfjwoa dqw dqww dqwq wdqqdw qwd a a a b
a<br />
s<br />
dw<br />
as<br />
dsa<br />
s<br />
ad<br />
sad<br />
sd<br />
ads<br />
ads<br />
sd<br />
sda<br />

d<br />
ds<br />
ds<br />
ds<br />
<br />
ds<br />
ds<br />
d<br />
sd<br />
<br />
ds
<br />
ads<br />
ads<br />
sd<br />
sda<br />

d<br />
ds<br />
ds<br />
ds<br /><br />
ads<br />
ads<br />
sd<br />
sda<br />

d<br />
ds<br />
ds<br />
ds<br />

<!-- content --></div>
<!-- column --></div>


<div id="rightNav">

<!-- rightNav --></div>

   <p class="footer">
	
	</p>
<!-- main --></div>
<!-- container --></div>
 </body>
</html>

CSS:

Code:

*{	
	padding: 0;
	margin: 0;
}
body{
	font: 95% Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	background: #000;
}
a{
color: #cc0066;
text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
a img{
	border: 0 none;
}
h1, h2, h3 {
color: #da9435;
font-family: Arial, Geneva, sans-serif;
background: transparent;
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
p {
line-height: 140%;
}
ul {
list-style-type: square;
}
#container {
color: #fff;
background: #000;
margin-top: 0;
border: 1px solid #DA9435;
width: 990px;
margin:auto;
}
#header{
	display: block;
	width:990px;
	height: 156px;
	background: transparent url(../img/header.gif) top no-repeat;
	/*border-left: 1px solid #DA9435;
	border-right: 1px solid #DA9435;
	border-top: 1px solid #DA9435;*/
}
#leftBannerBox{
	color: #DA9435;
	float: left;
	padding: 10px 10px 0px 10px;
	width: 140px;
	font-size:	xx-small;
}
#rightBannerBox{
	color: #DA9435;
	/*padding: 10px 0px 0px 847px;*/
	padding-top: 10px;
	padding-right: 10px;
	float: right;
	width: 135px;
	font-size:	xx-small;
}
#mainTop{
	width: 990px;
	height: 174px;
	background: transparent url(../img/maintop1.gif) top no-repeat; 
}
#leftMainBox{
	float: left;
	width: 190px;
	padding-top: 39px;
	padding-left: 165px;
	float: left; 
	font-size: xx-small;
}
#rightMainBox{
	float: right;
	width: 190px;
	padding-top: 39px;
	padding-right: 150px;
	float: right;
	font-size: xx-small;
}
#column{
	background: transparent url(../img/content.gif) top repeat; 
	width: 990px;
}
#content{
	/*float:left;*/
	margin-left:150px;
	/*padding-left: 152px;*/
	width:700px;
}
#leftNav{
	float: left;
	padding-left: 10px;
	/*padding-top: 20px;*/
	width:60px;
}

Suche

HTML / CSS Problem

LeonS

Cadet 4th Year

Ähnliche Themen