✔ Div positionieren

Status
Nicht offen für weitere Antworten.
Hallo,

danke für den Tipp mit den Buchstaben vor der ID, hatte mich schon gewundert :D

Ich hab das mit den Balken jetzt über ein kleine JS geregelt, welches die Balken anhand des Banners positioniert. Funktioniert noch nicht richtig im Firefox

Gruß
Kerstel
 
Hi,

wieso startest du nun ein neues Thema ("Browser Problem"), wenn es doch noch immer um die Positionierung der beiden äußeren DIVs geht?

Aus diesem Grund wird dein Post in diesem Thema eingepflanzt, Stichwort: "Cross-Postings" vermeiden.

Bevor ich mich daran mache, alle Fehler im HTML- und CSS-Code zu suchen und auszumerzen, damit die Seite nicht nur im IE, sondern auch in den übrigen Browsern läuft, zeige ich dir mal ein kleines grundlegendes Beispiel für ein 5-spaltiges Layout.

Vielleicht hilft dir das weiter.

Code: 
<!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">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
div#wrapper {
width: 900px;
margin: 0 auto;
}

div#leftOut {
float: left;
width: 85px;
background: #8DA3D2;
}

div#leftIn {
float: left;
width: 150px;
background: #BDC8E9;
}

div#content {
float: left;
width: 430px;
background: #dedede;
}

div#rightOut {
float: right;
width: 85px;
background: #8DA3D2;
}

div#rightIn {
margin: 0 85px 0 665px;
background: #BDC8E9;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="leftOut">leftOut</div>
     <div id="leftIn">leftIn</div>
     <div id="content">content</div>
     <div id="rightOut">rightOut</div>
     <div id="rightIn">rightIn</div>
</div>

</body>
</html>
 
sorry, für mich war das ein anderes thema, da ich es ja gelösst hatte, aber es im firefox halt nicht klappt.

Danke für Dein Beispiel, aber wie bekomm ich damit den Banner oben hin der über den 3 mittleren Divs steht
 
Hierfür packen wir die vier involvierten DIVs in ein übergeordnetes DIV #center, das nun die äußeren Spalten #leftOut und #rightOut umfliesst:

Code: 
<div id="wrapper">
     <div id="leftOut">leftOut</div>
     <div id="rightOut">rightOut</div>
     <div id="center">
          <div id="banner">banner</div>
          <div id="leftIn">leftIn</div>
          <div id="rightIn">rightIn</div>
          <div id="content">content</div>
     </div>
</div>
Code: 
div#wrapper {
width: 900px;
margin: 0 auto;
}

div#leftOut {
float: left;
width: 85px;
background: #8DA3D2;
color: #000;
}

div#rightOut {
float: right;
width: 85px;
background: #8DA3D2;
color: #000;
}

div#center {
margin: 0 85px;
}

div#banner {
background: #414b55;
color: #fff;
}

div#leftIn {
float: left;
width: 150px;
background: #BDC8E9;
color: #000;
}

div#rightIn {
float: right;
width: 150px;
background: #BDC8E9;
color: #000;
}

div#content {
margin: 0 150px;
background: #dedede;
color: #000;
}
 
eine frage noch, wie bekomme ich leftIn und leftOut so groß wie den "wrapper" aber mind. so groß wie den anzeigebildschirm?
 
Bei dir fehlt noch für das DIV #wrapper das entsprechende Hintergrundbild (1024*1px), das die Hintergrundfarben der einzelnen Spalten enthält, und durch seine senkrechte Bildwiederholung die Spalten im Element "generiert". Auf diese Weise gleichen sich die Spaltenhöhen "optisch" automatisch an, unabhängig von ihrem jeweiligen Inhaltsumfang.

In meinem Beispiel von heute Morgen ist das die Grafikdatei 5cols.png ("5cols" = 5-spaltiges Layout).
 
aber die hintergründe werden doch nicht über das png definiert sondern über css, je nach Artikelgruppe. Wieso brauch ich das Bild?
 
Wie ich es oben schon ausführte, dient das Hintergrundbild zur Erzeugung der Spaltenhintergründe, damit die Spalten augenscheinlich die gleiche Höhe zueinander besitzen, egal, wieviel in ihnen enthalten ist, und damit sie alle bis zum unteren Elementrand reichen.

Wenn du die Hintergründe jedoch mit background-color definierst, sind die einzelnen Spalten nur so hoch, wie es der Inhalt von ihnen abverlangt, und sie erstrecken sich nicht bis zum unteren Elementrand.

Mit anderen Worten: das Hintergrundbild ist das "Salz in der Suppe". ;)

Du hättest natürlich die Möglichkeit, für die einzelnen Artikelgruppen ein individuelles Hintergrundbild mit den entsprechenden Farben bereitzustellen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück