Supportnet / Forum / Webseiten/HTML
Inhalt eines <div> länger als die Bildschirmseite
Frage
Hallo supportnet´ler,
nach tagelangem Probieren, Informationsquellen studieren und an der Sache verzweifeln wende ich mich nun an euch mit einem Problem.
Ich möchte auf einer Internetseite links ein <div> haben mit den Navigation (id="navi"), daneben ein <div> mit dem eigentlichen Inhalt (id="main"). Beide zusammen liegen in einem weiteren <div> mit der id "rahmen". Das anzuordnen klappt. Da die beiden <div> "navi" und "inhalt" zusammen nicht viel mehr als 750 px haben sollen/dürfen soll bei größeren Bilschirmauflösungen rechts daneben noch ein andersfarbiger Hintergrund zu sehen sein, den ich mit einem Hintergrundbild gestalte. Das Problem: egal, was ich mache, wenn der Inhalt des rechten <div> länger ist, damit nicht vollständig auf die Bildschirmseite passt und ich dann nach unten scrolle wird der utnere Bereich des Inhalts-<div>, der zuerst nicht auf dem Bildschirm zu sehen ist, vom Hintergrundbild unterlegt, nicht von der Farbe, die ich dem Inhalts-<div> mitgebe.
Der (relevante) XHTML-Code:
[code]
<?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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Wo ist der Fehler?</title>
<link rel="stylesheet" type="text/css" href="css/basis07.css" />
</head>
<body>
<div id="rahmen">
<div id="header">
<p class="headerp">Straße<br />
PLZ Ort<br />
Adresszusatz</p>
</div>
<div id="navi">
<p>Hier steht die Navigation drin</p>
</div>
<div id="main">
<p>ganz ganz viel text</p>
</div>
</div>
</body>
</html>
[/code]
Und die relevanten Teile der CSS-Datei dazu:
[code]
body {
background: #f7ffff url(../img/bg1.jpg) repeat;
color: #006;
padding: 0;
margin: 0;
}
#header {
position: relative;
top: 0;
left: 0;
background-color: #f7ffff;
color: #006;
padding: 0;
margin: 10px;
width: 750px;
height: 120px;
}
#main {
position: absolute;
top: 160px;
left: 145px;
padding: 0;
margin: 10px;
width: 605px;
height: 100%;
background-color: #f7ffff;
overflow: visible;
}
#navi {
position: absolute;
top: 160px;
left: 0;
background-color: #f7ffff;
color: #006;
padding: 0;
margin: 10px;
width: 140px;
height: 334px;
}
p {
margin: 10px;
}
#rahmen {
position: absolute;
top: 0;
left: 0;
width: 760px;
height: 100%;
background-color: #f7ffff;
}
[/code]
Egal, was ich versucht habe: früher oder später hat das <div> "inhalt" den Hintergrund, der im <body> angegeben ist. Wie lässt sich das verhindern? Wie schaffe ich es, dass das <div> "inhalt" in voller Länge mit der ihm zugewiesenen Hintergrundfarbe dargestellt wird?
Wurde jetzt ziemlich lang, sorry, aber ich dachte, ihr solltet die relvanten Codeteile kennen.
Im Voraus bereits Danke für eure Bemühungen! :-)
Antwort 1 von rfb
das liegt daran, dass du den Rahmen die Höhe 100% gibst, wenn du die Angabe einfach weglässt könnte es eher nach deinem Geschmack aussehen.
Antwort 2 von MoRe99
Leider nein, rfb. Wenn ich die 100 % weg lasse zieht sich der Hintergrund des <div> "main" zwar weiter runter, endet aber doch, bevor der Text fertig ist. D. h. mein Text wird früher oder später von meiner Hintergrundgrafik unterlegt und dadurch nicht mehr lesbar.
Wie bekomme ich nun also mein <div> "main" dazu, dass es von oben bis ganz unten, egal, wie lang der Text ist, seine eigene Hintergrundfarbe bekommt und nicht die Hintergrundgrafik?
Wie bekomme ich nun also mein <div> "main" dazu, dass es von oben bis ganz unten, egal, wie lang der Text ist, seine eigene Hintergrundfarbe bekommt und nicht die Hintergrundgrafik?
Antwort 3 von otimac
hai,
deine hintergrundfarbe erscheint nicht da du nur color: anstatt
background-color: angegeben hast.
aber teste doch mal folgendes
die rahmen(border) kannstdu ja wieder entfernen
cu
deine hintergrundfarbe erscheint nicht da du nur color: anstatt
background-color: angegeben hast.
aber teste doch mal folgendes
body {
background: #f7ffff url(../img/bg1.jpg) repeat;
background-color: #006;
padding: 0;
margin: 0;
}
#header {
background-color: #f7ffff;
color: #006;
padding: 0;
margin: 10px;
width: 740px;
height: 120px;
border:3px groove green;
}
#main {
float:right;
padding: 0;
margin: 10px;
width:560px;
height: 100%;
background-color: #f7ffff;
border:3px groove green;
}
#navi {
float:left;
background-color: #f7ffff;
color: #006;
padding: 0;
margin: 10px;
width: 140px;
height: 334px;
border:3px groove yellow;
}
p {
margin: 10px;
}
#rahmen {
position: absolute;
top: 0;
left: 0;
width: 760px;
height: auto;
background-color: #f7ffff;
border:3px solid red;
}
die rahmen(border) kannstdu ja wieder entfernen
cu
Antwort 4 von rfb
@otimac:
zu
color: Vordergrund (Text)
background-color oder abgekürzt background: Hintergrund
mit
@MoRe99:
komisch, bei mir und meinem Opera klappts so. Musst halt ein bisschen rumexperimentieren. Das Problem liegt schon an der Stelle Kombination Höhe vom äußeren div festlegen und inneres div ragt darüber hinaus.
zu
Zitat:
deine hintergrundfarbe erscheint nicht da du nur color: anstatt background-color: angegeben hast.
deine hintergrundfarbe erscheint nicht da du nur color: anstatt background-color: angegeben hast.
color: Vordergrund (Text)
background-color oder abgekürzt background: Hintergrund
mit
Zitat:
background: #f7ffff ...;
background-color: #006;
hast du demnach in 2 Zeilen 2 verschiedene Hintergrundfarben festgelegt.background: #f7ffff ...;
background-color: #006;
@MoRe99:
komisch, bei mir und meinem Opera klappts so. Musst halt ein bisschen rumexperimentieren. Das Problem liegt schon an der Stelle Kombination Höhe vom äußeren div festlegen und inneres div ragt darüber hinaus.
Antwort 5 von MoRe99
@ otimac:
Wie rfb schon geschrieben hat: mit
habe ich die Hintergrundfarbe schon festgelegt für den Fall, dass jemand z. B. Grafiken abgeschaltet hat. In dem Fall würde #f7ffff als Hintergrundfarbe angezeigt. Und mit
wird die Schriftfarbe festgelegt.
Aber dein Code hat geholfen otimac, es funktioniert! Danke! :-)
Wie rfb schon geschrieben hat: mit
background: #f7ffff url(../img/bg1.jpg) repeat;
habe ich die Hintergrundfarbe schon festgelegt für den Fall, dass jemand z. B. Grafiken abgeschaltet hat. In dem Fall würde #f7ffff als Hintergrundfarbe angezeigt. Und mit
color: #006;
wird die Schriftfarbe festgelegt.
Aber dein Code hat geholfen otimac, es funktioniert! Danke! :-)