Probleme mit Layout

Status
Nicht offen für weitere Antworten.

Meikel25

Erfahrenes Mitglied
Hallo zusammen,

ich habe ein kleines Problem mit meinen CSS-Layout.
Wenn mir einer dabei helfen könnte, das wäre super.
Ich bin so langsam am verzweifeln, ich bekomme den content und die Navi nicht innerhalb "fixiert".

Code:
/* Layout */
#header_1 {
	width: 760px;
  	height: 237px;
	margin:auto;
  	margin-top: 32px;
	background: #ffffff url(../pics/4_03.gif) no-repeat right top;
}
#header_2 {
	width: 676px;
  	height: 197px;
	margin-left: 74px;
  	margin-top: 9px;
	background: #ffffff url(pics/4_03.gif) no-repeat left top;
}
#inhalt_box {
  	width: 760px;
  	margin: auto;
  	background-color: #ffffe1;
}

#navi {
	margin-left: 526px;
	margin-top: 0px;
  	width: 224px;
	height: 300px;
  	background-color: #cbc18e;
}
#content {
	margin-left: 10px;
	margin-top: 0px;
  	width: 516px;
	height: 300px;
  	background-color: #eae8c2;
}
#footer {
  width: 760px;
  height: 41px;
  margin: auto;
  background-color: #ffffe1;
}


/* Laout-Ende */


mfg,
Meikel25


Ps: ich schicke mal ein Bild mit anbei, zum allgemein Verständniss.
 

Anhänge

  • 1.gif
    1.gif
    6,7 KB · Aufrufe: 11
Hast du ein online Beispiel oder bitte den gesamten Quelltext? Und was bedeutet "nicht innerhalb fixiert"?
 
Ich habe schon mal ein wenig weitergeschraubt.
Aber im Explorer verrutscht der Content-Bereich und im Firefox, sieht alles okay aus.

Hier mal die url:

Danke schon mal
 
Zuletzt bearbeitet:
Anstatt mit position zu arbeiten, solltest du hier float nutzen:


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<style type="text/css">

html, body {
    text-align:center;
}

#container {
    margin:auto;
    width:760px;
    overflow:hidden;
      background-color: #ffffe1;
}
#content {
    margin:0 0 0 10px; /* 10px Abstand von links */
    float:left; /* div links schwimmen lassen */
      width: 516px;
    height: 300px;
      background-color: #eae8c2;
    display:inline; /* IE Doubled Float-Margin Bug */
}
#navi {
    float:left;
      width: 224px;
    height: 300px;
      background-color: #cbc18e;
}

</style>
</head>

<body>

<div id="container">

    <div id="content"></div>
    
    <div id="navi"></div>

</div>

</body>
</html>


Gruß
 
Status
Nicht offen für weitere Antworten.
Zurück