Kriege Navigation nicht zentriert trotz margin:0 auto

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

englischer-garten hat kostenlosen Webspace.

17:58, 25.5.2014

Hallo! :)
Ich habe ein kleines Problem und zwar kriege ich meine Navigation nicht zentriert. Habe die Breite schon festgelegt und margin: 0 auto; gesetzt aber es wird irgendwie trotzdem nicht wirklich mittig. Also so halb mittig ist es ja, aber auch nicht so wirklich, sondern mehr nach links verschoben. Ich versteh grad nicht ganz warum, denn wenn ich die Breite auf 100px setz sind die Kreise ja in der Mitte... Kann mir evtl jemand sagen was da grad häng bzw. was genau ich falsch mach? Vielen lieben Dank schon mal im Voraus!!! :)
Daria

http://jsfiddle.net/GXBT4/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
        <title>Englischer Garten</title>
        <link href="stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <header>
            <div>
                <h1>Englischer Garten</h1>
            </div>
        </header>
        <nav>
            <ul>
                <li><a href="#"><span class="entypo-info"></span></a></li>
                <li><a href="#"><span class="fontawesome-eye-open"></span></a></li>
                <li><a href="#"><span class="fontawesome-food"></span></a></li>
                <li><a href="#"><span class="maki-soccer"></span></a></li>
                <li><a href="#"><span class="fontawesome-calendar"></a></li>
                <li><a href="#"><span class="typicons-globe"></a></li>
            </ul>
        </nav>

        
    
</html>

@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|maki|typicons);

@font-face {
    font-family: 'Aaargh';
    src:    url('/fonts/Aaargh.ttf') format('truetype')
}

body {
    background-image: url(testbild.JPG);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #8C7F77;
    font-family: 'Aaargh';

    
    
}

header {
    background-color: #594D42;
}

header h1 {
    display: block;
    font-family: 'Zapfino';
    font-size: 17px;
    text-align: center;
    color: #FFF5EC;
    text-decoration: none;
    text-shadow: 1px 1px 1px #423931;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8C7F77), to(#594D42));
    background:-webkit-linear-gradient(top, #8C7F77, #594D42);  
    background:-moz-linear- gradient(top, #8C7F77, #594D42);
    box-shadow: 1px 1px 1px #423931;
        
}
nav ul {
    list-style-type: none;
    padding: 0;
    width: 300px;
    margin: 0 auto;
    
    
}
nav li {
    float:left;
    background-color: hsla(0, 0%, 69%, 0.3);   
    width: 70px;
    height: 70px;
    margin: 0;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 80px;
    padding:10px;
    margin:10px;


    
}
li a {
  color:#FFF5EC;
  text-decoration:none;
  display:block;
  text-align: center;
  margin-top: 12px;

}

li a [class*="entypo-info"]{
  line-height: 46px;

}

li a [class*="fontawesome-eye-open"]{
  line-height: 42px;

}

li a [class*="maki-soccer"]{
  line-height: 46px;

}


/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-size: 35px;
  text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.3);
}


/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
    font-size: 45px;
    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.3);
}

/* maki */
[class*="maki-"]:before {
  font-family: 'maki', sans-serif;
    font-size: 45px;
    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.3);
        
}

/* typicons */
[class*="typicons-"]:before {
  font-family: 'Typicons', sans-serif;
    font-size: 50px;
    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.3);
 
}

Beitrag zuletzt geändert: 25.5.2014 18:00:03 von englischer-garten

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fuerderer

fuerderer hat kostenlosen Webspace.

18:13, 25.5.2014
Dein ul ist auch mittig. Aber es ist breiter als die Kreise (li). Setze dein ul auf width:228px. Dann stimmt es.
Autor dieses Themas
englischer-garten

englischer-garten hat kostenlosen Webspace.

18:17, 25.5.2014
Achso, okay. Stimmt, jetzt passts, vielen Dank!! :)

Beitrag zuletzt geändert: 25.5.2014 18:17:23 von englischer-garten
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city