zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container überlappen sich trotz clearing

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.11.2008, 13:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2008
Beiträge: 7
Klaus_Hansen befindet sich auf einem aufstrebenden Ast
Standard Container überlappen sich trotz clearing

Ich kenne die Tips in der FAQ hierzu. Trotzdem verzweifle ich schier:
In meinem Beispiel enthält ein DIV (hier: "Vierspalter_Huelle") mehrere nebeneinanderstehende DIVs (Vierspalter1 bis -4). Einer davon ragt über den umschließenden DIV unten hinaus.
Die Methode, einen clearenden div anzufügen, funktioniert nicht. Die diversen Hacks möchte ich erst ausprobieren, nachdem ich die Primitiv-Methode mit dem clearenden DIV am Ende des "Vierspalter_Huelle" erfolgreich angewendet habe.

Die Seite liegt hier:

capella-software


Der Quelltext mit eingebetteter Style-Deklaration:

================================================== =====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>capella-software</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="Musiksoftware Music capella Software" name="Description" />
<meta content="Musiksoftware Notensatz Notation Music Software capella scan tonica capriccio whc MIDI" />
<meta name="Keywords" />


<style type="text/css">
html, body, p, ul, h1, h2, h3, h4, li {
margin: 0;
padding: 0;
font-family:Verdana, Helvetica, sans-serif;
}

body
{
background-color:rgb(245,250,255);
}

h1, h2, h3, h4
{
margin-top:16px;
font-weight:bold;
letter-spacing:1px;
text-decoration:none;
color:rgb(100,40,70); /* sanftrot */
}


h2 { font-size:19px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
p { font-size:12px; }

/************************************************** ********************/
#Aussenhuelle
{
position:absolute;
width: 990px; /*Breite des Inhaltsbereichs: 1024 minus Rollbalken */
left: 50%; /* Abstand vom linken Bildschirmrand auf 50% setzen*/
margin-left: -495px; /*Und nun wieder um die halbe Inhaltsbreite zurück schieben*/
padding-top:10px;
background: url("../images/background/Aussenhuelle.png") repeat-y;
}

/************************************************** ****************************/
#Vierspalter_Huelle
{
position:relative;
background:url("../images/boxes/Box_958_300_Fussleiste.PNG") no-repeat left top;
margin-left:16px;
min-height:140px;
width:958px;
margin-top:24px;
}

#Vierspalter_1
{
position:absolute;
top:8px;
left:16px;
width:70px;;
}

#Vierspalter_2
{
position:absolute;
top:8px;
left:90px;
width:160px;
}

#Vierspalter_3
{
position:absolute;
top:8px;
left:280px;
width:400px;
}

#Vierspalter_4
{
position:absolute;
top:8px;
left:750px;
width:200px;
border:solid 1px;
}

</style>

</head>
<body> <!-- Original: <a name="top"></a> -->

<div id="Aussenhuelle">

<div id="Vierspalter_Huelle">
<div id="Vierspalter_1">
<p>
Text im ersten linken DIV. Text im ersten linken DIV.
</p>
</div>
<div id="Vierspalter_2">
<p>
Text im zweiten linken DIV. Text im zweiten linken DIV.
</p>
</div>
<div id="Vierspalter_3">
<h3>Überschrift</h3>
<p>
Text im Mittelblock. Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.
</p>
<p>
Noch ein Absatz.
</p>
</div>
<div id="Vierspalter_4">
<p>
Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.
</p>
<p>
Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.
</p>
<p>
Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.Text im rechten DIV.
</p>
</div>
<div style="clear:both;"></div>
</div><!-- Vierspalter -->

<div id="Vierspalter_Huelle">
<div id="Vierspalter_1">
<p>
Text im ersten linken DIV. Text im ersten linken DIV.
</p>
</div>
<div id="Vierspalter_2">
<p>
Text im zweiten linken DIV. Text im zweiten linken DIV.
</p>
</div>
<div id="Vierspalter_3">
<h3>Überschrift</h3>
<p>
Text im Mittelblock. Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.Text im Mittelblock.
</p>
<p>
Noch ein Absatz.
</p>
</div>
<div id="Vierspalter_4">
<p>
Neuer Text im rechten DIV. Neuer Text im rechten DIV. Neuer Text im rechten DIV.Text im rechten DIV.Neuer Text im rechten DIV.Text im rechten DIV. Neuer Text im rechten DIV.
</p>
</div>
<div style="clear:both; width:950px;"></div>
</div><!-- Vierspalter -->

</div> <!-- Aussenhuelle -->

</body>

================================================== ====

Vielen Dank für einen Tipp!
Klaus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.11.2008, 13:24
bel bel ist offline
Faulancer
neuer user
 
Registriert seit: 31.01.2005
Beiträge: 60
bel befindet sich auf einem aufstrebenden Ast
Standard

Das Clearen brauchst du bei floatenden Elementen, bei absolut positionierten Elementen hilft das garnix.
Floate deine inneren Divs, absolute Positionierung brauchst du hier nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.11.2008, 17:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2008
Beiträge: 7
Klaus_Hansen befindet sich auf einem aufstrebenden Ast
Standard

Danke sehr für die schnelle Antwort! Bedeutet das, dass absolut positionierte Binnen-DIVs immer ein feste Höhe im übergeordneten DIV erfordern? Die absolute Positionierung möchte ich nicht völlig missen - sie hat ja auch ihre Vorteile.
Und noch etwas: Bekommt man überhaupt vier DIVs in verschiedener Höhe nebeneinander "top"-bündig hin, ohne dass das Chaos ausbricht?
Besten Dank für Deine Hilfe.
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 22.11.2008, 19:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2008
Beiträge: 7
Klaus_Hansen befindet sich auf einem aufstrebenden Ast
Standard

Nachtrag: Der Leidensdruck war groß genug, herumzuknobeln und das Problem dank deines Postings zu lösen. Es klappt jetzt bestens.
Nochmals schönen Dank!
Klaus
Mit Zitat antworten
Antwort

Stichwörter
clear, div

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fixe Container Posi trotz Aufklappbarem Menu crimi CSS 7 01.03.2008 15:50
Positionierung von Container horizontal mayhemtl CSS 9 11.08.2007 16:25
div container verschachteln blau CSS 2 05.12.2006 20:44
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 14:47
Mitwachsende DIV Container Myjestic CSS 9 27.07.2005 18:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:24 Uhr.