✔ 3 Zeiliges DIV-Design über 100% des Bildschirms

owned139 hat gesagt.:
Hab ich i.was übersehen?
Zum Vergrößern anklicken....
i.was heißt noch immer irgendwas - soviel Zeit darf sein.

Jo. Meinen CSS-Code in Post #2, sowie deinen in Post#5, worin die Hintergrunddefinition für den Navigationsbereich noch stimmt.

Liest du eigentlich auch die erhaltenen Antworten und Erläuterungen aufmerksam durch? Im Zweifelsfall und zur Sicherheit auch nochmal von oben beginnend?
 
Zuletzt bearbeitet:
Ja lese ich ;)
und ob ich Wörter abkürze oder nicht kannst du mir überlassen.
In Post #5 enthält der Navigationsbereich gar keine Hintergrunddefinition.
 
owned139 hat gesagt.:
Ja lese ich
Zum Vergrößern anklicken....
Macht hier aber nicht den Eindruck.

owned139 hat gesagt.:
In Post #5 enthält der Navigationsbereich gar keine Hintergrunddefinition.
Zum Vergrößern anklicken....
Ebend. Bei mir nämlich auch nicht ;-)

Oder wofür steht hier wohl das Hintergrundbild "naviBg.jpg"?

spicelab hat gesagt.:
Indem ein weiteres DIV deine existierenden DIVs ein-/umschließt, das zum einen mit einer Mindesthöhe von 100% ausgestattet wird, und zum anderen als Hintergrund den von #navigation übernimmt, da dieser eine absolute Breite besitzt (Hintergrundfarbe und -bild werden in einer Grafik vereint).

Den breitenvariablen Hintergrund für den Inhalt wiederum besorgt dann stattdessen das <body>-Element.

Auf diese Weise gleichen sich auch die Spaltenhöhen automatisch an, was mit deinem CSS ebenso nicht der Fall wäre.

[...]

CSS: 
body {
   background:#393939;
}
#wrap {
   background:url(naviBg.jpg) repeat-y;
   min-height:100%;
   height:auto !important;
   height:100%;
}
#navigation{
    float:left;
    width:240px;
}
#content{
    margin:0 0 0 240px;
}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Ja schön, aber hättest du meine Posts gelesen wüsstest du, dass ich nicht mit dem wrap den BG der Navigation "faken" möchte, sondern die Höhe der beiden DIV`s so anpassen, dass sie sich über den freien Bereich zwischen header und footer erstecken, auch ohne Inhalt!
Dies funktionert mit deinem Code, was ich dir aber schon mehrmals mitgeteilt habe, nicht!
Falls deine nächste Antwort wieder so herablassen und patzig sein sollte klemm sie dir ;)
 
Zuletzt bearbeitet:
Dass du dies nicht faken möchtest, bringst du hier an dieser Stelle zum ersten Mal zum Ausdruck.

Ich hab von dir nur mehrmals zur Antwort bekommen, dass es bei dir nicht funktioniert.

Und wie ich auch schon erwähnte, ist dein Vorhaben mit variablen Blockhöhen so nicht möglich.
 
Post1:
Hallo liebe Community,
ich habe mal wieder ein Problem. Wie bekommt man bei einem 3 zeiligen Design die mittleren DIV`s so groß, das sich das Design auf 100% des sichbaren Bereichs erstreckt?

Post 8:
Ok es funktioniert jetzt, allerdings sind die DIV`s #navigation und #content nur so hoch/groß wie der Inhalt und erstrecken sich nicht über die freie fläche zwischen header und footer.

Sorry, aber die Zitierfunktion will gerade nicht :)
 
Hab es dann jetzt so gelöst:
HTML: 
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Unbenanntes Dokument</title>
        <link rel="stylesheet" type="text/css" href="ff.css" />
        <!--[if IE]>
	        <link rel="stylesheet" type="text/css" href="ie.css" />
        <![endif]-->
    </head>
    <body>
		<div id="header"></div>
        <div id="navigation">sadasad</div>
        <div id="content">#</div>
        <div id="footer"></div>
    </body>
</html>

CSS:
Code: 
head,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100px;
	background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
}
#navigation{
	position:absolute;
	left:0;
	top:100px;
	bottom:40px;
	width:260px;
	background:url(naviBg.jpg) repeat-y;
}
#footer{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40px;
	background:#4e4e4e url(img/black_border.gif) repeat-x;
	margin:0;
}
#content{
	position:absolute;
	left:240px;
	top:100px;
	bottom:40px;
	right:0;
	background:#393939;
	overflow:auto;
}
IE:
Code: 
html,body {
height:100%; 
max-height:100%; 
padding:0;
margin:0; 
border:0; 
overflow:auto;
}
#navigation{
	position:absolute;
	width:240px;
	height:100%;
	border-top:100px solid #fff;
	border-bottom:40px solid #fff;
	top:0;
	bottom:0;
	z-index:-1;
}
#content{
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:100%;
	max-height:100%;
	width:100%;
	overflow:auto;
	position:absolute;
	z-index:-2;
	border-top:100px solid #fff;
	border-bottom:50px solid #fff;
	border-left:240px solid #fff;
}
#footer{
	position:absolute;
	margin:0;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	background:#4e4e4e url(img/black_border.gif) repeat-x;
}
Danke für deine Hilfe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück