nicht angemeldet
bei float funzt background definition nicht
hallo zusammen,
Habe folgendes Problem: und zwar habe ich folgende div-Aufteilung
<div id="all">
<div id="header"></div>
<div id="main">
<div id="menu">
<div id="mainmenu"></div>
<div id="submenu"></div>
</div>
<div id="content">
<div id="cont"></div>
</div>
</div>
<div id="bottom"></div>
</div>
div#main hat ein background-image, was y-wiederholt werden soll, wenn sich in div "cont" der inhalt mehrt. div#menu und div#content werden beide left-gefloatet - allerdings wird da im #main das Hintergrundbild nicht angezeigt. Wenn ich das float rausnehme dann gehts. Wieso ist das so? Kann mir da mal bitte einer mit helfen, das ganze bremst mich schon seit mehreren Stunden aus.
Viele Grüße
-
probiere einmal bei den main container auch zu floaten. Dies hat bei mir auch schon geholfen.
hallo zusammen,
Habe folgendes Problem: und zwar habe ich folgende div-Aufteilung
<div id="all">
<div id="header"></div>
<div id="main">
<div id="menu">
<div id="mainmenu"></div>
<div id="submenu"></div>
</div>
<div id="content">
<div id="cont"></div>
</div>
</div>
<div id="bottom"></div>
</div>div#main hat ein background-image, was y-wiederholt werden soll, wenn sich in div "cont" der inhalt mehrt. div#menu und div#content werden beide left-gefloatet - allerdings wird da im #main das Hintergrundbild nicht angezeigt. Wenn ich das float rausnehme dann gehts. Wieso ist das so? Kann mir da mal bitte einer mit helfen, das ganze bremst mich schon seit mehreren Stunden aus.
Viele Grüße
-
Hilft leider alles nix. Da muß eben wieder die gute alte Tabelle herhalten. Trotzdem Danke.
-
Seid gegrüßt!
Hilft leider alles nix. Da muß eben wieder die gute alte Tabelle herhalten. Nicht so schnell die Flinte ins Korn werfen, vom probieren ist noch keiner dümmer geworden. Und Tabellen sind definitionsgemäß für tabellarische Daten, _nicht_ aber für Layoutzwecke.
--
Bis Später
RuD
________________________________________________________________
SelfCode: ie:% fl:( br:^ va:) ls:< fo:| rl:( n4:& ss:) de:> js:| ch:| mo:| zu:)-
Nicht so schnell die Flinte ins Korn werfen, vom probieren ist noch keiner dümmer geworden. Und Tabellen sind definitionsgemäß für tabellarische Daten, _nicht_ aber für Layoutzwecke.
naja, was heißt schnell. Ich sitze schon seit ner ganzen Weile an dem Problem, und so wie ich das sehe gibts wohl keine einfachere Lösung als für den Teil eben ne Tabelle zu nehmen. Alles andere würde warscheinlich in nen wilden CSS-Dschungel aus extra Browser-Hacks und unsichtbaren clear-Elementen führen aus dem ich nicht wieder rausfinde.
Ich bin zwar kein Fan von Tabellen, aber umgebracht haben sie auch noch keinen.
cheers
-
»»Alles andere würde warscheinlich in nen wilden CSS-Dschungel aus extra Browser-Hacks und unsichtbaren clear-Elementen führen aus dem ich nicht wieder rausfinde.
Dan mach ein "sichtbares" clear-Element:
<div id="all">
<div id="header"></div>
<div id="main">
<div id="menu">
<div id="mainmenu"></div>
<div id="submenu"></div>
</div>
<div id="content">
<div id="cont"></div>
</div><br style="clear:both" />
</div>
<div id="bottom"></div>
</div>-
»»Alles andere würde warscheinlich in nen wilden CSS-Dschungel aus extra Browser-Hacks und unsichtbaren clear-Elementen führen aus dem ich nicht wieder rausfinde.
Dan mach ein "sichtbares" clear-Element:
<div id="all">
<div id="header"></div>
<div id="main">
<div id="menu">
<div id="mainmenu"></div>
<div id="submenu"></div>
</div>
<div id="content">
<div id="cont"></div>
</div><br style="clear:both" />
</div>
<div id="bottom"></div>
</div>danke für den Tip. Hat aber leider nicht gehlfen.
grüße
-
danke für den Tip. Hat aber leider nicht gehlfen.
grüße
Dann machst Du was anderes falsch!
Hast einen Link?-
Dann machst Du was anderes falsch!
Hast einen Link?Der ganze Code (vor allem dein CSS) würde wahrscheinlich beim Lösen des Problems ganz gut helfen.
-
Dann machst Du was anderes falsch!
Hast einen Link?Der ganze Code (vor allem dein CSS) würde wahrscheinlich beim Lösen des Problems ganz gut helfen.
mal sehen:
<body>
<div id="all">
<div id="header"></div>
<div id="main">
<div id="menu">
<div id="mainmenu"></div>
<div id="submenu"></div>
<div id="content">
<div id="cont"></div>
</div>
<div id="bottom"></div>
</div>
</body>css:
body {
margin:0px;
padding:0px;
font-size:11px;
font-family:"Tahoma", Arial, sans-serif;
line-height:140%;
background-image:url(images/site/content/main_bg.jpg);
background-repeat:repeat-x;
background-color:#E3EDF6;
}#all {
width:934px;
height:auto;
position:absolute;
left:50%;
margin-left:-500px;
}#header {
width:934px;
height:253px;
background-image:url(images/site/content/header.jpg);
background-repeat:no-repeat;
}#main {
width:934px;
height:auto;
background-image:url(images/site/content/center_bg.jpg);
background-repeat:repeat-y;
}/* ----- MENU ----- */
#menu {
width:326px;
height:410px;
background-image:url(images/site/content/menu.jpg);
background-repeat:no-repeat;
float:left
}/* ----- CONTENT ----- */
#content {
width:608px;
height:410px;
background-image:url(images/site/content/content.jpg);
background-repeat:no-repeat;
float:left
}#cont {
position:relative;
top:auto;
left:auto;
z-index:1;
width:500px;
height:auto;
margin:25px 0px 0px 45px;
}/* ----- BOTTOM ----- */
#bottom {
width:934px;
height:146px;
margin-top:-52px;
background-image:url(images/site/content/bottom.jpg);
background-repeat:no-repeat;
clear:both
}die bilder sind ja erstmal unwesentlich.
grüße
-
Ich habe deinen Code einmal etwas gestutzt, weil bei einem kleineren Auflösung der Inhalt links verschwand.
Damit das Hintergrundbild angezeigt wird, muss der #main Container auch gefloatet werden. (Beachte, dass repeat-y nach unten ist)
Hier mein Code:
<html> <head> <style type="text/css"> <!-- body { margin:0px; padding:0px; font-size:11px; font-family:"Tahoma", Arial, sans-serif; line-height:140%; background-color:#E3EDF6; } #all { width:934px; height:auto; position:absolute; left:50%; margin-left:-500px; } #header { width:934px; height:253px; } #main { width:934px; background-image:url(selfhtml.gif); background-repeat:repeat-x; float: left; } /* ----- MENU ----- */ #menu { width:326px; height:410px; float:left; /*background-color: red;*/ } /* ----- CONTENT ----- */ #content { width:608px; height:410px; float:left; /*background-color: yellow;*/ } /* ----- BOTTOM ----- */ #bottom { width:934px; height:146px; background-image:url(images/site/content/bottom.jpg); background-repeat:no-repeat; clear:both; } --> </style> </head> <body> <div id="header">HEADER</div> <div id="main"> <div id="menu">Menu</div> <div id="content">Content</div> </div> <div id="bottom">Bottom</div> </body> </html>
-
-
-
-
-
-
-
-
-
-
Seid gegrüßt!
Gefloatete Elemente haben keine Höhe, dass heißt die Box wird sich nicht erweitern, wenn die gefloatete Kind-Box mehr Inhalt hat.
--
Bis Später
RuD
________________________________________________________________
SelfCode: ie:% fl:( br:^ va:) ls:< fo:| rl:( n4:& ss:) de:> js:| ch:| mo:| zu:) -
div#menu und div#content werden beide left-gefloatet - allerdings wird da im #main das Hintergrundbild nicht angezeigt. Wenn ich das float rausnehme dann gehts. Wieso ist das so? Kann mir da mal bitte einer mit helfen, das ganze bremst mich schon seit mehreren Stunden aus.
Wenn Du div#content und div#menue floatest nimmst Du sie aus dem Fluß und div#main hat keinen Inhalt und ist somit 0 Pixel hoch. Ein Hintergrundbild kann da nat. nicht angezeigt werden!
Lesetip: http://www.positioniseverything.net/easyclearing.html
P.s.: mit dem MSIE müßte das Hintergrundbild eigentlich zu sehen sein...
-
Hallo konsument,
div#menu und div#content werden beide left-gefloatet - allerdings wird da im #main das Hintergrundbild nicht angezeigt. [...] Kann mir da mal bitte einer mit helfen, das ganze bremst mich schon seit mehreren Stunden aus.
Im Hinterkopf schwebt mir eine dunkle Erinnerung, dass man dieses Problem mit der
overflow-Eigenschaft ändern kann. Setze diese für das betreffende Element auf:div#betreffendes_element { /* Weitere CSS-Angaben */ overflow: hidden; }Mit freundlichen Grüßen,
Steffen Bruchmann--
Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}