Autor |
Nachricht |
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 19.12.2009 23:03
Titel CSS: Navigation |
|
|
Hi,
ich habe letztens ein bisschen in einem Buch über Dreamweaver gelesen und mir danach zum wiederholten Male vorgenommen, eine eigene Webseite zu basteln. Das Ganze soll später eine ähnliche Navigation haben, wie diese hier:
Jetzt habe ich das Problem, dass ich entweder die Positionierung der Beschriftung oder die Höhe der Navigation nicht hinbekomme.
Aktuell sieht der Quelltext zur Navigation so aus:
Code: | HTML:
<div id="navigation">
<ul>
<li><a href="#">Foto</a></li>
<li><a href="#">Pixel</a></li>
<li><a href="#">Vector</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
CSS:
#navigation {
background-color: #191919;
height: 50px;
}
#navigation a:hover{
color:#191919;
}
#navigation ul{
}
#navigation ul li{
float: left;
list-style-type: none;
}
#navigation ul li a{
position: relative;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
color:#FFF;
text-decoration: none;
width: 100px;
float: left;
background-color: #ff0000;
} |
Das führt zu folgendem Ergebnis:
Wenn ich statt position und padding einen festen height-Wert festlege, sieht das Ganze so aus:
Wie bekomme ich es hin, das die Navigation später aussieht, wie bei meinem Beispiel und warum sind die Buttons nicht ganz links, sondern eingerückt (Dreamweaver zeigt an, dass der eigentliche navigations-container genauso breit ist, wie der weiße container im Bild)?
Ich hoffe ich hab mich verständlich genug ausgedrückt und mir kann jemand helfen.
|
|
|
|
|
Cihan
Dabei seit: 10.06.2008
Ort: Hamburg
Alter: 38
Geschlecht:
|
Verfasst So 20.12.2009 01:12
Titel
|
|
|
Lass padding weg, nimm height und line-height.
-> height: 30px
-> line-height: 30px
|
|
|
|
|
Anzeige
|
|
|
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 20.12.2009 10:26
Titel
|
|
|
Danke, das erste Problem wäre damit gelöst. Nur wieso wird die Beschriftung zentriert und zieht die Buttons mit in die Mitte:
Zuletzt bearbeitet von Carl Carlson am So 20.12.2009 10:27, insgesamt 1-mal bearbeitet
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst So 20.12.2009 12:10
Titel
|
|
|
Du hast keine Breite angegeben ^^
#navigation {width:100%;}
Oder in Pixeln, kA wie sich dein Elternelement verhält ^^
|
|
|
|
|
Cihan
Dabei seit: 10.06.2008
Ort: Hamburg
Alter: 38
Geschlecht:
|
Verfasst So 20.12.2009 12:23
Titel
|
|
|
Lade mal n Livebeispiel hoch. Dann mach ichs dir heute Abend. Ich wuerde da ganz anders rangehen.
|
|
|
|
|
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 20.12.2009 13:17
Titel
|
|
|
"#navigation {width:100%;}" scheint nicht zu klappen.
Ich habe grade gesehen, dass ich das gleiche Problem schoneinmal bei einer ähnlichen Navigation hatte.
Damals hab ich das irgenwie mit "#menu ul {position: relative; right: 40;}" gelöst, aber auch das klappt bei meiner jetzigen Seite nicht mehr.
Der komplette Quelltext für die Navigation:
vector.html:
Code: | <!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_container">
<div id="navigation">
<ul>
<li><a href="#">Foto</a></li>
<li><a href="#">Pixel</a></li>
<li><a href="#">Vector</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Info</a></li>
<!--<li><a href="#">Contact</a></li>-->
</ul>
</div>
<div id="content">
Inhalt
</div>
</div>
</body>
</html> |
style.css:
Code: | @charset "utf-8";
body {
background-color: #191919;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
color: #191919;
margin: 0;
}
a {
text-decoration: none;
}
#site_container {
background-color: #FFF;
width: 700px;
margin-right: auto;
margin-left: auto;
}
#navigation {
background-color: #191919;
height: 50px;
}
#navigation a:hover{
color:#191919;
}
#navigation ul{
}
#navigation ul li{
float: left;
list-style-type: none;
}
#navigation ul li a{
line-height: 50px;
height: 50px;
text-align: center;
color:#FFF;
width: 100px;
float: left;
background-color: #ff0000;
}
#content {
width: 500px;
position: relative;
padding: 100px;
} |
Zuletzt bearbeitet von Carl Carlson am So 20.12.2009 13:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst So 20.12.2009 18:37
Titel
|
|
|
Carl Carlson hat geschrieben: | "#navigation {width:100%;}" scheint nicht zu klappen. |
Doch, aber Du kannst nicht erwarten, dass 5 Links mit je 100px Breite ein Element mit 700px Breite ausfüllen - Deine Links erreichen zusammen natürlich nur 500px.
Grundregel: Nie height für Elemente, die Text enthalten, und schon gar nicht in px! (height allenfalls z.B. bei einem div mit overflow: auto o.ä. ) Gerade bei Navigationen ist das ein ein häufig gemachter (Anfänger-)Fehler. Wirf height raus und erzeuge die Höhe durch vert. padding.
Auch vert. Zentrierung per line-height ist keine geeignete Methode, das zeigt sich bei Zeilenumbruch.
Außerdem: http://www.mediengestalter.info/forum/4/hp-hat-abstand-zum-browserrand-136853-1.html
|
|
|
|
|
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 20.12.2009 19:14
Titel
|
|
|
Vielen, vielen Dank für den Tipp mit dem Universalselektor. Damit wurde sowohl das Problem mit dem Abstand zum Browserrand ("margin: 0" im body hat nur beim ie6, nicht in FF geklappt) als auch das Problem mit den eingerückten Button gelöst. Die Buttons waren anscheinend doch nicht richtig zentriert, sondern hatten nur zufällig genau den gleichen Seitenabstand.
Zum "height":
Warum soll ich das in der Navigation nicht benutzen?
Unter "#navigation ul li a" fällt das durch das "line-height" sowieso weg und das "line-height" kann ich doch bei den Buttons benutzen, da es hier keinen Zeilenumbruch gibt, oder?
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] DIV Navigation
Navigation - IE6 + 7
[PHP, XML] Navigation...
Navigation PHP
navigation
Navigation mit PHP
|
|