nicht angemeldet
Probleme mit Divs + Background + Firefox
0 0 
Gunnar Bittersmann
0 0
Probleme mit Divs + Background + Firefox
Hallo Leute,
ich hab ein Problem mit folgendem Code:
<body style="margin: 0px; background-color: #234251; text-align: center;">
<div style="width: 780px; padding: 20px 50px 0px 50px; margin: 20 auto; background: #000 url('page.gif') no-repeat;">
<div style="padding: 40px 20px 20px 40px; width: 720px; height: 80px; background: #fff url('header.gif') no-repeat;"><h1>Title</h1></div>
<div style="padding: 8px 20px 8px 20px; width: 740px; height: 24px; background: #fff url('menu.gif') no-repeat;">Menu</div>
<div style="width: 770px; padding: 5px; background-color: #fff;">
<div style="width: 550px; padding: 10px; background-color: #fff; float: left;">
<h1>Content</h1>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div style="width: 160px; padding: 20px; background: #f0f0f0 url('sidebar.jpg') no-repeat; float: left;">
<h2>Sidebar</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
<div style="width: 740px; height: 18px; padding: 8px 20px 20px; 20px; background: #fff url('footer.gif') no-repeat; font-size: x-small;">Footer</div>
</div>
</body>
Und zwar scheinen im Firefox verschachtelte Div-Container das übergeordnete Div nicht "aufzuspannen". Um es verständlicher zu machen, hab ich mal 2 Screenshots gemacht:
http://www.thomas-ney.com/soll.jpg zeigt den IE6, der meinen Code so interpretiert, wie ich es gern hätte.
http://www.thomas-ney.com/ist.jpg zeigt den Firefox mit genanntem Problem.
Ist sicher nur ne kleine CSS-Ergänzung, nur komm ich nicht drauf und verzwifel grad etwas. Darum danke ich euch bereits im Vorraus für eure Hilfe.
P.S.: Das ganze ist natürlich nur Entwurfs-Code, also nicht über die CSS-Befehle im HTML-Code wundern.
-
Moin
<div style="width: 550px; padding: 10px; background-color: #fff; float: left;">
<div style="width: 160px; padding: 20px; background: #f0f0f0 url('sidebar.jpg') no-repeat; float: left;">Durch float:left; wurden die Container aus dem "Fluss" genommen.
<li>Link 3</li>
</ul>
</div>Setze hier ein Element was das Float wieder aufhebt. Z.B. ein <BR> mit der Eigenschaft clear:both;
Dann solltes es auch om FF klappen.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Dann solltes es auch om FF klappen.
Hat leider nur bedingt geklappt. Der Footer wird nun korrekt unter dem Content und der Sidebar angezeigt, allerdings ist der weiße Hintergrund des übergeordneten Containers immer noch nicht bis zum Footer sichtbar.
-
Servus,
Setze hier ein Element was das Float wieder aufhebt. Z.B. ein <BR> mit der Eigenschaft clear:both;
Um Himmels Willen, bitte nicht! Warum ein zusätzliches, sinnfreies Element einfügen, wenn der Footer gerade danach schreit, die passende Eigenschaft zu erhalten?
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|-
Um Himmels Willen, bitte nicht! Warum ein zusätzliches, sinnfreies Element einfügen, wenn der Footer gerade danach schreit, die passende Eigenschaft zu erhalten?
Keine Angst, hab das clear schon zum Footer gepackt ;)
-
Moin
Um Himmels Willen, bitte nicht! Warum ein zusätzliches, sinnfreies Element einfügen, wenn der Footer gerade danach schreit, die passende Eigenschaft zu erhalten?
Keine Angst, hab das clear schon zum Footer gepackt ;)
ähäm, grade nochmal getestet. Es _muss_ ein extra Element vor dem schliessenden <DIV>-Tag des umgebenden Divs hinein. Dann funktioniert es. Allein den Footer auf clear:both zu setzen bringt nicht den gewünschten Erfolg.
Also ungefähr so:
</UL>
</div>
<br style="clear:both">
</div>
<div style="clear:both; width: 740px; height: 18px; padding: 8px 20px 20px; 20px; background: #FFF url('footer.gif') no-repeat; font-size: x-small;">Footer</div>
</div>Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Servus,
ähäm, grade nochmal getestet. Es _muss_ ein extra Element vor dem schliessenden <DIV>-Tag des umgebenden Divs hinein.
Nö. Was ist denn bei deinem Test unerwartetes passiert?
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|-
Moin
Servus,
ähäm, grade nochmal getestet. Es _muss_ ein extra Element vor dem schliessenden <DIV>-Tag des umgebenden Divs hinein.
Nö. Was ist denn bei deinem Test unerwartetes passiert?Gruss
PatrickDas sich mit einem clear:both des Fotters die Box um die beiden gefloateten Elemente nicht erweitert hat. erst wenn ich innerhalb der umgebenden Box das Float aufhebe, erweitert sich der Div wie erwartet. Probiers einfach aus und du wirst den Effekt im FF sehen.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
-
Moin
Servus,
Setze hier ein Element was das Float wieder aufhebt. Z.B. ein <BR> mit der Eigenschaft clear:both;
Um Himmels Willen, bitte nicht! Warum ein zusätzliches, sinnfreies Element einfügen, wenn der Footer gerade danach schreit, die passende Eigenschaft zu erhalten?Gruss
PatrickSorry mein fehler. Hast natürlich recht.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
Hello out there!
ich hab ein Problem mit folgendem Code:
Ich auch. Der ist mir zu unübersichtlich.
Tätige Style-Angaben _nie_ in 'style'-Attributen, sondern _immer_ zentral ('style'-Element oder externes Stylesheet).
P.S.: Das ganze ist natürlich nur Entwurfs-Code, also nicht über die CSS-Befehle im HTML-Code wundern.
Gerade in der Entwurfsphase kommt es auf übersichtlichen Code an.
Und warum solltest du dir doppelte Arbeit machen wollen anstatt es gleich richtig[tm] zu tun?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe) -
Servus,
Um es verständlicher zu machen, hab ich mal 2 Screenshots gemacht:
Ist sicher nur ne kleine CSS-Ergänzung, nur komm ich nicht drauf und verzwifel grad etwas. Darum danke ich euch bereits im Vorraus für eure Hilfe.
Schonmal das Archiv gefragt?
P.S.: Das ganze ist natürlich nur Entwurfs-Code, also nicht über die CSS-Befehle im HTML-Code wundern.
Ne, über die CSS-Befehle wunder ich mich bestimmt net, die gibts ja schließlich garnicht. Was du meinst sind Inline-Styles, und die sind auch für 'Entwürfe' ungeeignet, weil unübersichtlich.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:| -
Danke an alle, habs hinbekommen!