CSS Container werden falsch herum dargestellt

dn3d_fanboy · 23.02.2013

Hallo,

ich habe ein Problem mit zwei gefloateten Boxen. Eigenartigerweise werden diese nämlich falsch herum dargestellt.

Wenn ich nicht an geistiger Umnachtung leide sollten das CSS und das Markup aber vollkommen richtig sein.

Hier mal das CSS:

Code:

#content    {width: 960px;
            min-height: 800px;}
            
#navi_content     {width: 210px;
                height:    400px;
                float: left;
                background-color: #171717;}
                
#sliderbox_content    {width: 720px;
                    height: 400px;
                    /*float: left;*/
                    background-image: url(../images/slider-bg.jpg);
                    }
                
#clear_left    {clear: left}

das Markup:

Code:

<div id="content">
        
            <div id="navi_content"></div>
            <div id="sliderbox_content"></div>
            <div id="clear_left"></div>
        
        </div>

Und hier ein Bild von dem, was ich meine:

Und genau hier liegt der Fehler. Die große Box mit dem Hintergrundbild soll rechts neben der dunklen Box dargestellt werden und nicht andersrum.

Vielleicht habe ich tatsächlich wieder etwas übersehen, aber ich hoffe mir kann jemand helfen.

Besten Dank im Voraus.

hub · 23.02.2013

AW: CSS Container werden falsch herum dargestellt

Moin moin,
an dem gezeigten Code liegt es nicht. Ich habs mal kurz in verschiedenen Browsern getestet und überall das gleiche erwartete Ergebnis: die Navi-Box ist links. Offensichtlich liegt dein Fehler irgendwo anders.
Lass dir die Css-Werte der Navi-Box mal anzeigen. Dann siehst du, wer dich da ärgert.
Hast du einen Link zu dieser Seite?

Gruß Ulli

dn3d_fanboy · 23.02.2013

AW: CSS Container werden falsch herum dargestellt

Hallo hub,
also ich habe es jetzt noch mit anderen Browsern ausgeführt und das Problem bleibt bestehen. Ich verzweifel hier, denn wie auch du bestätigst, scheint der Code ja korrekt zu sein.

Was meinst du mit CSS-Werte der Navi-Box anzeigen lassen? Da bin ich jetzt ein wenig überfragt. Einen Link gibt es noch nicht da ich alles momentan noch lokal schreibe. Sorry.

Aber schonmal danke für deine Antwort.

fakerer · 23.02.2013

AW: CSS Container werden falsch herum dargestellt

hi, hast du noch andre stylesheets oder javascript die vielleicht deinen code beieinflussen.
den wie schon hub meinte der code passt.
schau dir mal mit firebug oder ähnlichem an was da für css auf dein html einwirken.
ich vermute das war auch gemeint mit css-werte anzeigen lassen

hub · 24.02.2013

AW: CSS Container werden falsch herum dargestellt

Moin moin,
wie fakerer schon sagt, so hat fast jeder Browser ein Entwicklertool. Beim FF ist es Firebug, bei den anderen heisst das Teil tatsächlich Entwicklertools und ist fast immer mit der Taste F12 zu erreichen. Dort kannst du unter HTML die einzelnen Elemente untersuchen.
Beim IE z.B. ganz komfortabel: "Formate nachverfolgen" - die Tools der anderen Browser arbeiten ähnlich. Da hat jedes so seine Vor- und Nachteile.
Es wird die angeteigt, ein welcher Reihenfolge welche Eigenschaft eines Elements überschrieben wird. Da kannst du idR gleich sehen, wo du und wie du das Problem lösen kannst (darum hatte ich nach einem Direktlink zu deinem Problem gefragt).

Gruß Ulli

dn3d_fanboy · 24.02.2013

AW: CSS Container werden falsch herum dargestellt

Hallo,
ich habe es mir jetzt einmal mit Firebug angeschaut. Dort werden keine Fehler festgestellt.
Hier mal drei Bilder von der Oberfläche:

Ich habe die Seite auch mal hochgeladen, hier könnt ihr sie euch anschauen, wenn ihr mögt:

Vielleicht lässt sich ja so etwas herausfinden. Ich Verzweifel hier sonst noch. Ich habe jetzt tausende Male drübergeschaut und finde keinen Fehler. Auch habe ich alles nochmal in eine DIV-Box verschoben und eine leere DIV-Box am Ende der Zeile erstellt, damit die Breite komplett ausgefüllt ist, aber es ändert sich nichts.
Es ist ja auch so, dass die zwei gefloateten Boxen ineinander verschoben sind.

Also ich bin mit meinem Latein am Ende, aber vielleicht könnt ihr mich ja noch retten.

Besten Dank schonmal im Voraus und auch für die bisherigen Antworten.

patrick_l · 24.02.2013

AW: CSS Container werden falsch herum dargestellt

HTML:

<div id="content">
  <div id="navi_content">
  </div>
  <div id="sliderbox_content">
  </div>
  <br class="clear" />
</div>

Code:

/* --| navi left, slider right |------------ */
#navi_content {float:left;}
#sliderbox_content {float:right;}

/* --| navi right, slider left |------------ */
#navi_content {float:right;}
#sliderbox_content {float:left;}

Ich würde auch für clear keine Div nehmen. Einfach ein br-tag mit der Klasse clear,
oder wenn möglich mit der folgenden Div des nächsten Bereiches das "floaten" beendenden.

HTML:

<div id="content">
  <div id="navi_content"></div>
  <div id="sliderbox_content"></div>
</div>
<div id="footer" class="clear"></div>

Liebe Grüße, Patrick

dn3d_fanboy · 25.02.2013

AW: CSS Container werden falsch herum dargestellt

ENDLICH!!! Ich hab´s gelöst. :lol:

Auch dein Vorschlag funktionierte leider nicht, Patrick. Der Fehler lag ganz woanders versteckt, und zwar hier:

Code:

#nav    {width: 580px;
        float: left;
        /*margin: 0 0 3em 0;
        padding: 0;*/
        list-style-type: none; }

Solange margin: und padding: in dieser Box nicht auskommentiert sind, wurde alles so eigenartig dargestellt. Warum? Keine Ahnung, mMn dürften diese Werte ja keinen Einfluss auf die nachfolgenden DIVs haben.

Die Sliderbox muss dann allerdings mit left anstatt right gefloatet werden, da sonst eine Lücke entsteht:

Code:

#sliderbox_content    {width: 720px;
                    height: 400px;
                    float: left;
                    background-image: url(../images/slider-bg.jpg);
                    }

Danke für eure tatkräftige Unterstützung, das hat mir sehr geholfen. Mir war es fast schon klar, dass der Fehler ganz woanders zu suchen war.

patrick_l · 25.02.2013

AW: CSS Container werden falsch herum dargestellt

Auch wenn du es jetzt geklöst hast, ein kleiner Tipp von mir. Mach als aller erstes ein CSS reset. damit bekommst du alle Browser auf einen Nenner. Allerdings "musst" du dann für alle Elemente neue Werte vergeben.

Code:

/* --| simple CSS reset |------------- */
* {padding:0; margin:0; border:none; outline:none; list-style:none;}
html, body {min-width:100%; min-height:100%;}

Liebe Grüße, Patrick

dn3d_fanboy · 25.02.2013

AW: CSS Container werden falsch herum dargestellt

patrick_l schrieb:
Auch wenn du es jetzt geklöst hast, ein kleiner Tipp von mir. Mach als aller erstes ein CSS reset. damit bekommst du alle Browser auf einen Nenner. Allerdings "musst" du dann für alle Elemente neue Werte vergeben.

Code:

/* --| simple CSS reset |------------- */ * {padding:0; margin:0; border:none; outline:none; list-style:none;} html, body {min-width:100%; min-height:100%;}

Liebe Grüße, Patrick

Das habe ich ja zum Teil hier:

Code:

*    {margin:0;
    padding:0;
    }

Deswegen bin ich ja so verwundert.

patrick_l · 25.02.2013

AW: CSS Container werden falsch herum dargestellt

dn3d_fanboy schrieb:
Die Sliderbox muss dann allerdings mit left anstatt right gefloatet werden, da sonst eine Lücke entsteht

Jetzt nochmal dein CSS angeschaut. Klar das ein Zwischenraum entsteht. Die umliegende Div ist 960px Breit. Die darin liegenden navi (210px) und der slider (720px) füllen diesen aber nicht aus. Da kommst du nur auf 930 Pixel

Einfach eine oder beide Div etwas vergrößern, damit du auf die vollen 960px Breite kommst. Dann hast du auch keinen weißen Zwischenraum.

Liebe Grüße, Patrick