Probleme mit Div

Status
Nicht offen für weitere Antworten.

loco666

Mitglied
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:

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>&nbsp;</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>&nbsp;</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">&nbsp;</td>
      <td><img src="pics/nav2/btn2.jpg" width="115" height="80"></td>
      <td width="5">&nbsp;</td>
      <td><img src="pics/nav2/btn3.jpg" width="115" height="80"></td>
      <td width="5">&nbsp;</td>
      <td><img src="pics/nav2/btn4.jpg" width="115" height="80"></td>
      <td width="5">&nbsp;</td>
      <td><img src="pics/nav2/btn5.jpg" width="115" height="80"></td>
      <td width="5">&nbsp;</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;
}
 
Du solltest dich mal lieber entscheiden ob du ein Div oder Tabellen Layout machst, beides in einem finde ich ehrlich gesagt nur verwirrend und absolut sinnlos. Ganz oder Garnicht (zumindest bei diesem Layout würde ich das sagen).

Außerdem: Netiquette
 
Zuletzt bearbeitet:
Danke! Immer mal im Hinterkopf behalten, dass es auch Leute sind die noch nicht so weit sind was das ganze Thema anbelangt. ich habe eine einfach Frage gestellt und das sollte nicht die antwort sein. ic weiß das das nicht das tollste ist aber deswegen musste nicht gleich sprüche drücken



Loco
 
Status
Nicht offen für weitere Antworten.
Zurück