nicht angemeldet
Hallo,
Ich habe ein Problem mit der relativen Breite einer gefloateten <li> Navigation.
Und zwar habe ich einen <div> Container mit der "id" "header" erstellt.
Dort gibt es ein gefloatetes "div" welches eine Logo erhällt und eine "ul" für Navigation, welche 4 <li> Navigationspunkte erhält.
Meine Ziel ist es das Logo als jpg oder gif mit fester Breite zu platzieren und den Rest der Breite für die Navigation zur Verfügung zu stellen.
Das würde ich gerne mit "#navigation li { width:25%; }" erreichen, aber es wird die ganze Breite des header Bereichs benutzte so wie es aussieht.
Was ich an sich brauche ist:
Relative Breite von Header - feste logo Breite / 4
Muss ich die Struktur der divs ändern oder etwas an meinem CSS Code ändern ?
Oder ist meine Vorgehensweise ein falscher Ansatz ?
über Hilfe würde ich mich freuen.
Hier der HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>navigation02</title>
<link rel="stylesheet" type="text/css" href="navigation03.css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">logo</div>
<ul id="navigation">
<li><a href="#1">link 1</a></li>
<li><a href="#2">link 2</a></li>
<li><a href="#3">link 3</a></li>
<li><a href="#4">link 4</a></li>
</ul>
</div>
</body>
</html>
Hier der CSS code:
@charset "UTF-8";
/* CSS Document */
body, ul, li {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
ol, ul, dl {
list-style-type:none;
}
#header {
background-color:#00cc00;
height:100px;
margin:0 auto;
}
#logo {
width:200px;
height:75px;
background-color:#006;
color:#FFF;
float:left;
}
#navigation li {
float:left;
width:25%;
}
#navigation li a {
display:block;
text-align:center;
border:1px solid #000000;
padding-top:10px;
padding-bottom:10px;
background-color:#666666;
color:#FFFFFF;
}
Marc