✔ Mal wieder height: 100% Problem

Status
Nicht offen für weitere Antworten.
M

mimii

Grünschnabel
Hallo ins Forum,
habe hier mal ausführlich gestöbert und zunächst mein Problem mit diesem Beitrag lösen können: http://www.tutorials.de/forum/css/2...ie.html?highlight=100%25+h%F6he+background+ie

Nun habe ich allerdings versucht das div#content mit 3 weiteren Divs zu unterteilen, die jeweils absolut positioniert sind. Die Überschrift soll natürlich komplett oben drüber sein, Text und Bild sollen nebeneinander liegen. Die Positionierung klappt auch soweit, aber der Hintergrund wir nun wieder abgeschnitten und zwar unabhängig von der Höhe des Textes.

Hier mal der Code

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title></title>
  
  <style type="text/css">
  body, html
  	{
  	height: 100%;
  	margin: 0px;
  	padding: 0px;
  	}
  div#nav
  	{
  	background-image: url(bg.gif); background-repeat: repeat-y;
  	position: absolute;
  	padding: 55px 5px 5px 10px;
  	z-index: 2;
  	min-height: 100%;
  	width: 140px;
  	}
  div#content
  	{
  	background-image: url(bg.gif); background-repeat: repeat-y;
  	position: absolute;
  	padding: 55px 5px 5px 150px;
  	z-index: 1;
  	min-height: 100%;
  	width: 860px;
  	}
  div#top
  	{
  	background-image: url(top_bg.gif); background-repeat: repeat;
  	position: absolute;
  	padding: 5px 5px 5px 10px;
  	z-index: 3;
  	height: 40px;
  	width: 1000px; 	}
  
  
  DIV#header {
  	position: absolute;
  	top: 130px; 
  	left: 270px; 
  	width: 700px; }
  
  DIV#text {
  	position: absolute;
  	top: 170px; 
  	left: 270px; 
  	width: 400px;}
  	
  DIV#bild {
  	position: absolute;
  	top: 170px; 
  	right: 20px; 
  	width: 195px;
  	float: right;
  	background-color: #F00;}
  
  </style>
  
  <!--[if IE]>
  	<style type="text/css">
  		div#nav {height: 100%;}
  		div#content {height: 100%; width: 1000px;}
  		div#top {height: 50px;}
  	</style>
  <![endif]-->
  
  </head>
  <body>
  
  <div id="top">
  	Menübereich</div>
  
  <div id="nav">
  	Newsbereich<br>
  </div>
  
  <div id="content">
		<div id="header">
      <h1>Überschrift </h1>
    </div>  

		<div id="text">
      <p>Text Text Text Text Text Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
      Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text 
      TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
      Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text 
      TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
    </p>
      <p>Text Text Text Text Text Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
      Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text 
      TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
      Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text 
      TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
    </p>    
      <p>Text Text Text Text Text Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
      Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text 
      TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
      Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text 
      TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text 
      Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText Text Text TextText 
    </p>    
  </div>  

		<div id="bild">
      <img src="images/home/bild.gif" width="195" height="250">
    </div>
  </div>
  
  </body>
</html>

Ich bin am Verzzweiflen. Sobald ich Positionioerung rausnehme, geht es wieder. Aber wie kann ich dann meine 3 Div's so genau platzieren?

Hat jemand einen Tipp für mich? Gleich her damit :-)
Viele Grüße
mimii
 
Probier mal Folgendes:

Code: 
div#header {
          margin-top: 130px;
          margin-left: 130px;
          width: 700px; }

div#text {
          margin-left: 130px;
          width: 400px;}
Code: 
<!--[if IE]>
          <style type="text/css">
                  div#nav {height: 100%;}
                  div#content {height: 100%; width: 1000px;}
                  div#top {height: 50px;}
                  div#bild { right: 160px; }
          </style>
<![endif]-->
 
Hi michaelsinterface,

many THX. So geht es. Wenn man nicht soooo betriebsblind wäre, hätte man da auch selber drauf kommen können ;-)

Gruß mimii
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück