CSS Layout, Submenu 100% Höhe

Status
Nicht offen für weitere Antworten.

Giggles91

Grünschnabel
Hallo Leute

Ich kriegs einfach nicht hin mein CSS layout so zu coden das das Submenu 100% hoch wird! Ich hab nun schon diverse Beiträge zu dem Thema gelesen, finde den fehler aber einfach nicht... Könnt ihr mir helfen?

Hier der CSS-Code:
Code:
body {

width:100%;

margin:0 auto;

text-align:center;

}

#header {

/* DIVformatierung */

overflow:hidden;
height:50px;
width:100%;
display:inline-block;
background-color:#FFFFFF;

/* Textformatierungen */

padding-top:10px;
text-align:center;
font-size:28px;
font-family:Arial;
font-weight:bold

}

#menu {

/* DIVformatierung */

overflow:hidden;
display:inline-block;
height:70px;
width:100%;
background-image:url(../graphics/header_background.jpg);
border-bottom: 1px solid black;

/* Textformatierungen */

text-align:left;

}

#content {

/* DIVformatierung */

overflow:hidden;
display:inline-block;
height:100%;
width:79.9%;
float:left;

/* Textformatierungen */

text-align:left;

}

#sub-section{

/* DIVformatierung */

float:right;
margin:0px;
padding:0px;
right:0px;
bottom:0px;
visibility:visible;
background-image:url(../graphics/sub-section_background.jpg);
background-repeat:repeat-y;
background-color:#004F00;
width:20%;
height:100%;

/* Textformatierungen */

text-align:left;
color:#FFFFFF;

}

#div-text{

padding:25px;

}

#footer {

/* DIVformatierung */

overflow:hidden;
display:inline-block;
height: 50px;
vertical-align:bottom;
bottom:0px; 
left:0px; 
right:0;
border-top:1px solid black;
widt:100%;
clear:left;

/* Textformatierungen */

text-align:left;

}

Und hier das HTML:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/layout.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="header">New Project</div>

<div id="menu">_</div>

<div id="sub-section">
  <p id="div-text">Die Klasse 1L </p>
</div>

<div id="content"><p id="div-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut lacus. Mauris in elit. Praesent vehicula lobortis orci. Fusce ac turpis ac sapien molestie aliquam. Sed sit amet augue. Integer posuere lorem at libero. Quisque et sem non magna aliquet rhoncus. Mauris eros odio, mattis vestibulum, facilisis et, consequat eu, dui. Nulla ac libero eu metus sollicitudin dapibus. Donec vitae metus. Mauris nec leo id risus sodales elementum. Fusce ornare felis. Pellentesque fringilla hendrerit arcu. Nunc velit. Aliquam quis mauris eget pede gravida ultrices. Etiam varius nunc porttitor eros. Vivamus arcu. Phasellus ipsum sem, elementum in, elementum quis, porttitor eget, lacus. Sed interdum nisi vitae magna. In a nibh.

Fusce turpis. Donec feugiat. Aenean ultricies, est id eleifend posuere, enim orci varius sapien, vitae placerat justo dolor eget neque. Quisque congue porta dui. In hac habitasse platea dictumst. Praesent eros tellus, fermentum lobortis, semper et, commodo sit amet, ante. Sed diam. Quisque suscipit, urna porta rhoncus iaculis, nunc enim volutpat sem, ut ullamcorper massa massa tincidunt augue. Fusce congue, dui at blandit cursus, ante dolor cursus odio, non blandit dui erat et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet est. Vivamus a nunc a felis ultrices egestas. Sed non urna. Nam id lectus. Nam in mi. Donec tristique. Ut ac odio faucibus lorem iaculis feugiat.</p> </div>

<div id="footer">Footer</div>

</body>
</html>

Danke für jede Hilfe!
 
OK... wenn ich dieses wrapperteil konstruire dann siehts wieder ganz anders aus, aber ich mach wahrscheinlich falsch.

CSS
Code:
html, body {
height:100%;
}

body {

width:100%;

margin:0 auto;

text-align:center;

}

#wrapper {

min-height: 100%;
height:auto !important;
height: 100%;
margin: 0 auto;

}

#header {

/* DIVformatierung */

top:0px;
overflow:hidden;
height:50px;
width:100%;
display:inline-block;
background-color:#FFFFFF;

/* Textformatierungen */

padding-top:10px;
text-align:center;
font-size:28px;
font-family:Arial;
font-weight:bold

}

#menu {

/* DIVformatierung */

overflow:hidden;
display:inline-block;
height:70px;
width:100%;
background-image:url(../graphics/header_background.jpg);
border-bottom: 1px solid black;

/* Textformatierungen */

text-align:left;

}

#content {

/* DIVformatierung */

overflow:hidden;
display:inline-block;
height:100%;
width:79.9%;
float:left;

/* Textformatierungen */

text-align:left;

}

#sub-section{

/* DIVformatierung */

float:right;
margin:0px;
padding:0px;
right:0px;
bottom:0px;
visibility:visible;
background-image:url(../graphics/sub-section_background.jpg);
background-repeat:repeat-y;
background-color:#004F00;
width:20%;
height:100%;

/* Textformatierungen */

text-align:left;
color:#FFFFFF;

}

#sub-section p,a,ul{

padding-left:35px;

}

#content p{

padding:25px;

}

#footer {

/* DIVformatierung */

overflow:hidden;
display:inline-block;
height: 50px;
vertical-align:bottom;
bottom:0px; 
left:0px; 
right:0;
border-top:1px solid black;
widt:100%;
clear:left;
background-color:#004F00;

/* Textformatierungen */

text-align:center;
color:#FFFFFF;
font-size:24px;

}

HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/layout.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">
	<div id="header">New Project</div>
	
	<div id="menu">_</div>
	
	<div id="sub-section">
	  <p>Die Klasse 1L </p>
	</div>
	
	<div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut lacus. Mauris in elit. Praesent vehicula lobortis orci. Fusce ac turpis ac sapien molestie aliquam. Sed sit amet augue. Integer posuere lorem at libero. Quisque et sem non magna aliquet rhoncus. Mauris eros odio, mattis vestibulum, facilisis et, consequat eu, dui. Nulla ac libero eu metus sollicitudin dapibus. Donec vitae metus. Mauris nec leo id risus sodales elementum. Fusce ornare felis. Pellentesque fringilla hendrerit arcu. Nunc velit. Aliquam quis mauris eget pede gravida ultrices. Etiam varius nunc porttitor eros. Vivamus arcu. Phasellus ipsum sem, elementum in, elementum quis, porttitor eget, lacus. Sed interdum nisi vitae magna. In a nibh.
	
	Fusce turpis. Donec feugiat. Aenean ultricies, est id eleifend posuere, enim orci varius sapien, vitae placerat justo dolor eget neque. Quisque congue porta dui. In hac habitasse platea dictumst. Praesent eros tellus, fermentum lobortis, semper et, commodo sit amet, ante. Sed diam. Quisque suscipit, urna porta rhoncus iaculis, nunc enim volutpat sem, ut ullamcorper massa massa tincidunt augue. Fusce congue, dui at blandit cursus, ante dolor cursus odio, non blandit dui erat et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet est. Vivamus a nunc a felis ultrices egestas. Sed non urna. Nam id lectus. Nam in mi. Donec tristique. Ut ac odio faucibus lorem iaculis feugiat.</p> </div>
	
	<div id="footer">Footer</div>
</div>

</body>
</html>
 
Der Trick liegt darin, die senkrecht zu wiederholende Hintergrundgrafik sub-section_background.jpg in dem übergeordneten DIV #wrapper einzusetzen, und auf die 100%-Höhendefinition für die Spalten zu verzichten.

Vergleiche hierzu das Stylesheet in meinem empfohlenen Demo und studiere mal die Konstruktion des Layouts im Detail. ;)
 
Hi,

probier es mal hiermit:

Code:
#content {

        /* DIVformatierung */

        overflow:hidden;
        display:inline-block;
        /*height:100%;*/ /* auskommentiert = deaktiviert */
        width:79.9%;
        float:left;

        /* Textformatierungen */

        text-align:left;

}

#sub-section{

        /* DIVformatierung */

        float:right;
        margin:0px;
        padding:0px;
        right:0px;
        bottom:0px;
        visibility:visible;
        /*background-color:#004F00;*/ /* auskommentiert = deaktiviert */
        width:200px; /* entspricht der Breite von sub-section_background.jpg */
        /*height:100%;*/ /* auskommentiert = deaktiviert */
        z-index:1;

        /* Textformatierungen */

        text-align:left;
        color:#FFFFFF;

}
 
Das ist zwar eine Verbesserung aber noch keine Lösung. Problem:

Je nach auflösung sehe ich den Text in Sub-section nicht.

Also wenn ich 800x600 einstelle, dann kommt der Content Text der Hintergrundgrafik in die Quere.
Bei 1024x768 ist das Layout im Prinzip perfekt aber naja...
Bei 1280x1024 verschwindet der Text schon im Content, da er ja weiss ist.
Bei meiner aktuellen Auflösung von 1680x1050 sehe ich überhautb keine Text mehr!

Ich weiss worans liegt. Die Subsection ist auf eine Breite von 20% festgelegt, der content bereich auf 79.9%, wenn die hintergrundgrafik nun eine absolute grafik
von 200px beträgt dann geht sie bei geringer auflösung in den Content bereich und bei hoher auflösung gerät der text in der subsection in den content bereich...

Doch: wie löse ich das Problem?

Gleicher Link wie vorher...

PS: Ich möchte den Text in der Sub-section nicht nach rechts ausrichten...
 
Und hier der nächste Vorschlag:

Code:
#content {

        /* DIVformatierung */

        overflow:hidden;
        display:inline-block;
        margin-right: 200px;

        /* Textformatierungen */

        text-align:left;
        padding: 0;
}
Zudem musst du noch in der ID #sub-section die rotmarkierte Breitenangabe entfernen:

Code:
#sub-section{

	/* DIVformatierung */

	float:right;
	margin:0px;
	padding:0px;
	right:0px;
	bottom:0px;
	visibility:visible;
	/*background-color:#004F00;*/
	width:200px;
	width:20%;
	/*height:100%;*/

	/* Textformatierungen */

	text-align:left;
	color:#FFFFFF;
}
 
Status
Nicht offen für weitere Antworten.
Zurück