✔ div Boxen schieben sich untereinander

Status
Nicht offen für weitere Antworten.
es fehlte zwar das px aber auf meinem Testsystem ist es auch nicht und es geht. Nun habe ich das Problem das er anscheinend das Bottom nicht nimmt.

Ich poste mal meine css Datei vom Server und vom lokalen Testserver. Ich Angaben zum Abstand sind mir unerklärlich. Dennoch geht es nun auf beiden Systemen, so wie ich es möchte

Testsystem:
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 {
   width:220px;
   height:19px;

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

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

   position:absolute;
}

#menue {
   width:920px;
   height:100px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding: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 {
   width:220px;
   height:27px;

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

   bottom:-60px;
   left:0;

   position:absolute;
}

Server:
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 {
   width:220px;
   height:19px;

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

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

   position:absolute;
}

#menue {
   width:920px;
   height:100px;

   margin:0px;
   margin-left:0px;
   margin-right:0px;
   padding: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 {
   width:220px;
   height:27px;

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

   bottom:-180px;
   left:0;

   position:absolute;
}

Woran kann sowas liegen?
 
Zuletzt bearbeitet:
Habe Dir mal ein alternatives Layout ohne absolute Positionierungen erstellt.

Vielleicht hilft Dir das ja weiter?

pos_style.css:

Code: 
html, body {
   background:white;
   margin:0;
   padding:0;
   overflow-y:auto;
   overflow-x:auto;
}

#wrapper {
   width:920px;
   margin:20px;
}

#header {
   width:920px;
   height:60px;
   margin:0;
   padding:0;
}

#menue {
   width:920px;
   margin:5px 0;
   padding:0;
}

#leftCol { /* linke Spalte */
   float:left;
   width:220px;
   margin:15px 0;
}

#produktkategorien {
   width:220px;
   margin:0;
   padding:0;
}

#warenkorb {
   width:220px;
   height:27px;
   margin-top:5px;
   padding:0;
}

#rightCol { /* rechte Spalte */
   float:right;
   width:685px;
   margin:15px 0;
}

#artikelpraesentation {
   width:685px;
   height:420px;
   margin:0;
   padding:0;
}

div.clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss her */
   clear:both;
   font-size:1px;
}
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="wrapper">

<div id="header">
<table border="0" width="920" height="60" background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/header.jpg"><tr><td>&nbsp;</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="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/k_horizon_start.gif" width="5">&nbsp;</td>
<td background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/k_horizon_hint.gif" align="center"><a href="index.php?site=lieferbed">Lieferbedingungen</a></td>
<td background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/k_horizon_hint.gif" align="center"><a href="index.php?site=kontakt">Kontakt</a></td>
<td background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/k_horizon_hint.gif" align="center"><a href="index.php?site=abg">AGB</a></td>
<td background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/k_horizon_end.gif" width="5">&nbsp;</td></tr>
</table></td></tr>
</table>
</div>

<div id="leftCol">
<div id="produktkategorien">
<table border="0" width="100%" background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/kategorien_hint.gif" cellpadding="0" cellspacing="0">
<tr><td valign="top" heigth="19"><img src="http://www.symetrics.info/test/shop/Shop/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=5">Produktkategorie 1</a></td></tr><tr><td><a href="index.php?site=artikel&amp;category=2&amp;shop=5">Produktkategorie 2</a></td></tr><tr><td><a href="index.php?site=artikel&amp;category=3&amp;shop=5">Produktkategorie 3</a></td></tr><tr><td>&nbsp;test</td></tr><tr><td>&nbsp;test 2</td></tr><tr><td><a href="index.php?site=artikel&amp;category=4&amp;shop=5">Test4</a></td></tr><tr><td><a href="index.php?site=artikel&amp;category=4&amp;shop=5">Test5</a></td></tr></table></td></tr>
<tr><td valign="bottom" height="7"><img src="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/menue_foot.gif"></td></tr></table>
</div>
<div id="warenkorb"><table border="0" width="100%" background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/kategorien_hint.gif" cellpadding="0" cellspacing="0">
<tr><td valign="top" heigth="19"><img src="http://www.symetrics.info/test/shop/Shop/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üllt.</table></td></tr>
<tr><td valign="bottom" height="7"><img src="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/menue_foot.gif"></td></tr></table>
</div>
</div><!-- end leftCol -->

<div id="rightCol">
<div id="artikelpraesentation">
<table border="0"  cellspacing="0" cellpadding="0" background="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/artikel_hint.gif">
<tr><td valign="top"><img src="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/artikel_head.gif" border="0"></td></tr>
<tr><td valign="top"><table border="0"><tr><td>Herzlich Willkommen,<p>
im nigelnagelneuen Symetrics e - Shop.<br>
Dieser Shop ist absolut neu und das in jederlei Hinsicht. Der Code als auch das Layout und nicht zu vergessen die Administration. Aber davon können Sie sich selbst am besten Überzeugen.
<p>Liebe Grüße<p><br />Ihr Symetrics Entwicklungsteam</td></tr></table></td></tr>

<tr><td valign="bottom"><img src="http://www.symetrics.info/test/shop/Shop/templates/start/grafix/artikel_foot.gif" border="0"></td></tr></table>
</div>
</div><!-- end rightCol -->

<div class="clear"></div>

</div><!-- end wrapper -->
</body>
</html>
 
Interessanter weise geht es nun mit ein und dem selben css file. Keine Ahnung was da schief lief. Dein Code werde ich die Tage mal genau ausprobieren. Ich danke dir jedenfalls für die kompetente Hilfestellung.
 
Das gilt bei mir aber nur für den IE 6.0.

In allen anderen mir zur Verfügung stehenden Browsern wird der "Warenkorb" nach oben verschoben, siehe angehängten Firefox-Screenshot, der repräsentativ für alle nicht-IE-Browser steht.

Meine Testumgebung: Win2k, Firefox 1.5.0.6, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 8.50

.
 

Anhänge

  • 25938attachment.png
    25938attachment.png
    40,5 KB · Aufrufe: 13
also Thread wieder eröffnet :-(
Mit dem IE geht es auch nur solange niemand was in den Warenkorb legt.
Woran liegt sowas? Ich werde gleich mal dein Code ausprobieren.
 
tequila slammer hat gesagt.:
also Thread wieder eröffnet :-(
Mit dem IE geht es auch nur solange niemand was in den Warenkorb legt.
Woran liegt sowas? Ich werde gleich mal dein Code ausprobieren.
Zum Vergrößern anklicken....

Leider habe ich auch mit deinem Code das Problem, dass der Warenkorb nach oben wächst? :confused:
 
Seltsam, bei mir wandert der "Warenkorb" bei zunehmenden Inhalt in den "Produktkategorien" nach unten, und dehnt sich nach unten aus, wenn ich den "Warenkorb-Inhalt" erweitere.

Meinen Lösungsvorschlag hast Du aber noch nicht auf den Server geladen. (?)
 
tut er nun auch. warum ich weis es nicht. ich bin sehr verwirrt momentan. Aber im moment geht es prima. Tausend dank. Was macht eigentlich dieser wrapper? Und funktioniert es nun auch im FireFox?
 
Das DIV #wrapper dient als Elternelement, um darin alle weiteren DIVs einzubetten.

Auf dem Server ist derzeit noch die "alte" Version verfügbar. (?)

[editpost 20:38h] Jetzt sieht es in allen mir zur Verfügung stehenden Browsern gut aus ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück