nicht angemeldet
css eigenschaft width 100%
0 0 
Marc
css eigenschaft width 100%
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;
}
-
Grüße,
oder floats um margins ergänzen, wenn ich dich richtig verstanden habe (skizze wäre noch besser)
MFG
bleicher-
Grüße,
oder floats um margins ergänzen, wenn ich dich richtig verstanden habe (skizze wäre noch besser)
MFG
bleicherAh das hat mich jetzt auf die Idee gebracht.
Ich habe #header "position:relative;" und ein "padding-left:310px;"(- die Breite des bildes) verpasst.
Dann habe ich #logo mit "position:absolute; top:0; left:0;" absolut positioniert.
Jetzt wird die liste relativ in der Breite auf gebaut.
Hier der Code:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>navigation02</title> <link rel="stylesheet" type="text/css" href="navigation05.css" media="screen" /> </head> <body> <div id="wrapper"> <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> <li><a href="#5">link 5</a></li> </ul> </div> </div> </body> </html>@charset "UTF-8"; /* CSS Document */ body, ul, li { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:0.85em; } ol, ul, dl { list-style-type:none; } #wrapper{ background-color:#399; margin:0; padding:10px 30px; } #header { position:relative; background-color:#00cc00; height:75px; border:0px solid #000; margin:0 auto; padding-left:310px; padding-right:10px; } #logo { position:absolute; top:0; left:0; width:300px; height:75px; background-color:#006; color:#FFF; float:left; } #navigation li { position:relative; float:left; width:20%; } #navigation li a { display:block; text-align:center; border:0px solid #000000; padding-top:10px; padding-bottom:10px; background-color:#666666; color:#FFFFFF; margin-right:0px; }-
Grüße,
Ah das hat mich jetzt auf die Idee gebracht.
Ich habe #header "position:relative;" und ein "padding-left:310px;"(- die Breite des bildes) verpasst.
Dann habe ich #logo mit "position:absolute; top:0; left:0;" absolut positioniert.
...hast du schon mal deinen hamster in der mikrowelle getroknet? oder zähne mit einer teppichbürste geputzt? ich sag ja nicht, dass die lösung nicht funktiniert, aber die negtiven aspekte...
MFG
bleicher-
Grüße,
Ah das hat mich jetzt auf die Idee gebracht.
Ich habe #header "position:relative;" und ein "padding-left:310px;"(- die Breite des bildes) verpasst.
Dann habe ich #logo mit "position:absolute; top:0; left:0;" absolut positioniert.
...hast du schon mal deinen hamster in der mikrowelle getroknet? oder zähne mit einer teppichbürste geputzt? ich sag ja nicht, dass die lösung nicht funktiniert, aber die negtiven aspekte...
MFG
bleicherKönntest du bitte auf die negativen Aspekte eingehen !
Ich weiß gerade nicht was du meinst.
-
Grüße,
du hast eine recht komplexe lösung mit absoluter positionierung gewählt. die nachteile einer umständlicher lösung sind klar, die absolute positionierung.. nun da gibt es genug zu - ich formuliere das so - wird auf fremden bildschirmen
1)kake aussehen
2)kann dir selbst probleme bereiten, da es objekte aus dem fluss nimmt und fluss vehrindert.
MFG
bleicher
-
-
-
-
-
Hallo,
Falls ich alles richtig verstanden habe, wäre meine Lösung:
#logo { width:200px; height:75px; float:left; } #navigation { margin-left:200px; } #navigation li { display: inline-block; width: 25% padding: 0; margin: 0; }So im Blindflug hingekritzelt, ohne es selber ausprobiert zu haben.
Viele Grüße,
Marc.
