hintergrundbild kachelt nicht bis ganz runter

[stephanie]

Hallo Leute!
Nach tagelangem Probieren, Studieren von anderen Forumsbeiträgen und Verzweiflungsanfällen wende ich mich nun an euch.

Ich hab eine CSS-Seite programmiert. Oben kommt eine Flashdatei rein, im unteren Bereich teilen sich menü und content die Fläche in der vertikalen. Rundherum hab ich ein weiteres div eingebaut, welches garantiert, dass der mittlere Bereich immer bis runtergezogen wird (die eigentliche Seite ist nur 760 breit), auch wenn der Inhalt nicht die ganze Seitenhöhe braucht. Außerdem hab ich in diesem div auch ein HG-Bild untergebracht, welches sich auch bis unten durchkachelt. Gut, das hat ja alles funktioniert, bis ich dann versucht habe, mal mehr Text in den content zu laden. IE kachelt das HG-Bild bis unten hin, aber alle anderen Browser nicht. Kann mir irgendwer sagen, wie ich dieses Problem aus der Welt schaffen kann?

Vielen Dank schon mal!
Liebe Grüße
stephanie

Anbei der CSS-Code und der HTML-Quellcode:

/*angaben, die für den ganzen body gelten*/
body, html {
  font-family:verdana;
  font-size:10px;
  background-color:#330000;
  text-align:center;
  margin:0px;
 padding:0px;
 height:100%;
  scrollbar-base-color:#000000;
  scrollbar-3d-light-color:#666666;
  scrollbar-arrow-color:#333333;
  scrollbar-darkshadow-color:#000000;
  scrollbar-face-color:#000000;
  scrollbar-highlight-color:#333333;
  scrollbar-shadow-color:#000000;
  scrollbar-track-color:#333333;
}

/*schließt alle div-container zusammen*/
#aussenrum {
 background-color:#123456;
 margin:0px auto;
 padding:0px;
 width:760px;
 height:100%;
 background-image: url(bilder/bg_raw.jpg);
 background-repeat: repeat-y;
 background-attachment: fixed;
 background-position: top;
}

/*extrawurst für den internet explorer*/
* html #aussenrum {
 height:100%
}

/*beinhaltet die flash-datei*/
#titel {
 background-color:#456789;
 width:760px;
 padding:0px;
 height:267px;
 margin:0px;
}

/*legt das inhaltsfenster fest*/
#mittelbereich {
 width:585px;
 height:auto;
 float:right;
 padding:0px;
 margin:0px;
}

/*legt das inhaltsfenster fest*/
#content {
 background-color:transparent;
 width:585px;
 height:auto;
 float:right;
 padding:0px;
 font-size:9px;
 line-height:17px;
 text-align:justify;
 color:#666666;
 font-weight:normal;
 margin:10px 0px 40px 0px;
 text-decoration:none;
}

#imcontent {
 width:485px;
 height:auto;
 padding:0px;
 margin:0px 0px 0px 15px;
}

/*legt die linke spalte fest*/
#menu {
 background-color:transparent;
 width:175px;
 height:auto;
 margin:40px 0px 0px 0px;
 float:left;
}

/*class fürs menu*/
.menucontainer {
 /*border:1px solid transparent;*/
 width:105px;
 margin:0px 0px 0px 68px;
}

/*legt die zeile fürs untermenü fest*/
#untermenu {
 /*border:1px solid transparent;*/
 width:585px;
 height:40px;
 float:right;
 padding:44px 0px 0px 0px;
}

/*class füs untermenü (rechts)*/
.untermenucontainer {
 /*border:1px solid transparent;*/
 background-color:transparent;
 margin:0px;
 padding:0px 0px 0px 250px;
}

/*wie verhalten sich die links allgemein im dokument*/
a:link, a:visited {
 text-decoration:none;
 font-weight:bold;
 color:#666666;
}

a:hover {
 text-decoration:none;
 font-weight:bold;
 color:#ffffff;
}

/*wie verhalten sich links in der hauptnavigation; a:link, a:visited und a:hover fürs menü*/
a.menu {
 display:block;
 margin:2px;
 padding:3px;
 border:1px solid #000000;
 background-color:#111111;
 text-align:left;
 color:#666666;
 text-decoration:none;
}

a.menu:link, a.menu:visited {
 background-color:#111111;
 text-align:left;
 color:#666666;
 text-decoration:none;
}

a.menu:hover {
 background-color:transparent;
 border:1px solid #ffffff;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

/*wie verhält sich der link auf seiner seite*/
a.menuactiv {
 display:block;
 margin:2px;
 padding:3px;
 border:1px solid #ffffff;
 background-color:transparent;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

a.menuactiv:link, a.menuactiv:visited {
 background-color:transparent;
 border:1px solid #ffffff;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

a.menuactiv:hover {
 background-color:transparent;
 border:1px solid #ffffff;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

/*wie verhalten sich links in der unternavigation; a:link, a:visited und a:hover fürs untermenü*/
a.sub {
 display:inline;
 padding:0px;
 margin:0px;
 text-align:left;
 color:#333333;
 text-decoration:none;
}

a.sub:link, a.sub:visited {
 text-align:left;
 color:#333333;
 text-decoration:none;
}

a.sub:hover {
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

/*h1-h3 zum formatieren*/
h1 {
 font-size:9px;
 color:#666666;
 font-weight:normal;
 margin-bottom:0px;
}

h2 {
 font-size:9px;
 color:#666666;
 font-weight:bold;
 margin-bottom:0px;
}

h3 {
 font-size:15px;
 color:#ffffff;
 font-weight:bold;
 margin-bottom:0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="language" content="de">
<meta name="keywords" content="abcde">
<meta name="description" content="abcde">
<meta name="author" content="abcde">
<meta name="copyright" content="abcde">
<meta name="reply-to" content="[e-mail]" >
<meta name="robots" content="index">
<meta name="document-type" content="Web Page">
<link rel="stylesheet" type="text/css" href="neu2.css">
</head>

<body>
<!-- äusserster bereich -->
<div id="aussenrum">
<!-- container für flash-datei -->
<div id="titel">titel</div>
<!--container für navigation -->
<div id="menu">
<div class="menucontainer">
 <a class="menuactiv" href="#">Neues</a>
    <a class="menu" href="#">Archiv</a>
    <a class="menu" href="#">Media</a>
    <a class="menu" href="#">Forum</a>
    <a class="menu" href="#">Eventkalender</a>
    <a class="menu" href="#">Kontakt</a>
 <a class="menu" href="#">Links</a>
    <a class="menu" href="#">Sponsoren</a>
    <a class="menu" href="#">AGB's</a>
</div>
</div>

<div id="mittelbereich">
<!-- container für mittelbereich -->

<!-- container für untermenü -->
<div id="untermenu">
<div class="untermenucontainer">
 <a class="sub" href="#">[ Flyer ]</a>
    <a class="sub" href="#">[ Tickets ]</a>
    <a class="sub" href="#">[ Location ]</a>
</div>
</div>
<div id="content">
<!-- verschachteltes div für text im mittelbereich -->
<div id="imcontent">
<h3>Ich bin eine Überschrift</h3><br>
text
</div>

</div>
<!-- mittelbereich end-tag -->
</div>
<!-- äusserster bereich end-tag -->
</div>

</body>
</html>

[Thomas J.S.]

Hallo,

Nach tagelangem Probieren, Studieren von anderen Forumsbeiträgen und Verzweiflungsanfällen wende ich mich nun an euch.

Ich hab eine CSS-Seite programmiert. [...]Außerdem hab ich in diesem div auch ein HG-Bild untergebracht, welches sich auch bis unten durchkachelt. Gut, das hat ja alles funktioniert, bis ich dann versucht habe, mal mehr Text in den content zu laden. IE kachelt das HG-Bild bis unten hin, aber alle anderen Browser nicht. Kann mir irgendwer sagen, wie ich dieses Problem aus der Welt schaffen kann?

In deinem CSS ist so vieles vermurkst. Sinnfrei floats mit mekrwürdigen Anordnungen der <div>s, wenn du  das Hintergrundbild bis nach untendurch wiederholst, wozu dann ein "background-attachment: fixed;"??
Etc.

Ich würde vorschlagen, dass du zuerst ein wenig deinen Code bereinigst (wozu float:richt, wenn gut gesetzte float:lefts alles richtig stellen würden?)

Grüße
Thomas

[stephanie]

So, wenn ich dich richtig verstanden habe, dann meinst du, dass ich im div-aussenrum eine min-height angeben sollte, die alle anderen Browser anspricht und dann bei der Extra-Wurst für den IE nur die height angebe, weil der die min-height ja nicht kennt. Soweit richtig?
Gut, das hab ich aber auch schon probiert, aber dann hats mir den Hintergrund in gar keinem Browser mehr dargestellt!
Mit <br> bis unten hin auffüllen ist doch auch nicht das gelbe vom Ei und meiner Meinung nach eine sehr unschöne Programmierung. Da muss es doch noch irgend eine andere Möglichkeit geben um zu diesem Ziel zu kommen!
Ich würde mich jedenfalls über weitere Vorschläge und Tipps sehr freuen!

lg, stephanie

[Thomas J.S.]

Hallo,

So, wenn ich dich richtig verstanden habe, dann meinst du, dass ich im div-aussenrum eine min-height angeben sollte, die alle anderen Browser anspricht und dann bei der Extra-Wurst für den IE nur die height angebe, weil der die min-height ja nicht kennt. Soweit richtig?

Ja, das hat Ingo gemeint.

Gut, das hab ich aber auch schon probiert, aber dann hats mir den Hintergrund in gar keinem Browser mehr dargestellt! [...]
Ich würde mich jedenfalls über weitere Vorschläge und Tipps sehr freuen!

Jetzt ist mir eingefallen: mache es so:
---------------------
#aussenrum {
 width:760px;
 height:100%;
 min-height:100%;
 margin-left:auto;
 margin-right:auto;
 background:url(bilder/bg_raw.jpg)  repeat-y fixed;
 background-color:#123456;
}
div[id]#aussenrum { height:auto; }
---------------------

Damit funktioniert im IE, Firefox und Opera.

Grüße
Thomas

Grüße
Thomas

[Ingo Turski]

Hi,

Jetzt ist mir eingefallen: mache es so:

#aussenrum {
width:760px;
height:100%;
min-height:100%;
margin-left:auto;
margin-right:auto;
background:url(bilder/bg_raw.jpg)  repeat-y fixed;
background-color:#123456;
}
div[id]#aussenrum { height:auto; }

das hat denselben Effekt wie:

#aussenrum {
min-height:100%;
}
* html #aussenrum {
height:100%
}

und sollte auch genauso funktionieren bzw. bei irgendwelchen unterschlagenen Fehlern nicht funktionieren.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

/*schließt alle div-container zusammen*/
#aussenrum {
height:100%;
}

/*extrawurst für den internet explorer*/
* html #aussenrum {
height:100%
}

wo siehst Du hier eine "extrawurst"? Scha Dir den Orioginalcode an und Du solltest einen entscheidenden Unterschied entdecken.
Tip: das Element ist hierdurch 100% so hoch wie das Fenster - nur der IE erweitert es bei Bedarf. Andere Browser kennen jedoch eine nicht ganz so endgültige Eigenschaft...

freundliche Grüße
Ingo

[stephanie]

Also das mit float:left und float:right ist doch nicht so unüblich, oder? Generell würd ich dann aber, wenn ihr mir schon nicht mit dem HG-Bild helfen könnt, wissen, was an dem CSS-Code alles vermurkst ist?
Bin Neuling und deshalb immer froh, wenn mir jemand weiterhelfen kann!
stephanie

[Thomas J.S.]

Hallo,

Also das mit float:left und float:right ist doch nicht so unüblich, oder? Generell würd ich dann aber, wenn ihr mir schon nicht mit dem HG-Bild helfen könnt, wissen, was an dem CSS-Code alles vermurkst ist?

hier der CSS (den Rest habe ich nicht geändert)
--------------------
/*angaben, die für den ganzen body gelten*/
html, body {
 height:100%;
 margin:0px;
 padding:0px;
 font-family:verdana, sans-serif;
 font-size:10px; /*ist verdammt kelein! */
 background-color:#330000;
 text-align:center;
 scrollbar-base-color:#000000;
 scrollbar-3d-light-color:#666666;
 scrollbar-arrow-color:#333333;
 scrollbar-darkshadow-color:#000000;
 scrollbar-face-color:#000000;
 scrollbar-highlight-color:#333333;
 scrollbar-shadow-color:#000000;
 scrollbar-track-color:#333333;
}
/*schließt alle div-container zusammen*/
#aussenrum {
 width:760px;
 margin-left:auto;
 margin-right:auto;
 background:url(bilder/bg_raw.jpg)  repeat-y fixed;
 background-color:#123456;
}

/*beinhaltet die flash-datei*/
#titel {
 background-color:#456789;
 width:760px;
 height:267px;
}
/*legt die linke spalte fest*/
#menu {
 width:175px;
 margin-top:40px;
 margin-bottom:0px;
 float:left;
}
/*class fürs menu*/
.menucontainer {
 width:105px;
 margin:0px 0px 0px 68px;
}
/*legt das inhaltsfenster fest*/
#mittelbereich {
 width:585px;
 margin-top:40px;
 margin-bottom:0px;
 float:left;
}
/*legt die zeile fürs untermenü fest*/
#untermenu {
 height:40px;
}
/*class füs untermenü (rechts)*/
.untermenucontainer {
 padding-left:250px;
}

/*legt das inhaltsfenster fest*/
#content {
 margin:10px 0px 40px 0px;
 font-size:9px;
 line-height:17px;
 text-align:justify;
 color:#666666;
 font-weight:normal;
}
#imcontent {
 width:485px;
 margin-left:15px;
}
--------------------------

Das Problem lag bzw liegt am width:100% für #aussenrum. Mit dem Code von oben funktioniert es, wenn es mehr Code gibt, als das Fenster hoch ist.
Wenn nicht, ist das bereich leider auch kleiner.
Mir fällt für das HTML jetzt auch nichts ein, wie man das (außer mit <br>s) lösen könnte.

Grüße
Thomas

[Ingo Turski]

Hi,

wenn ihr mir schon nicht mit dem HG-Bild helfen könnt,

hast Du meinen Wink mit dem Zaunfahl denn wirklich nicht verstanden?
* html ist ein sog. CSS-Hack, der die nachfolgenden Regeln ausschließlich für den IE verfügbar macht. Du gibst hier nun height:100% für den IE an (der diese Angabe großzügig bei Bedarf erweitert) - aber eben auch für standardkonforme Browser. *Das* ist Dein Fehler (denn diese Angabe ist dadurch eben keine "Extrawurst" mehr, wie der Kommentar Dir ja sagen sollte) - und im Original-CSS, das Du übernommen hast - dürfte hier wohl nicht height definiert sein, sondern nur eine Mindesthöhe. Jetzt herauszufinden, wie diese Eigenschaft (die der IE ohnehin nicht kennt) heißt, überlasse ich Dir. ;-)

freundliche Grüße
Ingo