✔ Navigation nimmt keine volle Höhe an

Status
Nicht offen für weitere Antworten.
real-insanity

real-insanity

Erfahrenes Mitglied
Guten Morgen zusammen,
ich hab mal wieder ne etwas kleinere Frage.

Ich habe mir mal ein Layout zusammengebastelt, mit Header-, Navi-, Content- und Footer-Container. Da ich Fehler im Layout hatte, habe ich dann die Container eingefärbt.
Dabei ist aufgefallen, dass die Navibox nicht die "volle" Höhe annimmt.

Screenshot als Anhang.

Hier meine CSS-Datei:
HTML: 
/*
 *  Tag-format
 */
  
body{ 
	font-size: 10px; 
	font-family: verdana; 
	color: black; 
	text-decoration:none; 
}

input{ 
	border:1px dotted black; 
	font:inherit; 
}	

table	 { 
	width:100%;
}	

a:link, a:visited, a:active		{ font-size: 10px;	font-family: verdana;	color: black;	text-decoration:none; border-left:10px transparent solid; padding-left:5px; }
a:hover							{ border-left: 10px #6699CC solid; border-bottom:1px #6699CC solid; padding-left:5px; }

/*
 *  IDs
 */

#wrapper	{
	border:1px solid black;
	width:75%; 	
	height:100%; 	
	text-align:center;		
	vertical-align:middle; 
	padding:0px;
	clear:both;
	margin:auto;
	overflow:hidden;
}

#banner	 	{ 
	width:100%; 	
	height:100px; 	
	font-size:30px; 
	margin:inherit;
	padding:inherit;
	font-weight:bold;	
	text-align:inherit; 
	vertical-align:middle;
	font:inherit; 
	background-color:#6699CC;
}

#navi		{ 
	width:20%; 	
	height:100%; 	 
	float:left; 
	padding:inherit;	
	margin:inherit;
	text-align:left;
	font:inherit;
	background-color:#6699CC;
}

#navi ul		{
	list-style-type:none;
	padding-left:0px;
	margin-left:0px;
}

#footer		{
	width:100%; 	
	height:50px; 	
	padding:5px;
	margin:inherit;
	clear:both;
	font:inherit;
	background-color:#6699CC;
}

#content	{ 
	height:250px; 	 
	float:left;
	padding:inherit;
	margin:inherit;
	width:80%;
	text-align:left;
	font:inherit;
}

#AdLayer	{
	background-color:#6699CC;
	border:1px solid black;
	margin:0px;
	padding:5px;
}
#FirstColumn{
	width:20%;
}
#SecondColumn{
	width:25%;
}
#ThirdColumn{
	width:10%;
}
#TextUserName{
	width:45%;
}
/*
 *  Classes
 */
  
.submit		  	{ border:1px dotted black; background-color:White; }

Und hier die HTML-Datei:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css"/> 
		<title>AWE Mühlen</title>
		<script language="JavaScript" type="text/javascript" src="ValidateForms.js"> </script>
		<script language="JavaScript" type="text/javascript" src="Cookies.js"> </script>
	</head>
	<body>
	<div id="WelcomeText">
		
	</div>
	<br>
		<div id="wrapper">
			<div id="banner" onclick="setCookie('bla'); return false;">BANNER</div>
			<div id="navi">
                <ul>
					<li><a href="#">Grundlagen HTML</a></li>
					<li><a href="#">Grundlagen CSS</a></li>
					<li><a href="#">Layout mit CSS (div)</a></li>
				</ul>
			</div>
			<div id="content">
			    <form id="Login" method="post" action="" >
			       <table>
			            <tr>
			                <td id="FirstColumn">Benutzername:</td>
			                <td id="SecondColumn"><input type="text" name="UserName" id="UserName"/></td>
							<td id="ThirdColumn"><img src="pix/delete.gif" id="pictureUserName" alt="Validierungsstatus"/></td>
							<td id="TextUserName">&nbsp;</td>
			            </tr>
			            <tr>
			                <td>Passwort: </td>
			                <td><input type="password" name="UserPwd" id="UserPWD"/></td>
			                <td><img src="pix/delete.gif" id="pictureUserPWD" alt="Validierungsstatus"/></td>
			                <td id="TextUserPWD">&nbsp;</td>
			            </tr>
			            <tr>
							
			                <td colspan="4"> <input type="submit" onclick="ValidateInput();return false;" class="submit"/> </td>   
			            </tr>
			       </table>
			    </form>
			</div>
			<div id="footer" onclick="getCookie('bla'); return false;">FOOTER</div>
		</div>
	</body>
</html>

Wie bekomme ich hin, dass die Navigation, bis an den Footer reicht?
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    13,7 KB · Aufrufe: 49
Probier mal:

HTML: 
#navi		{ 
	width:20%; 	
      
        height:auto !important; 
        height:100%; 
        min-height:100%;
	
        float:left; 
	padding:inherit;	
	margin:inherit;
	text-align:left;
	font:inherit;
	background-color:#6699CC;
}
 
Naja ist nicht so ganz das, was ich ahben wollte ô.o

Die Größe des Contents sollte schn da bleiben.
Ich will ja nur die Navi komplett bis nach unten gezogen haben.
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    11 KB · Aufrufe: 42
Hier meine Lösung:
Code: 
#wrapper	{
	border:1px solid black;
	width:75%;
	height:100%;
	text-align:center;
	vertical-align:middle;
	padding:0px;
	clear:both;
	margin:auto;
	overflow:hidden;
	background: #FFF url(navi.gif) 0 repeat-y;	
}

navi.gif hab ich im Anhang.

Gruß Thomas
 

Anhänge

  • navi.gif
    navi.gif
    53 Bytes · Aufrufe: 140
HTML: 
#navi		{ 
	width:20%; 
	min-height:250px;
	height:auto !important;
	height:250px;	
	height:100%; 	 
	float:left; 
	padding:inherit;	
	margin:inherit;
	text-align:left;
	font:inherit;
	background-color:#6699CC;
}
So gehts auch. Ist trotz height in der höhe variabel. Konnte es hier nicht auf dem ie6 testen. Müsste da aber auch funtzen.
 
Ich habe es nun wie in dem o.g. Link gelöst:

HTML: 
#navi		{ 
	width:20%; 	
	height:100%; 	 
	float:left; 
	padding:inherit;	
	margin:inherit;
	text-align:left;
	font:inherit;
	background-color:#6699CC;
	overflow: hidden;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

Ist sogar im nachhinein logisch und das ist so ein Punkt da würde ich mir gerne vor dem Kopf schlagen und sagen: "Das ist so simpel"
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück