Suche auf lima-city
-
in: Kriege Navigation nicht zentriert trotz margin:0 auto
geschrieben von englischer-garten
Achso, okay. Stimmt, jetzt passts, vielen Dank!! :) -
in: Kriege Navigation nicht zentriert trotz margin:0 auto
geschrieben von englischer-garten
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); }