Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS Container werden falsch herum dargestellt“

dn3d_fanboy

Aktives Mitglied

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

nicht ganz neu hier

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

Aktives Mitglied

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

Aktives Mitglied

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

nicht ganz neu hier

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

Aktives Mitglied

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

Hat es drauf

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

Aktives Mitglied

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

Hat es drauf

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

Aktives Mitglied

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

Das habe ich ja zum Teil hier:

Code:
*    {margin:0;
    padding:0;
    }

Deswegen bin ich ja so verwundert.
 

patrick_l

Hat es drauf

AW: CSS Container werden falsch herum dargestellt

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben