✔ div Boxen schieben sich untereinander

Status
Nicht offen für weitere Antworten.
T

tequila slammer

Erfahrenes Mitglied
Ich habe ein Problem mit meinem css Layout.
Siehe Bild

Das Problem ist, dass die obere und untere Box variable sind und ich deren Höhe nicht fest definieren kann. Deshalb rutscht die obere Box immer unter die untere, wenn sie zu lang wird. Momentan habe ich im css position: absolute stehen. Ein Fehler ich weis aber auch andere Einstellungen, bringen keinen Erfolg außer das die untere Box dann nicht mehr an dieser Position steht, sondern ganz oben links.

Ich probiere mit dem IE falls das eventuell wichtig ist.

Bitte gebt mir Tipps wie ich das Problem beheben kann.
 
Entferne mal die absolute Positionierung der unteren Box, da sie so aus dem normalen Textfluss genommen wird und daher nicht auf den zunehmenden Inhalt in der oberen Box reagiert, sprich nach unten mitwandert.

Ansonsten zeig doch bitte mal den Quellcode (HTML + CSS).
 
wenn ich position: absolute wegmachen rutscht die Box nach oben links.
Meine Datei fertig zusammengesetz sieht so aus:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head><title>Symetrics CSS Testseite</title>
<link rel="stylesheet" type="text/css" href="templates/start/pos_style.css">
<link rel="stylesheet" type="text/css" href="templates/start/style.css">
</head>
<body>

<div id="header">
<table border="0" width="920" height="60" 

background="templates/start/grafix/header.jpg"><tr><td>&nbsp;</td></tr></table></div>
<div id="artikelpraesentation"><table border="0" width="100%" cellspacing="0" 

cellpadding="0" background="templates/start/grafix/artikel_hint.gif">
<tr><td valign="middle" background="templates/start/grafix/artikel_head.gif" 

height="19">&nbsp;<a href="index.php">Home</a> > Bar</td></tr>
<tr><td valign="top"><table border="1" width="100%"><tr><td>Es sind keine Artikel f&uuml;r 

diese Kategorie gepflegt. Sicherlich wird dies bald 

nachgeholt.</td></tr></table></td></tr>
<tr><td valign="bottom"><img src="templates/start/grafix/artikel_foot.gif" 

border="0"></td></tr></table></div>

<div id="menue">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr><td valign="top">
<table border="0" cellspacing="0" height="19" width="920">
<tr align="right"><td background="templates/start/grafix/k_horizon_start.gif" 

width="5">&nbsp;</td>
<td background="templates/start/grafix/k_horizon_hint.gif" align="center"><a 

href="index.php?site=lieferbed">Lieferbedingungen</a></td>
<td background="templates/start/grafix/k_horizon_hint.gif" align="center"><a 

href="index.php?site=kontakt">Kontakt</a></td>
<td background="templates/start/grafix/k_horizon_hint.gif" align="center"><a 

href="index.php?site=abg">AGB</a></td>
<td background="templates/start/grafix/k_horizon_end.gif" width="5">&nbsp;</td></tr>
</table></td></tr>
</table></div>

<div id="produktkategorien">
<table border="0" width="100%" background="templates/start/grafix/kategorien_hint.gif" 

cellpadding="0" cellspacing="0">
<tr><td valign="top" heigth="19"><img src="templates/start/grafix/warenkorb_head.gif" 

border="0"></td></tr>
<tr><td><table border="0" width="100%"><tr><td><a 

href="index.php?site=artikel&amp;category=1&amp;shop=1">Thinner</a></td></tr><tr><td><a 

href="index.php?site=artikel&amp;category=2&amp;shop=1">Probewaren</a></td></tr><tr><td><a 

href="index.php?site=artikel&amp;category=3&amp;shop=1">Siemens</a></td></tr><tr><td><a 

href="index.php?site=artikel&amp;category=4&amp;shop=1">TDK</a></td></tr><tr><td><a 

href="index.php?site=artikel&amp;category=5&amp;shop=1">Bar</a></td></tr><tr><td><a 

href="index.php?site=artikel&amp;category=6&amp;shop=1">Solder</a></td></tr></table></td><

/tr>
<tr><td valign="bottom" height="7"><img 

src="templates/start/grafix/menue_foot.gif"></td></tr></table></div>

<div id="warenkorb">
<table border="0" width="100%" background="templates/start/grafix/kategorien_hint.gif" 

cellpadding="0" cellspacing="0">
<tr><td valign="top" heigth="19"><img src="templates/start/grafix/warenkorb_head.gif" 

border="0"></td></tr>
<tr><td><table border="0" width="100%"><tr><td>Ihr Warenkorb ist noch nicht 

gef&uuml;llt.</table></td></tr>
<tr><td valign="bottom" height="7"><img 

src="templates/start/grafix/menue_foot.gif"></td></tr></table></div>
</body>
</html>

Die css Datei sieht so aus:
Code: 
html, body {
   background-color:white;
   margin:0px;
   padding:0px;

   overflow-y:auto;
   overflow-x:auto;
}

#header {
   width:920px;
   height:60px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding:0px;

   top:20px;
   left:20px;
   right:0px;

   position:absolute;
}

#produktkategorien {
/*background-color:blue;*/
   width:220px;
   height:19px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding:0px;

/*
   top:85px;
   left:20px;
   right:0px;
*/
   top:119px;
   left:20px;
   right:0px;

   position:absolute;
}

#menue {
/*background-color:blue;*/
   width:220px;
   height:100px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding:0px;
/*
   top:119px;
   left:20px;
   right:0px;
*/
   top:85px;
   left:20px;
   right:0px;
   
   position:absolute;
}

#artikelpraesentation {
   width:465px;
   height:420px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding:0px;

   top:119px;
   left:255px;
   right:0px;

   position:absolute;
}

#warenkorb {
/*background-color:blue;*/
   width:220px;
   height:27px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding:0px;
/*
   top:219px;
   left:20px;
   right:0px;
*/
   top:280px;
   left:20px;
   right:0px;

  /* position:absolute;*/

}

Es ist mein erster Versuch mit css das Layout festzulegen, deshalb hoffe ich mal nicht zu viele Fehler gemacht zu haben.

In der style.css steht nur drin wie ein Link markiert werden soll und welche Schriftart und Größe.
 
Zuletzt bearbeitet:
Wie gesagt, entferne mal alle absoluten Positionierungen und arbeite mit der float-Eigenschaft, um ein mehrspaltiges Layout zu realisieren. Zudem solltest Du den Seitenaufbau ohne Tabellen umsetzen, denn hierfür sind sie nicht gedacht.

So lässt sich beispielsweise diese überflüssige Tabelle:

HTML: 
<div id="header">
<table border="0" width="920" height="60" background="templates/start/grafix/header.jpg"><tr><td>&nbsp;</td></tr></table></div>

entfernen und die Formatierungen (Breite,Höhe,Hintergrundbild) mit CSS direkt auf das DIV anwenden:

HTML: 
<div id="header" style="width:920px; height:60px; background:url(templates/start/grafix/header.jpg);"></div>

Wobei die CSS-Formatierungen selbstverständlich in ein zentrales Stylesheet (CSS-Datei) ausgelagert werden:

Code: 
div#header {
width:920px; 
height:60px; 
background:url(templates/start/grafix/header.jpg);
}
Übrig bleibt im HTML-Code nur noch:

HTML: 
<div id="header"></div>
 
Mein Problem ist gelöst.
Wenn sich ein Element verschiebt auf Grund dessen, dass es eine variable Größe hat braucht man nur das folgende Element mit in das <div> legen.
Bsp:
<div id="menue1">
<div id="menue2"></div>
</div>

Dadurch werden die Positionsangaben auf von menue2 auf die Positionsangaben von menue1 angewendet. Zusammen mit der Option "bottem:" und einer negativen Zahl kann man den Abstand zum obenliegenden Element verändern. Ändert sich das menue1 in seiner Länge bleibt der Abstand bestehen und das menue2 wandert mit.
 
trotzdem danke. Der Link war letztlich ausschlaggebend.

Edit:

Leider hat sich nun herausgestellt, dass es online nicht funktioniert. :-( Auf meinem Testsystem geht alles wunderbar. Woran könnte das denn nun schon wieder liegen? An css?
 
Zuletzt bearbeitet:
Kannst Du bitte den Link nennen, damit man einen Blick auf die Online-Version werfen kann?
 
Das Problemkind
Auf meinem Testsystem läßt er den Abstand von 60px. Auf dem Server allerding nicht. Da hängt er sich direkt an das übergeordnete Element.

Die Grundelemente sind so aufgebaut:
<div id="produktkategorien">
<div id="warenkorb"></div>
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück