nicht angemeldet
Anzeigebereich über gesamte Höhe mit CSS
Servus!
Ich habe eine kleines Problem mit meiner neu zu erstellenden Internetseite, die ich mit XHTML und CSS erstellen möchte.
Zur Vorabinfo: Aussehen soll das ganze ungefähr so: http://home.arcor.de/diefoerster/seilklettern.htm
Die Seite hatte ich mal erstellt, allerdings mit Tabellen.
Ich möchte einen festen Anzeigebereich mit 800px Breite definieren, der immer mittig im Browser angezeigt wird und ggf. horizontal zu scrollen ist, falls der Browser zu klein ist. Mit dem Einfügen von div.Tags hat das auch schon ganz gut geklappt.
Der Anzeigebereich soll eine vom Hintergrund unterschiedliche Farbe (z.B grau) erhalten und immer! von oben bis unten im Browser komplett angezeitgt werden. Das Problem: Bei fehlender Definition einer Höhe hört der Bereich unterhalb des hier geschriebenen Textes auf und geht nicht bis ganz unten. Bei Definition der Höhe zu 100% wird dann ein längerer zu scrollender Anzeigebereich bei mehr Text nicht mehr grau hinterlegt.
Habe schon einiges probiert, aber bisher keine gute Lösung gefunden.
Ich hoffe, ihr versteht das Problem und könnt mir weiterhelfen.
Gruß Arnold
-
Hallo Arnold
Der Anzeigebereich soll eine vom Hintergrund unterschiedliche Farbe (z.B grau) erhalten und immer! von oben bis unten im Browser komplett angezeitgt werden.
Also soll der Bereich nicht genau 100% sondern _mindestens_ 100% Höhe haben. Wie wäre es denn da mit min-height?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
hätte ich geahnt, daß Du hier dran bist, hätte ich gleich die Finger weg gelassen:-)
Also soll der Bereich nicht genau 100% sondern _mindestens_ 100% Höhe haben. Wie wäre es denn da mit min-height?
Du meinst:
<div style="margin:0 auto; background:green; width:800px; min-height:100%;"> ~~~? Funktioniert leider genau so wenig wie mein Vorschlag. Ich hatte hier [diese](http://forum.de.selfhtml.org/archiv/2006/9/t136589/) Diskussion im Hinterkopf, aber da ging es um einen gekachelten Hintergrund. Das Hintergrundproblem des OP kann ich bei einem einfachen DIV mit HG-Farbe gar nicht nachvollziehen, das Problem der vollen Höhe ist noch ungelöst, oder denke ich irgenwie falsch? Arnold, könntest Du bitte Deinen bisherigen Ansatz posten (grob die HTML-Struktur und CSS des zentrierten DIV)? Shepard-
Hallo Detlef, hallo Shepard,
nachfolgend die erste Möglichkeit absoluter Position, 100% Höhe und Trick zur hor. Zentrierung. Leider hat aber die Zentrierung den Fehler, da die Elemente bei zu kleinem Fenster links abgeschnitten werden...
html:
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}
-->
</style>
<link href="test.css" rel="stylesheet" type="text/css" />
</head><body>
<div align="center" id="container">
<div id="banner"><img src="../../LKU/Internet/images/top6.jpg" alt="Banner" width="766" height="135" /></div>
<div id="center">Raum für den Inhalt von id "center"</div>
<div id="bottom">
<p>mm</p>
</div>
</div>
</body>CSS:
#container {
width: 766px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: -383px;
background-color: #FFFFFF;
position: absolute;
top: 0px;
height: 100%;
bottom: 0px;
left: 50%;
}
#banner {
height: 135px;
}
#center {
}
#bottom {
background-color: #FFCC00;
z-index: 1;
}-
Nachtrag:
wenn die hor. Positionierung irgendwie anders mit "absolut" hinzubekommen wäre, dann würde mir das schon helfen.
Ich hatte vor, den inneren Container dann einfach bei längerem Text über äußeren mit 100% Höhe hinauslaufen zu lassen... -
Hallo Arnold,
anhand deines geposteten Quelltextes stelle ich mir vor, dass du es dir vielleicht so vorstellst.
XHTML:
<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>LKU Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="banner"><img src="../../LKU/Internet/images/top6.jpg" alt="Banner" width="766" height="135" /></div> <div id="center">Raum für den Inhalt von id "center"<br /></div> <div id="bottom"> <p>mm</p> </div> </div> </body> </html>CSS:
html, body { background-color: #CCC; margin: 0; padding: 0; text-align:center; height:100%; min-width: 766px; } #container { width: 766px; margin: 0 auto; background-color: #FFF; color: #000; min-height: 100%; text-align:left; position:relative; } * html #container { height:100%; } #banner { border-top: 10px solid #CCC; } #center { padding-bottom: 2em; /* Höhe von #bottom */ } #bottom { background-color: #FC0; color: #000; position:absolute; bottom: 0; left:0; right:0; width: 100%; border-bottom: 10px solid #CCC; } #bottom p { margin:0; padding: 0; }Schau es dir an und frage hier wieder nach, wenn es anders ist, als du es wolltest, oder du nicht verstehst, warum welche Eigenschaften im CSS gesetzt sind.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
danke für die Mühe! Das ist genau das, wonach ich gesucht habe! Danke.
Nur nach einem ganzen Tag probieren (ich gebe zu, habe erst vor kurzem mit css angefangen) habe ich etwas die Übersicht verloren.
Eine Sache funktioniert aber leider noch nicht ganz: wenn im "center" z.B. nur ein einzelnes Wort (oder nichts) steht, erscheint keine hor. Bildlaufleiste im Firefox. Das Bild im Banner bzw. der Text wird also von rechts abgeschnitten. Erst wenn die vert. Bildlaufleiste gebraucht wird, erscheint auch die horizontale.
Nicht weiter wild, man will ja schließlich dort etwas einfügen. Aber wenn das auch noch funktionieren würde, wäre es 100% perfekt!Gruß Arne
-
Hallo Arne
Eine Sache funktioniert aber leider noch nicht ganz: wenn im "center" z.B. nur ein einzelnes Wort (oder nichts) steht, erscheint keine hor. Bildlaufleiste im Firefox.
Dann nimm das
min-width: 766px;beihtml, bodyraus. Es ist meines Wissens nur für NN7 (und kleiner) nötig. Du kannst es dann nur fürbodydefinieren, dann dürfte das nicht mehr passieren.Hast du dir das CSS angesehen, und verstehst du bei allem, warum es so definiert ist?
Gib dich nicht damit zufrieden, dass es funktioniert, sondern versuche zu verstehen, warum. Wenn nicht, frage ruhig noch einmal hier nach.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Danke Detlef,
jetzt ist es 100%ig das, was ich haben wollte. Nochmals Danke!
Habe mir die wenigen Zeilen in CSS angeschaut, etwas rumprobiert und das meiste verstanden.
Komme aber auf das Angebot zurück: bei
}
* html #container {
height: 100%;
}
verstehe ich die Schreibweise/Definition des * nicht (warum?),
außerdem, was es genau mit
}
#bottom p {
margin: 0;
padding: 0;
}
auf sich hat.Besten Dank schon mal im Voraus!
Arne
-
Hallo Arne
- html #container {
height: 100%;
}> verstehe ich die Schreibweise/Definition des \* nicht (warum?), ... Das selektiert ein Element mit der Id container innerhalb des html-Elements, welches innerhalb eines beliebigen Elements steht(\* = Universalselektor). Nur IEs sind so blöd anzunehmen, dass html ein Vorfahrenelement haben könnte. Damit wirkt der Selektor nur für IEs bis Version 6. Diese kennen kein `min-height`{:.language-css}, verhalten sich bei `height`{:.language-css} aber so, als ob es `min-height`{:.language-css} wäre (solange keine Angaben zu `overflow`{:.language-css} erfolgen). Kurz gesagt wird mittels [Star-HTML-Hack](http://de.selfhtml.org/css/layouts/browserweichen.htm#star_html_hack) `height`{:.language-css} als `min-height`{:.language-css} Ersatz für IE <= 6 gesetzt. > ... außerdem, was es genau mit > ~~~css #bottom p { > margin: 0; > padding: 0; > }auf sich hat.
Damit wird
marginundpaddingdes Absatzes (p) in #bottom auf 0 gesetzt. In dem Beispiel nur, um ein identisches Aussehen in verschiedenen Browsern zu erreichen. Browser haben unterschiedliche Defaultwerte fürmarginundpaddingbei p-Elementen. Je nachdem, was dein #bottom dann enthalten wird und wie genau es aussehen soll, kann dies auch entfallen oder ganz andere Werte bekommen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
Hallo Shepard
Du meinst:
<div style="margin:0 auto; background:green; width:800px; min-height:100%;">
Das funktioniert in Browsern wunderbar, natürlich nur, wenn html und body auch `height:100%`{:.language-css} (und `margin:0`{:.language-css} und `padding:0`{:.language-css}) haben. Dass dies beim OP bereits geschehen ist, davon konnte ich ausgehen, weil: > ... Bei Definition der Höhe zu 100% wird dann ein längerer zu scrollender Anzeigebereich bei mehr Text nicht mehr grau hinterlegt. Der IE bis Version 6 kennt zwar kein `min-height`{:.language-css}, er interpretiert `height`{:.language-css} aber als `min-height`{:.language-css}, zumindest, wenn keine Angabe zu `overflow`{:.language-css} erfolgt. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!-
natürlich nur, wenn html und body auch
height:100%(undmargin:0undpadding:0) haben.Hilfe! Wie oft vergesse ich das noch? In meinen Standard-Styles steht es immer drin, sobald ich hier ein Forums-Problem nachstelle, vergesse ich es:-(
Shepard
-
-
Leider funktioniert die Variante mit min-height bei mir nicht bzw. nur, wenn das Div mit absoluter Position definiert ist. Da tritt dann das bereits gepostete Problem des Abschneidens auf.
Bei relativer Positionierung zeigt sich bei mir keinerlei Veränderung...
-
-
-
Hallo,
Bei fehlender Definition einer Höhe hört der Bereich unterhalb des hier geschriebenen Textes auf und geht nicht bis ganz unten. Bei Definition der Höhe zu 100% wird dann ein längerer zu scrollender Anzeigebereich bei mehr Text nicht mehr grau hinterlegt.
Verpaß dem dem horizontal zentrierten Element (vermutlich ein DIV), einmal "position:relative; top:0;"
Shepard