Was mache ich falsch? Div

Status
Nicht offen für weitere Antworten.

mille

Erfahrenes Mitglied
Hallo!

Ich erstelle gerade ein relativ einfaches Layout.
Allerdings macht der Browser nich das was ich von ihm verlange (gestetet in Firefox --> Screenshot).
Der IE is noch schlimmer, der zeigt mir die "inhaltsbox" in einem Abstand von 60 Pixeln UNTERHALB des Menüs an.
Ich weiss aber nicht, was ich falsch mache, insofern, wisst ihr rat?

Hier der HTMLcode
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="geruest">
  <div id="headline">
      <img src="rohdaten/logo.png" /><img src="rohdaten/head.jpg" id="headlinePicture" /> 
  </div>
      <!-- Menue -->
      <div id="menue">
      <p>Wir<br />
___Auftrag<br />
___Kontakt<br />
___Impressum<br />
___AGB<br />
___BLA<br />
      <br />
      Gruppe<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
<br />
Gruppe<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
<br />
Gruppe<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt<br />
___Unterpunkt</p>
  </div>
    
    <!-- Inhalt -->
    <div id="content"> 100 MAL The big brown fox jumpes over the lazy dog.   </div>
    
    <!-- Notwendig fuers Layout -->
      <div id="clearCenter"></div>
</div>
</body>
</html>

Das zugehörige CSS

CSS:
Body {
    margin: 0px;
    background-image: url(rohdaten/Kachel_Hintergrund.jpg);
}
#geruest {
    position: fest;
    visibility: visible;
    width: 1010px;
    margin-left: 30px;
    margin-top: 30px;
}


#headline {
    position: fest;
    visibility: visible;
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
}
#headlinePicture {
    position: relative;
    margin-left: 60px;
}
#menue {
    position: relative;
    margin-left: 0px;
    float: left;
    width: 220px;
    height: 100%;
}
#content {
    position: relative;
    margin-left: 40px;
    width: 100%;
}
#clearCenter {
clear:left;
}

Anhänge: Momentane Darstellung bei Firefox (ScreenProblem.jpg) und IE6 (ScreenProblemIE6.jpg)
 
Einen Wert namens fest gibt es für die position-Eigenschaft nicht.

Beim Anhängen der Grafiken ist wohl auch etwas falsch gelaufen?
 
Wenn da kannst du position:absolute; und dann gegebennenfalls top oder left angeben.

Tobee
 
Hilft leider nicht.
Nicht nur, das ich bei der box nun noch explizit den Abstand vom oberen Bildschirmrand angeben muss (das möchte ich vermeiden!!), sondern auch läuft mir die "Inhaltsbox" trotzdem noch aus dem Rahmen :-/ (wie man es beim Screenshot des FF sieht)
 
Passe mal den linken Außenabstand für das DIV #content der Menübreite an, damit der Inhalt nicht am unteren Ende des Menüs "einrückt":

Code:
#content {
    position: relative;
    margin-left: 220px;
    width: 100%;
}
 
So, also es geht quasi nur mit einer fixen angaben?
Die will ich eigentlich vermeiden. Ich will einfach nur sagen, dass das "contentFrame" zum "menue" 20 Pixel abstand haben soll. auch an der Stelle wo er einrückt....

Nun kann ich aber, wenns denn sein muss, damit leben, dass ich absolute angaben nehmen muss.
Womit ich nicht leben kann, ist, dass der IE das immernoch so darstellt, wie man es auf dem Screenshot sieht :(
 
Ein Link zur Problemseite wäre ganz hilfreich, um mal die unterschiedlichen Darstellungsweisen incl. der referenzierten Header-Grafiken vergleichen zu können.
 
Status
Nicht offen für weitere Antworten.
Zurück