✔ Rechter Bereich wird nach unten gedrückt

Status
Nicht offen für weitere Antworten.
Zum Beispiel gibt es im IE 6 beim 'blauen Kasten' unten rechts noch ein Darstellungsproblem. Da wird die rechte untere Ecke nicht richtig ausgerichtet. Der ganze Kasten wird ja nach dem folgenden Code dargestellt:
Code: 
<div id="right" style="text-align: center;">
 <div class="links">
 <div class="rechts" style="margin: 0px;">
        <div class="oben">
        <div class="unten">
        <div class="linkeObereEcke">
        <div class="rechteObereEcke">
        <div class="linkeUntereEcke">
        <div class="rechteUntereEcke">
        <div class="inhalt">
        <div class="scroll" style="height: 415px;">
<span style="height: 415px; line-height: 415px;">
<img src="http://www.tutorials.de/forum/images/logo.gif" width="171" height="54">
</span>                                           
 </div></div></div></div></div></div></div></div></div></div>
</div>
Code: 
.links { background: url(images/l.gif) repeat-y; }
.rechts {  background: url(images/r.gif) repeat-y right; }
.oben { margin-top: 5px;
        background: url(images/o.gif) repeat-x; }
.unten { margin-bottom: 5px;
         background: url(images/u.gif) bottom repeat-x; }
.linkeObereEcke { background: url(images/oL.gif) left top no-repeat; }
.rechteObereEcke { background: url(images/oR.gif) right top no-repeat; }     
.linkeUntereEcke { background: url(images/uL.gif) left bottom no-repeat; }
.rechteUntereEcke { background: url(images/uR.gif) right bottom no-repeat; }
.inhalt { padding: 15px 30px 15px 30px; } 
.scroll { max-height: 415px;
   /*overflow: auto;*/ }
 
#right { width: 33%;
  height: 75%;
  float: right;
  /*overflow: auto;*/ }

Außerdem verstehe ich nicht, warum im IE 6 rechts eine Scrollleiste dargestellt wird, während diese im Firefox, so wie ich es auch gerne hätte, nicht vorhanden ist. *grübel *kopfkratz
Hm, ja, und wo ich schon dabei bin, den 'blauen Kasten' hab ich bisher auch noch nicht vertikal mittig ausgerichtet bekommen. Bin gerade dran, ist halt mittlerweile schon ein ganz schönes div-Wirrwarr ;-) .
 
Zuletzt bearbeitet:
WIK-Lars hat gesagt.:
Zum Beispiel gibt es im IE 6 beim 'blauen Kasten' unten rechts noch ein Darstellungsproblem. Da wird die rechte untere Ecke nicht richtig ausgerichtet.
Zum Vergrößern anklicken....
Das dürfte dann an der margin-bottom-Deklaration für die Klasse .unten liegen, die dort nichts zu suchen hat - gleiches gilt im übrigen für die Klasse .oben.

WIK-Lars hat gesagt.:
Außerdem verstehe ich nicht, warum im IE 6 rechts eine Scrollleiste dargestellt wird, während diese im Firefox, so wie ich es auch gerne hätte, nicht vorhanden ist.
Zum Vergrößern anklicken....
Bei mir wird da im IE6 am rechten Fensterrand kein Scrollbalken angezeigt, sofern das Fenster in der Vertikalen nicht zu klein ist, sodass die rechte Spalte gescrollt werden kann, was dann im Firefox aber auch der Fall ist.
 
Prima, wie immer hast Du Recht :) !

Und wie bekomme ich jetzt noch meinen schönen blauen Kasten vertikal mittig ausgerichtet? Hab da schon die ganze Zeit mit vertical-align: middle rumgemacht, da geht aber nix.
 
Hi,

die Box lässt sich auf diese Weise vertikal zentrieren:

Code: 
#right_margin {
margin-top:-207.5px; 
height:415px;
position:relative !important; /* Für moderne Browser (FF, IE7, Opera & Co.) */
position:absolute; /* Für IE6 */
top:50%;
right:0;
}
 
Hi Maik,

ups, ich hoffe, Du hast bis jetzt noch nicht dieses Posting hier gelesen, denn ich hatte noch einen kleinen Bug in meinem Code. Folglich hatte ich eine nicht zutreffende Beschreibung über die erfolgten Änderungen hier stehen.
Also, danke für Deine Antwort und Deinen Vorschlag! Es sieht jetzt ( so ) aus. Das geht doch schon mal schwer in die richtige Richtung. Beim IE 6 will's noch nicht so recht klappen. Im FF ist es grundsätzlich richtig, nur dass der Scrollbalken rechts am Bildschirmrand dargestellt wird und dieser (eigentlich möchte ich ihn ja gar nicht haben) nicht bis ganz unten durchläuft.
 
Zuletzt bearbeitet:
Die Box wird doch im IE6 ebenfalls vertikal zentriert. Falls du aber auf deren Inhalt abzielst, sei dir gesagt, dass der IE Grafikelemente nicht via die line-height-Eigenschaft vertikal zentriert.

Wenn du am rechten Fensterrand keinen Scrollbalken möchtest, dann stellt sich die Frage, wieso du überhaupt das DIV #right mit overflow:auto auszeichnest, und darin die Box .scroll mit derselben Eigenschaft einbettest?
 
Hi Maik,

komisch, dass das bei Dir im IE 6 korrekt angezeigt wird und bei mir nicht. Ich habe den Cache usw. geleert, trotzdem wird die blaue Box beim mir top ausgerichtet.
Dann habe ich es noch mal bei einer Kollegin im IE 6 angeschaut. Bei der wird sie auch nicht richtig vertikal zentriert angezeigt, aber es gibt zumindest einen gewissen Abstand zum Menü.

Das scroll-div habe ich jetzt ganz rausgenommen. Im FF ist es schon so, wie ich es haben möchte. Im IE 6 sieht's bei mir zumindest immer noch total beknackt aus.

Die Ausrichtung des Bildes IN der Box meinte ich übrigens tatsächlich nicht.
Falls Du noch mal einen Blick auf den aktuellen Stand werfen möchtest: hier .
 
Sorry, ich hab's mir heute Morgen nicht näher angeschaut bzw. ausgiebig getestet, aber beim Verkleinern des Fensters sitzt die Box tatsächlich zu weit oben und richtet sich nicht zur vertikalen Mitte aus.

Ich vermute daher, dass der IE6 in deinem Modell / Seitenkonzept ein Problem mit der korrekten Ermittlung der vertikalen Mitte hat, denn grundsätzlich unterstützt er diese Technik der Positionierung zum vertikalen Zentrieren einwandfrei, wie dieses "abgespeckte" Testdokument belegt:

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>tutorials.de | demo_WIK-Lars</title>

<style type="text/css">
<!--
html,body {
       height:100%;
       margin:0;
       padding:0;
}
#right {
       width:34%;
       height:75%;
       float:right;
       text-align:center;
       position:relative;
       border:1px solid #000;
}
#right_margin {
       margin-top:-207.5px;
       height:415px;
       position:relative !important;
       position:absolute;
       top:50%;
       right:0;
}
.links {
       background:url(http://www.ma-partners.de/entw/images/l.gif) repeat-y;
}
.rechts {
       background:url(http://www.ma-partners.de/entw/images/r.gif) repeat-y right;
}
.oben {
       background:url(http://www.ma-partners.de/entw/images/o.gif) repeat-x;
}
.unten {
       background:url(http://www.ma-partners.de/entw/images/u.gif) bottom repeat-x;
}
.linkeObereEcke {
       background:url(http://www.ma-partners.de/entw/images/oL.gif) left top no-repeat;
}
.rechteObereEcke {
       background:url(http://www.ma-partners.de/entw/images/oR.gif) right top no-repeat;
}
.linkeUntereEcke {
       background:url(http://www.ma-partners.de/entw/images/uL.gif) left bottom no-repeat;
}
.rechteUntereEcke {
       background:url(http://www.ma-partners.de/entw/images/uR.gif) right bottom no-repeat;
}
.inhalt {
       max-height:415px;
       height:415px;
}
-->
</style>

</head>
<body>

<div id="right">
     <div id="right_margin">
          <div class="links">
               <div class="rechts">
                    <div class="oben">
                         <div class="unten">
                              <div class="linkeObereEcke">
                                   <div class="rechteObereEcke">
                                        <div class="linkeUntereEcke">
                                             <div class="rechteUntereEcke">
                                                  <div class="inhalt">
                                                       <span style="height: 415px; line-height: 415px;">
                                                             <img src="http://www.ma-partners.de/entw/images/logo.gif" width="171" height="54">
                                                       </span>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

</body>
</html>
 
*Heul Ja, ich seh' schon, für den IE 6 muss ich mir da wohl irgendetwas einfallen lassen. Naja, im FF und IE 7 sieht's jetzt einigermaßen so aus, wie ich's haben wollte.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück