nicht angemeldet
Kein Hintergrund ohne float:left
Gunnar BittersmannGuten Abend,
Bei mir trat heute folgendes Problem auf: Ich möchte gerne meinen div Layer, in dem der ganze Content enthalten ist, horizontal zentriert haben. Er hat einen Hintergrund, doch dieser wird leider nicht angezeigt. Wenn ich aber "float:left" einsetze, funktioniert's, aber der Layer ist nicht zentriert, sondern linksbündig.
-------- index.htm --------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
...
</div>
</body>
</html>
-------- style.css --------------------------------------------------------
* {
margin:0px;
padding:0px;
}
html, body {min-height:100px; width:100%;}
body {
font-family:tahoma;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
margin-left:auto;
margin-right:auto;
}
div#wrapper {
width:875px;
height:100%;
background-image:url(images/bg.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
}
Schönen Abend noch, Mikey
-
Hi,
Bei mir trat heute folgendes Problem auf: Ich möchte gerne meinen div Layer, in dem der ganze Content enthalten ist, horizontal zentriert haben. Er hat einen Hintergrund, doch dieser wird leider nicht angezeigt. Wenn ich aber "float:left" einsetze, funktioniert's, aber der Layer ist nicht zentriert, sondern linksbündig.
den wesentlichsten Teil Deines Codes hast Du ausgelassen: den Inhalt. Er ist komplett gefloatet, richtig? Damit ist die Höhe des Container-Elements 0, da Du die overflow-Eigenschaft auf "visible" gelassen hast.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Okay vielen Danke für eure Antworten, war wohl gestern zu müde. :S
Jetzt nur noch eine Frage, und zwar:
Ich möchte, dass auch wenn nur wie im Beispiel "..." enthalten ist, dass die Seite 100% Höhe annimmt.mit
body, html {height:100%;width:100%;} div#wrapper { width:875px; height:100%; background-image:url(images/bg.gif); background-repeat:repeat-y; margin-left:auto; margin-right:auto; }Klappt das ja auch schon super, aber sobald so viel Text enthalten ist, dass gescrollt werden muss, bricht der Hintergrund ab?
Schönen Samstag noch,
Mikey
-
Hi,
Klappt das ja auch schon super, aber sobald so viel Text enthalten ist, dass gescrollt werden muss, bricht der Hintergrund ab?
logisch - 100% bezieht sich hier auf die Fensterhöhe.
Warum gibst Du das Hintergrundbild nicht einfach body und verzichtest auf Höhen und Breitenangaben für html und body?freundliche Grüße
Ingo-
Vielen Dank für deinen Tipp Ingo, so einfach hatte ich gar nicht gedacht. Es klappt :-)
Doch einen kleinen Fehler gibt es noch:
Wenn ich jetzt das Fenster klein ziehe, so verschiebt der Hintergrund sich "nach links".http://vivax.bplaced.net/design/index2.htm
-
Hi,
Doch einen kleinen Fehler gibt es noch:
Wenn ich jetzt das Fenster klein ziehe, so verschiebt der Hintergrund sich "nach links".http://vivax.bplaced.net/design/index2.htm
ich sehe keinen Sinn in einer schwarzen Hintergrundgrafik bei schwarzer Hintergrundfarbe und auch keinen solchen Effekt.
freundliche Grüße
Ingo
-
-
-
-
-
@@Mikey:
Er hat einen Hintergrund, doch dieser wird leider nicht angezeigt.
Doch, das wird er. In voller Höhe der 'div'-Box. Hat diese keinen Inhalt, ist deren Höhe 0. Bei dem von dir angegebenen Quelltext hat sie den Inhalt "...", folglich ist auch eine Zeilenhöhe Hintergrundbild zu sehen.
„Der Prozentwert wird relativ zur Höhe des umschließenden Blocks der erzeugten Box berechnet. Wird die Höhe des umschließenden Blocks nicht explizit angegeben (das heißt, ist sie demnach von der Inhaltshöhe abhängig), wird der Wert als 'auto' interpretiert.“ [CSS2 §10.5]
Dieser Fall ist gegeben, da du für die umschließende 'body'-Box keine Höhe angegeben hast.
Vielleicht möchtest du
div#wrapper {min-height: 100px}setzen.Wenn ich aber "float:left" einsetze, funktioniert's
??
aber der Layer ist nicht zentriert, sondern linksbündig.
Das sollte nicht verwundern.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)