✔ 2 DIVs mit variabler Breite nebeneinander

Status
Nicht offen für weitere Antworten.
Radhad

Radhad

Erfahrenes Mitglied
Hallo zusammen,

mal wieder ein kleines Problem. Ich wollte mich an einem Barrierefreien Design versuchen (zum üben). Ich habe Links einen div mit fester Breite von 150px und Rechts der div soll immer die restlichen 100% ausfüllen. Wie kann ich das machen?
PHP: 
#content {
border-bottom: 1px dotted #999;
width: 100%;
}

#leftnav {
width: 150px;
border-right: 1px dotted #999;
float: left;
}

#leftnav ul {
margin: 0;
padding: 0;
margin-left: 10px;
padding-bottom: 50px;
list-style-type: none;
}

#leftnav li.header {
font-size: 12px;
color: #999;
padding-top: 10px;
border-bottom: 1px dotted #999;
}

#leftnav li.element {
margin-left: 10px;
}

#main {
float: left;
border: 1px solid black;
}

.clear {
clear: both;
height: 0;
line-height: 0em;
font-size: 1px;
}
HTML: 
<!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" xml:lang="de">
<head><title></title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="design.css" type="text/css" />
</head>

<body>
<div id="top"><ul><li><a href="index.php">Home</a></li><li><a href="blog/index.php">Blog</a></li><li><a href="forum/index.php">Forum</a></li></ul></div>
<div id="info">&nbsp;</div>
<div id="content">
	<div id="leftnav">
		<ul>
			<li class="header">Listen</li>
			<li class="element">News</li>
			<li class="element">Downloads</li>
			<li class="header">Informationen</li>
			<li class="element">Impressum</li>
		</ul>
	</div>
	<div id="main">
		&nbsp;
	</div>
	<div class="clear">&nbsp;</div>
</div>
</body>
</html>
Ich bin für jedne Hinweis dankbar!


Gruß Radhad

Nachtrag: Wenn jemand weiß, wie ich den linken div auch auf 100% Höhe bekomme, würde ich mich auch drüber freuen :)
 
Re: 2 div's Nebeneinander mit variabler Breite

Die Lösung für die Variable-Breite sieht wie folgt aus:
PHP: 
#main {
margin-left: 150px;
}
Wenn jemanddie für die Höhe weiß, bitte posten :)



Gruß Radhad
 
Erweiter das Stylesheet mal folgendermaßen:

Code: 
html,body {
margin: 0;
padding: 0;
height: 100%;
}

#content {
border-bottom: 1px dotted #999;
width: 100%;
height: 100%;
}

#leftnav {
width: 150px;
border-right: 1px dotted #999;
float: left;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
}
 
Klappt so auch nicht, denn dann hängt leftnav unten raus. Habe es anders gelöst:
index.html
HTML: 
<?php
include("./connect.php");
?>
<!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" xml:lang="de">
<head><title></title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="design.css" type="text/css" />
</head>

<body>

	<?php include("./inc/topnav.php"); ?>

<div id="info">
	<div id="breadcrumb">breadcrumb</div>
	<div id="user">user</div>
	<div class="clear">&nbsp;</div>
</div>
<div id="leftnav">
	<ul>
		<li class="header">Listen</li>
		<li class="element"><a href="#">News</a></li>
		<li class="element"><a href="#">Downloads</a></li>
		<li class="header">Informationen</li>
		<li class="element"><a href="#">Impressum</a></li>

	</ul>
</div>
<div id="main">
	&nbsp;
</div>
<div class="clear">&nbsp;</div>
</body>
</html>
CSS
CSS: 
body {
margin: 0;
font: 11px Verdana, sans-serif;
}

#top {
background-color: #C00;
border-bottom: 4px solid #999;
}

#top ul {
margin: 0;
padding: 0;
padding-top: 2px;
padding-bottom: 2px;
}

#top li {
display: inline;
padding-left: 15px;
}

#top li a:link, #top li a:visited, #top li a:hover, #top li a:active {
color: #fff;
font-weight: bold;
text-decoration: none;
}

#info {
border-bottom: 1px dotted #999;
height: 50px;
}

#user {
position: absolute;
right: 0px;
top: 21px;
width: 200px;
height: 50px;
background-color: #C00;
border-left: 4px solid #999;
padding-left: 5px;
color: white
}

#breadcrumb {
margin-right: 200px;
padding-left: 5px;
height: 50px;
}

#leftnav {
position: absolute;
top: 72px;
bottom: 0;
left: 0;
width: 150px;
border-right: 1px dotted #999;
}

#leftnav ul {
margin: 0;
padding: 0;
margin-left: 10px;
padding-bottom: 50px;
list-style-type: none;
}

#leftnav li.header {
font-size: 12px;
color: #999;
padding-top: 10px;
border-bottom: 1px dotted #999;
}

#leftnav li.element {
margin-left: 10px;
}

#leftnav li.element a:link, #leftnav li.element a:visited, #leftnav li.element a:active {
color: #C00;
text-decoration: none;
}

#leftnav li.element a:hover {
color: #999;
text-decoration: none;
}

#main {
margin-left: 150px;
}

.clear {
clear: both;
height: 0;
line-height: 0em;
font-size: 1px;
}
Bin nur schon bei der HTML.Datei bissl weiter (sprich: PHP Codes ersetzen statische Elemente).

Trotzdem danke für den Tipp :)



Gruß Radhad
 
Code: 
#leftnav {
position: absolute;
top: 72px;
bottom: 0;
left: 0;
width: 150px;
border-right: 1px dotted #999;
}
Das funktioniert aber nur in den modernen Browsern.

Ob der IE7 die Kombination der top- und bottom-Eigenschaft gegenüber seinen Vorgängerversionen mittlerweile unterstützt, entzieht sich meiner Kenntnis, da ich ihn auf meinem Win2k-System nicht installieren kann -> er steht nämlich erst ab WinXP zur Verfügung.
 
Hi,

es sieht so aus, als würde der IE7 top-bottom- bzw. left-right-Kombinationen nur im Standardsmode unterstützen. Im
Quirksmode hingegen reagiert er wie seine Vorgänger.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück