✔ Div-Container ignoriert float:right;

[OkaminoChizu]

Hallo,

ich habe ein ziemlich hartnäckiges Problem und komme auf keine Lösung.
Auf meiner Seite sollen zwei Div-Container (links ein Navigationsmenü und rechts eine kurze Beschreibung) nebeneinanderstehen.
Darüber ist noch ein Header.
Das hat auch erst geklappt, aber dann habe ich beim Header und beim Nav dahinter Schatten eingefügt und auf einmal hat der Beschreibungs-Container
float: right; einfach ignoriert und klebt jetzt behaarlich unter dem Nav fest. Weiß jemand Hilfe?

Lg,

Okami

 

[Maik]

Moin.

Weiß jemand Hilfe?

Nicht sicher, weil hier kein Link zu deiner Seite, oder ihr HTML- und CSS-Code vorliegt, um darauf konkret eingehen zu können.

Aus dem Bauch heraus würde ich aber sagen, dass du den "Schatten" für die Navigation im HTML-Code zwischen den beiden Spaltenblöcken (also nach dem schliessenden </div>-Tag des Navigation-Containers und vor dem öffnenden <div>-Tag des Inhalt-Containers) notiert hast, und dieser keine float:left-Eigenschaft besitzt.

Die mit einer float-Regel formatierten Elemente, die damit von ihrem benachbarten Element, das keine float-Eigenschaft besitzt, umflossen werden sollen, müssen im HTML-Code aber immer an erster Stelle genannt werden, ansonsten werden sie vom Browser umgebrochen.

Hier ein heruntergebrochenes Beispiel mit zwei DIV-Blöcken, das den Sachverhalt veranschaulicht:

• "foobar right" wird in die nächste Zeile umgebrochen:

<div>foobar left</div>
<div style="float:right;width:200px">foobar right</div>

• "foobar right" wird nicht in die nächste Zeile umgebrochen:

<div style="float:right;width:200px">foobar right</div>
<div>foobar left</div>

mfg Maik

 

[OkaminoChizu]

Also bei mir sieht jetzt der betreffende Html-Text folgendermaßen aus:

<div class="navshadow5">
<div class="navshadow4">
<div class="navshadow3">
<div class="navshadow2">
<div class="navshadow">
<ul id="Nav">
  <li> <a class="Nav" href=""> Home </a> </li>

  <li> <a class="Nav" href=""> Über uns </a> </li> 
  <li> <a class="Nav" href=""> Projekte </a> </li>
  <li> <a class="Nav" href=""> Pressemitteilung </a> </li>

  <li> <a class="Nav" href=""> Anmeldung </a> </li>
  <li> <a class="Nav" href=""> Anderes </a> </li>
  <li> <a class="Nav" href=""> Satzung </a> </li>

  <li> <a class="Nav" href=""> Impressum </a> </li>
</ul>
<div class="Beschr">
Über uns
</div>
</div>
</div>
</div>
</div>
</div>

Ist das deiner Meinung nach so dann richtig oder was habe ich falsch gemacht? Die float-Elemente stehen bei mir direkt im
Css-Sheet.

Danke für die Antwort

 

[Maik]

Ohne Einblick in die dazugehörige CSS-Formatierung lässt sich hierzu noch immer nichts konkret sagen

Weiß jemand Hilfe?

Nicht sicher, weil hier kein Link zu deiner Seite, oder ihr HTML- und CSS-Code vorliegt, um darauf konkret eingehen zu können.

Grundsätzlich scheint in dem HTML-Code soweit alles in Ordnung zu sein, wenn die Beschreibung den Schatten der Navigation erhalten soll ;-)

mfg Maik

 

[OkaminoChizu]

Okay, sry :-(
Der Quelltext ist bloß schon relativ umfangreich xD
Ich habe jetzt mal den Code von den Navigationsmenü betreffenden Elementen und den des anderen elements kopiert. Wenn das dann immer noch nicht hilft, wird wohl der ganze Text dran glauben müssen
Das Design ist übrigens noch nicht so der Hit, ich wollte erst die Struktur festlegen und bin dann da hängengeblieben...

div.navshadow, div.navshadow2, div.navshadow3, div.navshadow4, div.navshadow5 {
   padding: 0.5px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   }

div.navshadow5 {
   float: left;
   background-color: #fcfcfc;
   border: 0.5px solid #fff;
   width: 200px;
   height: 480px;
   margin-left: 20px;
   margin-right: 10px;
   }

div.navshadow4 {
   background-color: #ededed;
   border: 0.5px solid #f6f6f6;
   margin: 0px;
   height: 477px;
   }

div.navshadow3 {
   background-color: #d1d1d1;
   border: 0.5px solid #e1e1e1;
   margin: 0px;
   height: 474px;
   }

div.navshadow2 {
   background-color: #aaa;
   border: 0.5px solid #bebebe;
   margin: 0px;
   height: 471px;
   }

div.navshadow {
   background-color: #8e8e8e;
   border: 0.5px solid #959595;
   margin: 0px;
   height: 468px;
   }

ul#Nav {
   width: 200px;
   height: 480px;
   margin: 0px;
   padding: 0;
   top: -10px;
   left: -11px;
   display: block;
   position: relative;
   }

ul#Nav li {
   list-style: none;
   margin: 0; 
   padding: 16px;
   }

div.Beschr {
   float: right;
   width: 450px;
   margin-right: 20px;
   display: block;
   }

 

[Maik]

Sollte der HTML-Code eventuell nicht so lauten?

<div class="navshadow5">
    <div class="navshadow4">
        <div class="navshadow3">
            <div class="navshadow2">
                <div class="navshadow">
                    <ul id="Nav">
                        <li> <a class="Nav" href=""> Home </a> </li>
                        <li> <a class="Nav" href=""> Über uns </a> </li>
                        <li> <a class="Nav" href=""> Projekte </a> </li>
                        <li> <a class="Nav" href=""> Pressemitteilung </a> </li>
                        <li> <a class="Nav" href=""> Anmeldung </a> </li>
                        <li> <a class="Nav" href=""> Anderes </a> </li>
                        <li> <a class="Nav" href=""> Satzung </a> </li>
                        <li> <a class="Nav" href=""> Impressum </a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="Beschr">
Über uns
</div>

Wenn nicht, fehlt ansonsten im Regelblock des CSS-Selektors ul#Nav eine float:left-Regel, und die derzeitige Breite der Klasse .navshadow5 muß noch entsprechend aufgestockt werden, damit die beiden Blöcke darin auch überhaupt nebeneinander Platz finden können.

mfg Maik

 

[OkaminoChizu]

Argh, ich glaub's einfach nicht
Gefühlte zehntausend Mal hab ich das überprüft und es ist mir nicht aufgefallen ò.Ó
Danke für den Tipp xD
Jetzt wird mir natürlich einiges klarer...
Peinlich, peinlich... -.-" :-(