hileutz
Threadersteller
Dabei seit: 07.09.2011
Ort: Görlitz
Alter: 15
Geschlecht: 
|
Verfasst Mi 07.09.2011 22:20
Titel Navigationsleiste zentrieren |
  |
|
Ich versuche vergeblich eine Navigationsleiste zu zentrieren.
Hier mein CSS-Code:
| Code: |
#head {
margin-right:15px;
margin-top:15px;
margin-left:15px;
}
#nav {
position:absolute;
float: left;
padding: 0;
margin:0 auto;
/* Box Shadow */
box-shadow: 0 1px 0 #000;
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#nav ul {
border-top: #f3f3f3 1px solid;
padding: 0;
margin: 0;
float: left;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}
#nav li {
float: left;
list-style: none;
background: none;
margin-right: 1px;
}
#nav a { outline: none; }
#nav li a:link, #nav li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
color: #262626;
text-decoration: none;
text-transform: capitalize;
text-shadow: 0px 1px 1px #fff;
padding: 12px 28px;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #cacaca, #848484);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
#nav li a:hover {
cursor: pointer;
color: #fff;
text-shadow: 0px -1px 1px #000;
/* Background Gradient */
background-image: -moz-linear-gradient(top, #929292, #545454);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}
#nav li:first-child a, #nav ul {
/* Rounded Corners */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
#nav li:last-child a, #nav ul {
/* Rounded Corners */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
a.active:link, a.active:active, a.active:visited {
color: #fff !important;
text-shadow: 0px -1px 1px #000!important;
background-image: -moz-linear-gradient(top, #444, #666)!important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
/* Box Shadow */
box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
}
|
Und jetzt das HTML-Markup:
| Code: |
<div id="head">
<div id="nav">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
<li><a href="5.html">5t</a></li>
</ul>
</div>
</div>
|
Kann mir bitte jemand helfen, diese Nav-leiste zentriert auszurichten?
Danke im Voraus!
|
|
Martys
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 33
Geschlecht:
|
Verfasst Do 08.09.2011 08:32
Titel
|
|
|
| Zitat: | | Code: | #nav {
position:absolute;
float: left;
padding: 0;
margin:0 auto; |
|
Absolut positioniert und gefloatet?
Entscheidener ist, dass es sich um Blockelemente handelt, die erstmal immer 100% der Breite des Elternelemets einnehmen. Wenn diese jetzt keine eigene Breitenangabe < 100% erhalten, können sie nicht zentriert werden.
@Zim:
Bei 0 kann die Angabe px entfallen.
|
|
Willkommen auf dem Portal für Mediengestalter
horizontal oder vertikal?
