nicht angemeldet
Hintergrundfarbe bei verschachtelten DIV-Ebenen
0 
Gunnar Bittersmann
0
Hintergrundfarbe bei verschachtelten DIV-Ebenen
Hallo!
Ich habe ein Problem mit der Hintetrgrundfarbe meines Haupt-DIVs:
...
<head>
...
<style>
#main {
background-color: #999999;
...
}
...
</style>
</head>
<body>
<div id="main">
<div id="hintergrundbild">
<img src="images/background.jpg">
</div>
<div id="maintext">
Text ... text , ... text ....
</div>
<div id="navigation">
<a href="http://...">Link1</a><br>
<a href="http://...">Link2</a><br>
<a href="http://...">Link3</a>
</div>
</div>
</body>
In meinem Quelltext den ich hier angedeutet habe würde ich gerne mit einem Eltern-Div-Element arbeiten (hier #main) das eine
bestimmte Hintergrundfarbe hat und damit den gesamten Bereich im Hintergrund aller anderen DIV-Elemente einfärbt.
Ich habe das versucht, allerdings klappt das nicht, selbst wenn ich in #maintext einen sehr langen Text eingebe.
Kann mir da jemand helfen?
Viele Grüße
Soezkan
-
Hello out there!
<style>
Fehler: 'type'-Attribut fehlt.
<div id="hintergrundbild">
<img src="images/background.jpg">Fehler: 'alt'-Attribut fehlt.
Aber was soll das? Du möchtest ein http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrundbild?
<div id="maintext">
Text ... text , ... text ....
</div>"ich möchte furchtbar gern ein textabsatz sein, bitte bitte lass mich doch ...!!!1" [wahsaga]
<div id="navigation">
<a href="http://...">Link1</a><br>
<a href="http://...">Link2</a><br>
<a href="http://...">Link3</a>
</div>"ich möchte furchtbar gern eine liste sein, bitte bitte lass mich doch ...!!!1"
In meinem Quelltext den ich hier angedeutet habe würde ich gerne mit einem Eltern-Div-Element arbeiten (hier #main)
Wozu? Divitis? Baldige Besserung!
[…] das eine bestimmte Hintergrundfarbe hat
Warum sollte nicht 'body' diese Hintergrundfarbe haben?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hallo Gunnar!
Der Code der hier steht ist nur ein wirklich einfaches Beispiel und in Wirklichkeit viel komplizierter deshalb nur eine Beispspielfassung.
Das <bod<>-Tag hat bereits eine Hintergrundfarbe und genau da ist auch
der Knackpunkt. Ich möchte links und rechts einen grauen Balken (aus dem body) und das Div soll sich je nach dem Inhalt der Seite dann nach unten weiß als Hintergrund darstellen....
body {
background-color: #c5c5c5;
}
...
<body>
...
<div id="main">
<div id="maintext">Dieser Text soll das #main-Div je nach
Länge nach unten aufklappen. Ich habs auich schon mit height: 100%
versucht aber leider ohne Erfolg :(</div>
</div>
...Noch mehr Ahnung?
Hilfe!!!Viele Grüße
Soezkan-
Hello out there!
Ich möchte links und rechts einen grauen Balken (aus dem body)
Also 'border' für das 'body'-Element?
und das Div soll sich je nach dem Inhalt der Seite dann nach unten weiß als Hintergrund darstellen.
Also weißer Hintergrund fürs 'body'-Element? Und das 'div' wäre hyperliquid.
Ich habs auich schon mit height: 100% versucht aber leider ohne Erfolg :(
Dazu solltest du mal das Forumarchiv befragen; wenn Versuche ohne Erfolg bleiben, ist oft eine Suche von Erfolg gekrönt.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hallo Gemeinde!
Hier habe ich nocheinmal eine Grafik vorbereitet, die das
Problem beschreiben soll:
http://www.selimoezkan.com/check/beispiel.jpg<body> ist grau
darauf liegt das <div id="main"> mit background-color: #ffffff
der text steht in einem weiteren <div id="text"> das von
dem container <div id="main"> umgeben ist.Wie kriege ich es hin, damit der Text das DIV nach unten "aufspannt"
wenn mehr Text oder Bilder oder oder iinerhalt von <div id="text">
gefüllt werden.
Mit anderen Worten:Ich will immer das Ende der <div id="main"> bündig mit dem unteren
Rand des Browserfensters haben. Wie das mit der Zentrierung geht
weiss ich schon, aber eben nicht wie ich einen solchen Balken (siehe
Grafi) hinbekomme.Vielen Dank für weitere Hilfe!!!
Viele Grüße
Soezkan-
Hallo,
ich verstehe nicht, warum Du diese Divs postest, wenn doch der ürsprüngliche Code viel komplizierter ist? Obwohl so verkürzt betrachtet, sollte er eher kürzer sein?
Du färbst die Hintergrundfarbe grau, schreibst deinen Text und hinterlegst diesen mit der Hintergrundfarbe weiß und gibst ihn noch den linken und rechten Seitenrand den Du haben möchtest.
Gruß,
Ich
-
Aber wenn das DIV nur bspw. eine Zeile enthält und der das Browserfenster maximiert ist, soll trotzdem vom oberen bis
zum unteren Rand des Fensters ein weisser Balken gezeigt
werden.
Das <div id="main"> soll also immer auf die maximale Höhe
des Fensters angeglichen sein.Ist sowas mit CSS möglich?
Vielen Dank für weitere Hilfe :)
Soezkan
-
Hallo,
möglich ist auch, deine Grafik als Hintergrundbild im body einzubinden und dann den Text auszurichten.
Gruß, Ich
-
Ich habe einen Lösungsansatz gefunden (Vielen Dank für eure Hilfe, nach stundenlanger Recherche im Internet habe ich eine Kombi aus CSS + JS hinbekommen). Das spacer.jpg ist ein 1px X 1px großes weisses JPG das aufgezogen wird:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Testen</title>
<script language="Javascript">function Viewport(){
var windowX = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth;
var windowY = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;
var scrollX = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;
var scrollY = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;
var pageX = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth;
var pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;return pageY;
}function pagesize(scroll) {
if (self.innerHeight) // all except Explorer
{
document.getElementById("spacerjpg").height = Viewport();
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
document.getElementById("spacerjpg").style.height = Viewport();
}
else if (document.body) // other Explorers
{
document.getElementById("spacerjpg").style.height = Viewport();
}
}
</script>
<style type="text/css">body {
background-color: #c5c5c5;
margin-top: 0px;
}#box {}
#main {
z-index: 1;
width: 860px;
margin: 0px auto 0px auto;
padding: 0px;
height: 100%;
background-color: #ffffff;
background-image: url(Untitled-1-Dateien/spacer.jpg);
background-repeat: repeat;
text-align: right;
}#block {
position: absolute;
z-index: 2;
}#inhalt {
position: absolute;
width: 600px;
z-index: 4;
padding-top: 230px;
padding-left: 246px;
}</style>
</head><body onresize="pagesize()" onload="pagesize()">
<div id="box">
<div id="main">
<div id="block"> <img id="spacerjpg" src="images/spacer.jpg" alt=""></div>
<div id="inhalt">Vestibulum tempor nibh eleifend diam. Aenean blandit turpis at leo. Sed a leo non tortor congue aliquam. Donec ac justo sit</div>
</div>
</div>
</body>
</html>
-
-
-
-
Hallo,
leider hattest Du wohl keine Zeit unsere Hinweise zu lesen, bzw. auf ggf. vorhandene Probleme beim Verständnis einzugehen, dann hättest Du Dir die Sucherei im Internet sparen können, sowie hier anfangs schon erwähnt wurde die Divs.
Solange man nicht den Quelltext anguckt, sieht die Seite doch ganz nett aus und darum ging es Dir ja anscheinend oder um "copy und paste".
Warum schreibst Du, wenn Du die Antworten ignorierst?
Gruß, Ich
-
-
-
-
-
In meinem Quelltext den ich hier angedeutet habe würde ich gerne mit einem Eltern-Div-Element arbeiten (hier #main) das eine
bestimmte Hintergrundfarbe hat und damit den gesamten Bereich im Hintergrund aller anderen DIV-Elemente einfärbt.Haben die im #main enthaltenen Elemente ein float oder werden absolut positioniert? Falls float, müsstest du es nach dem letzten Element im #main wieder aufheben - am liebsten ohne zusätzliches Markup. Falls position: in diesem Fall werden die Elemente aus dem Textfluss gehoben und hinterlassen ein leeres #main (optisch gesehen) ohne Ausmaße - und damit nicht sichtbar.
Und falls keins von beiden, verstehe ich die Problemstellung irgendwie nicht.
Viele Grüße!
_ds
--
»Mir gehts prächtig Kate, die Sonne scheint mir aus dem Arsch.«
Top 5-Blog, Schöne Sätze für den Alltag, Teil 3.