nicht angemeldet
jemand eine Idee wie ich das hier zentrieren kann?
0 
Matthias Apsel
0 0 Matthias Apsel
0
0
jemand eine Idee wie ich das hier zentrieren kann?
Hallo zusammen,
ich bastel gerade an einem neuen Design und habe folgendes Problem.
In meine Top-Navigation soll zentriert werden, doch leider kriege ich das nicht hin:
<body>
<div id="topnav">
<div class="moduletable">
<ul class="menu">
<li class="item-101 current active"><a href="/" >Home</a></li>
<li class="item-102 current active"><a href="/" >Home</a></li>
<li class="item-102 current active"><a href="/" >Home</a></li></ul>
</div>
</div>
</body>
body {background-color:#e5e5e5;}
/* ************************** NAVIGATION ************************
*****************************************************************/
#topnav {
width: 1050px;
height: 40px;
float:left;
}
#topnav .menu{
height: 40px;
list-style-type:none;
}
#topnav .menu li a{
width: 200px;
height: 30px;
float:left;
margin-top: 5px;
margin-left:10px;
margin-right: 10px;
font-family: 'Oswald', Arial, sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 30px;
text-align:center;
color: #FFF;
text-decoration: none;
text-shadow: 2px 2px 2px #000;
background-image: url(http://yourown.de/templates/yourownmainpage/images/menuheaderbg01.png);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
-ms-transition: all 100ms ease-in;
-o-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
#topnav .menu li a:hover{
margin-left:5px;
margin-right: 5px;
margin-top: 3px;
width: 210px;
height: 34px;
font-size: 25px;
font-weight: 800;
-webkit-border-radius: 17px;
border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
background-color: #fff;
text-shadow: 4px 4px 4px #000;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
Wie ihr seht konnte ich mir Vertikal helfen, da ich ja die Feste höhe der Elemente weiß. jedoch weiß ich ja nicht wie viele Links in der Navigation sein werden bzw sie sich ja immer wieder ändern, daher weiß ich nicht wie ich es hinkriegen soll.
Jemand eine Idee?
mfg Jan
-
Om nah hoo pez nyeetz, Jan!
<body>
<div id="topnav">
<div class="moduletable"><ul class="menu">
<li class="item-101 current active"><a href="/" >Home</a></li>
<li class="item-102 current active"><a href="/" >Home</a></li>
<li class="item-102 current active"><a href="/" >Home</a></li></ul></div></div>
</body>
bist du sicher, dass du zwei umgebende div-Elemente brauchst? Das div topnav könnte auch ein [nav-Element](http://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/) werden. > Wie ihr seht konnte ich mir Vertikal helfen, da ich ja die Feste höhe der Elemente weiß. jedoch weiß ich ja nicht wie viele Links in der Navigation sein werden bzw sie sich ja immer wieder ändern, daher weiß ich nicht wie ich es hinkriegen soll. Horizontal wird mit margin {0 auto;}. Allerdings darfst du dazu die Listenelemente nicht floaten. Matthias -- 1/z ist kein Blatt Papier. -
bist du sicher, dass du zwei umgebende div-Elemente brauchst? Das div topnav könnte auch ein nav-Element werden.
da hast du natürlich recht aber fange ja mit diesem Design gerade erst an... Das ist ja ein Template für joomla daher das <div class="moduletable"> solch unnötigen Sachen werden noch entfernt jedoch habe ich damit noch herumexperimentiert zwecks zentrieren.
Horizontal wird mit margin {0 auto;}. Allerdings darfst du dazu die Listenelemente nicht floaten.
naja ohne floaten würden die links ja nicht mehr nebeneinander stehen. hmmm vielleicht muss ich doch die Code unschönen Tabellen verwenden. eigentlich wollte ich diesmal Komplet drauf verzichten... da man das ja anscheinend tut...
-
Om nah hoo pez nyeetz, Jan!
naja ohne floaten würden die links ja nicht mehr nebeneinander stehen.
display: inline-block; zukünftig auch flexbox
Matthias
--
1/z ist kein Blatt Papier.
-
Danke für die Antworten(habe ich eben vergessen)
ich verstehe nicht wie das damit funktionieren soll. Hier klicken hab es also da mal probiert nun erscheinen die links aber nur untereinander...hmmm vielleicht werde ich es mal mit js probieren. Ich schaue mal nach einer Funktion um herauszufinden wie viele <li> in <ul class="menu"> sind um dann margin zu berechnen... das wäre nur leider sehr umständlich und nicht mehr unbedingt meine stärke^^
-
Om nah hoo pez nyeetz, Jan!
hmmm vielleicht werde ich es mal mit js probieren.
unnötig. gib den li-Elementen display: inline-block, nicht den a-Elementen. Schließlich sollen die li nebeneinander sein und nicht die a.
Matthias
--
1/z ist kein Blatt Papier.
-
XD das war natürlich blöd ^^
Hier klicken
nur verstehen ich das mit dem margin: 0 auto; nicht. Aber dank dir hat es jetzt mit
text-align:center; geklappt.Ich danke dir vielmals!
-
-
-
-
-
XD das war natürlich blöd ^^
Hier klicken
nur verstehen ich das mit dem margin: 0 auto; nicht. Aber dank dir hat es jetzt mit
text-align:center; geklappt.Ich danke dir vielmals!
-