nicht angemeldet
mozilla - anzeige des background-image nur bei height-angabe
hallo liebes forum,
hier zum sonntagabend ein wohl ziemlich spezielles problem:
ich bastle eine xhtml1.1-konforme seite auf div/css-basis, bei welcher der inhaltsbereich immer eine mindesthöhe haben soll (unabhängig von der 'länge' des inhalts). falls der inhalt zunimmt soll der inhaltsbereich dynamisch mitwachsen.
funktioniert soweit auch ganz gut (in ie's und opera's), einzig die mozillas (1.4 sowie neuster firefox) zeigen bei mehr inhalt die background-images nur bis zur min-height-angabe an und hören danach auf.
das selbe problem gibts wenn ich statt min-height height nehme - wohl weil er die umschließenden div's nicht an die grösse des inhalts anpasst. ohne eine dieser beiden angaben sind die hintergrundbilder gar nicht zu sehen, wegen der verschachtelung kann ich auch keine unsichtbareninhalte reinsetzen, welche sonst abhilfe schaffen könnten.
da die inhaltsmengen nicht vorhersehbar sind und ich einfach keine festen height-angaben machen kann, suche ich nun nen weg das irgendwie hinzubasteln.
----------------------------------
hier die links zum anschauen
----------------------------------
nur mindesthöhe:
http://typo3.formfall.de/fileadmin/formfall/normal.html
mit mehr inhalt:
http://typo3.formfall.de/fileadmin/formfall/mitmehrinhalt.html
----------------------------------
und nochmal der quelltext
----------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>testseite</title>
<style type="text/css">
body { font:12px tahoma,arial,sans-serif; margin:30px 5px 10px 5px; text-align:center; }
#unten_streifen { width:975px; margin-left:auto; margin-right:auto; background: url(graphik/i_unten_streifen.gif); }
#unten { width:975px; min-height:400px; background: url(graphik/i_unten_bg.gif) no-repeat; }
#unten2 { width:975px; min-height:400px; background: url(graphik/i_unten_formfall.gif) left bottom no-repeat; }
#unten_links { width:162px; min-height:400px; float:left; }
#unten_inhalt { width:813px; min-height:400px; float:left; background: url(graphik/i_unten_unten.gif) left bottom no-repeat; }
#unten_inhalt2 { width:813px; min-height:400px; background: url(graphik/i_unten_oben.gif) right top no-repeat; }
#mindesthoehe_ie { width:1px; height:400px; float:left; }
#inhalt { width:800px; min-height:400px; float:left; }
</style>
</head>
<body>
<div id="unten_streifen">
<div id="unten">
<div id="unten2">
<div id="unten_links"> </div>
<div id="unten_inhalt">
<div id="unten_inhalt2">
<div id="mindesthoehe_ie"></div>
<div id="inhalt">
<br /><br /><br /><br />inhalt<br /><br /><br /><br />
<br /><br /><br /><br />inhalt<br /><br /><br /><br />
<br /><br /><br /><br />inhalt<br /><br /><br /><br />
<br /><br /><br /><br />inhalt<br /><br /><br /><br />
<br /><br /><br /><br />inhalt<br /><br /><br /><br />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------
nich über die vielen verschachtelten div's wundern, hab die ganzen vielen hintergrundbilder für den rahmen sonst nicht untergekriegt ;)
besten dank schonmal,
jan.
-
Hi,
min-height geht nur bei Netscape. Nimm doch einfach height und wenn der Inhalt größer als benötigt wird, dehnt sich das div glaube ich automatisch aus.mfg hans
-
Moin!
min-height geht nur bei Netscape.
Falsch. Der Opera 7.23 und der Mozilla 1.4 interpretieren das auch. ;-)
tschüss ichen--
Selfcode: sh:( fo:| br: n4:& ie:% mo:| mo:| de:] zu:) fl:| ss:| ls:[ js:|
-
-
Hallo
das selbe problem gibts wenn ich statt min-height height nehme
damit kannst du das als ursache wahrscheinlich ausschließen
wohl weil er die umschließenden div's nicht an die grösse des
inhalts anpasstrichtig.
- das besagte Hintergrundbild liegt in #unten_streifen
- der besagte Inhalt liegt in #inhalt innerhalb von #unten_streifen
- #inhalt ist aber gefloatet
- damit nimmst du diesen Container aus dem Elementfluss
- und darum passt sich #unten_streifen nicht an die Ausdehnungen von
#inhalt an - die Lösung leigt in der CSS-Eigenschaft "clear"
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear
nich über die vielen verschachtelten div's wundern, hab die ganzen
vielen hintergrundbilder für den rahmen sonst nicht untergekriegt ;)Die Technik mit der du die Hintergrundbilder versuchst zu positionieren, ist dein eigentliches Hauptproblem (du benötigst kein
float):
http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htmmfg NAG
--
signatur -
Hi,
ich bastle eine xhtml1.1-konforme seite auf div/css-basis
ohje... warum 1.1? und was hat das mit "div" zu tun?
</div>
</div>
</div>
</div>
</div>
</div>So etwas ist kein sinnvolles MarkUp - da wärst Du besser bei einer Tabelle geblieben. Versuche doch einmal, mit möglichst wenigen DIV auszukommen und verwende eine sinnvolle XHTML-Auszeichnung. Wenn Du etwas suchst, wirst Du sicherlich eine Menge sinnvoller Elemente finden.
freundliche Grüße
Ingo