Hallo habe problem mit einem Div den ich mit CSS formatiert habe.
habe im oberen bereich der seite 2 divsdie oben ausgerichtet und im unteren bereich 2 die untern ausgerichtet sind. in der mitte habe ich einen div der sich der fenstergröße anpassen soll wenn das fesnster größer ist. dieser container soll an einer bestimmten position oben startne und bist zum 1 untern div gehen und bei bedar scrollen. zudem sollte er beim verkleinen des fensters nicht mit andere überlappen.
Kann mir jemand Helfen?
HTML:
und hier der CSS code:
habe im oberen bereich der seite 2 divsdie oben ausgerichtet und im unteren bereich 2 die untern ausgerichtet sind. in der mitte habe ich einen div der sich der fenstergröße anpassen soll wenn das fesnster größer ist. dieser container soll an einer bestimmten position oben startne und bist zum 1 untern div gehen und bei bedar scrollen. zudem sollte er beim verkleinen des fensters nicht mit andere überlappen.
Kann mir jemand Helfen?
HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>title</title>
<link href="main_style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body scroll="no">
<div id="body">
<div id="headline"><img src="pics/headlines/kuehlschraenke2.gif" width="300" height="55"></div>
<div id="content2"> <br>
<br>
<br>
<br>
</div>
<div id="head">
<div align="center"></div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="880"><img src="pics/header.jpg" width="874" height="56"></td>
<td width="92"><img src="pics/logo.gif" width="92" height="52"></td>
<td> </td>
</tr>
</table>
</div>
<div id="headnav">
<table width="100%" border="0" align="right">
<tr>
<td width="100%"><img src="pics/blank.gif" width="100%" height="5"></td>
<td><a href="#" class="A">NEWS</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td class="A"><a href="#" class="A">PRODUKTE</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td><a href="#" class="A">UNTERNEHMEN</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td><a href="#" class="A">LOGIN</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td class="A"><a href="#" class="A">PRESSE</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td class="A"><a href="#" class="A">AGB</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td><a href="#" class="A">KONTAKT</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td><a href="#" class="A">HOME</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
<td><a href="#" class="A">LINKS</a></td>
<td width="10"><img src="pics/blank.gif" width="10" height="5"></td>
</tr>
</table>
</div>
<div id="bottomNav2">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="pics/nav2/btn1.jpg" width="115" height="80"></td>
<td width="5"> </td>
<td><img src="pics/nav2/btn2.jpg" width="115" height="80"></td>
<td width="5"> </td>
<td><img src="pics/nav2/btn3.jpg" width="115" height="80"></td>
<td width="5"> </td>
<td><img src="pics/nav2/btn4.jpg" width="115" height="80"></td>
<td width="5"> </td>
<td><img src="pics/nav2/btn5.jpg" width="115" height="80"></td>
<td width="5"> </td>
<td><img src="pics/nav2/btn6.jpg" width="115" height="80"></td>
</tr>
</table>
</div>
<div id="navright">
<table width="100%" height="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><img src="pics/sbs_btn.jpg" width="117" height="117"></td>
<td><img src="pics/wbs_btn.jpg" width="117" height="117"></td>
</tr>
<tr>
<td><img src="pics/bm_bnt.jpg" width="117" height="117"></td>
<td><img src="pics/tm_bnt.jpg" width="117" height="117"></td>
</tr>
</table>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
und hier der CSS code:
HTML:
body{
height:100%;
width:100%;
color: #000000;
background: #C6DAEF;
scrollbar-3dlight-color: #E2ECF7;
scrollbar-arrow-color: #253D91;
scrollbar-darkshadow-color: #E2ECF7;
scrollbar-face-color: #C6DAEF;
scrollbar-highlight-color: #E2ECF7;
scrollbar-track-color: #C6DAEF;
margin-left: 0px;
margin-top:0px;
margin-right: 0px;
margin-bottom: 0px;
}
/*IE-Filter*/
* html body, * html html{ height: 100%;}
margin: 0;
padding: 0;}
/*Tabellen*/
.tablenews{
border-collapse:separate;
}
.TD{
background-color:#E2ECF7;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
/*DIVS*/
#body{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
visibility: visible;
}
#headline{
position:absolute;
left:15px;
top:90px;
width:450px;
height:55px;
z-index:100;
}
#head{
position:absolute;
left:0px;
top:0px;
width:100%;
height:60px;
z-index:2;
visibility: visible;
}
#headnav{
position:absolute;
background-color:#004D91;
left:0px;
top:60px;
width:100%;
height:25px;
z-index:3;
visibility: visible;
}
#bottom{
position:absolute;
background-color:#004D91;
left:0px;
bottom:0px;
width:100%;
height:25px;
z-index:4;
visibility: visible;
}
#News{
position:absolute;
left:50%;
top:85px;
width:900px;
margin-left:-450px;
z-index:5;
visibility: visible;
overflow: auto;
height: 300;
}
#content{
position:absolute;
left:270px;
top:150px;
width:460px;
z-index:5;
margin:0;
padding:0;
overflow: auto;
height: 345px;
background-color: #E2ECF7;
}
#content2{
position:absolute;
left:15px;
top:150px;
width:714px;
z-index:5;
visibility: visible;
overflow: auto;
height: 65%;
}
#bottomNav{
position:absolute;
left:50%;
width:900px;
margin-left:-450px;
height:200px;
z-index:6;
visibility: visible;
bottom: 25px;
}
#bottomNav2{
position:absolute;
left:15px;
width:715px;
height:80px;
z-index:6;
visibility: visible;
bottom: 25px;
}
#back{
position:absolute;
left:50%;
width:900px;
margin-left:-450px;
height:85%;
z-index:0;
visibility: visible;
bottom: 25px;
background-color: #E2ECF7;
}
#navright{
position:absolute;
left:740px;
top:145px;
width:240px;
height:240px;
z-index:7;
}
#img{
position:absolute;
left:15px;
top:150px;
width:235px;
height:345px;
z-index:8;
}