#1 21. Dezember 2009 Navigation nicht mittig (<ul>) Hoffe ich finde hier hilfe^^ ALSO: ich hab folgenden Code geschrieben: HTML: <div id="Navigation"> <ul id="sddm"> <li><a href="index.html">Mainpage</a> | </li> <li><a href="about.html">About</a> | </li> <li><a href="media.html">Media</a> | </li> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Event</a> | <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="Infos.php">Infos</a> <a href="vorverkauf.php">Kartenvorverkauf</a> </div> </li> <li><a href="booking.html">Booking</a> | </li> <li><a href="contact.html">Contact</a> | </li> <li><a href="partner.html">Partner</a> | </li> <li><a href="shop.html">Shop</a></li> </ul></div> dazugehörige CSS: Spoiler Code: #sddm { width:100%; height:22px; background-image:url(Bilder/Navi_Back.png); background-position:center; background-repeat:repeat-y; font-family:Verdana, Geneva, sans-serif; font-size:80%; color:#FFF; margin: 0; padding: 0; z-index: 30 } #sddm li { margin: 0; padding: 0; list-style: none; float:left; // Navigation bricht nicht, jedoch ist es nicht in der Mitte: } #sddm li a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; } #sddm li a:hover { color:#FFF; font-style:normal; text-decoration: none; color:#999; background-color:#333; } #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #333; border: 1px solid #FFF; } #sddm div a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; position: relative; display: block; margin: 0; text-align:left; padding: 5px 10px; width: auto; white-space: nowrap; } #sddm div a:hover { background: #666; color: #FFF; } Folgendes Problem: Bei einer Seite, die ich erstelle, bricht die Navigation immer um. Bzw. wenn sie nicht bricht, dann ist Diese nicht zentriert. Zur veranschaulichung: So sieht es aus: Spoiler Mainpage | About | Media | Event | Booking | Contact | Partner | Shop bzw. Spoiler Mainpage | About | Media | Event | Booking | Contact | Partner | Shop Und so soll es aussehen: Spoiler Mainpage | About | Media | Event | Booking | Contact | Partner | Shop MODS: Bitte [JAVASCRIPT] ändern in [CSS] o.ä. Danke ^^ + Multi-Zitat Zitieren
#2 22. Dezember 2009 AW: Navigation bricht... versuch mal: Code: #sddm { margin: 0 auto; } #sddm li { display: inline; } ansonsten nimm ne tabelle ^^ + Multi-Zitat Zitieren
#3 22. Dezember 2009 AW: Navigation nicht mittig (<ul>) margin: 0 auto; geht auch nicht... ?( // ES GEHT IMMER NOCH NIIICHT xD //² Table geht auch nicht, weil dann der Text in der Mitte ist, das Background-Bild der Navi jedoch abgeschnitten... Und wenn ich die width breiter mache, dann is der Text trotzdem links ausgerichtet. + Multi-Zitat Zitieren
#4 23. Dezember 2009 AW: Navigation nicht mittig (<ul>) 24h sind um ^^ *PUSH* Ich kriegs nicht hin !!!! BITTE HELFT MIR + Multi-Zitat Zitieren
#5 23. Dezember 2009 AW: Navigation nicht mittig (<ul>) Wofür verwendest du bei sddm ein z-index? Hier hab ich mal eine Lösung für dich: HTML: <html> <head><title>test</title> <STYLE TYPE="text/css"> #sddm { height:22px; font-family:Verdana, Geneva, sans-serif; font-size:80%; color:#FFF; margin: 0; padding: 0; z-index: 30 float: left; background: blue; width: 600px; margin: 0 auto; } #sddm li { margin: 0; padding: 0; list-style: none; float:left; } #sddm li a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; } #sddm li a:hover { color:#FFF; font-style:normal; text-decoration: none; color:#999; background-color:#333; } #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #333; border: 1px solid #FFF; } #sddm div a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; position: relative; display: block; margin: 0; text-align:left; padding: 5px 10px; width: auto; white-space: nowrap; } #sddm div a:hover { background: #666; color: #FFF; } #Navigation{ width: 100%; background: red; } </STYLE> </head> <body style="background: black;"> <div id="Navigation"> <ul id="sddm"> <li><a href="index.html">Mainpage</a> | </li> <li><a href="about.html">About</a> | </li> <li><a href="media.html">Media</a> | </li> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Event</a> | <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="Infos.php">Infos</a> <a href="vorverkauf.php">Kartenvorverkauf</a> </div> </li> <li><a href="booking.html">Booking</a> | </li> <li><a href="contact.html">Contact</a> | </li> <li><a href="partner.html">Partner</a> | </li> <li><a href="shop.html">Shop</a></li> </ul> </div> </body> </html> Dein ul (sddm) braucht eine feste Breite, danach kannst du es per margin: 0 auto mittig zentrieren. Wichtig ist hierbei auf jeden Fall die feste Breite, da die Liste ansonsten über die volle Breite geht und du sie links-, rechtsbündig oder mittig zentrieren kannst wie du willst, sie nimmt den vollen Platz ein, also gibts da nix zu zentrieren. Achja, float: left ist auch noch wichtig. Dann gehts. + Multi-Zitat Zitieren
#6 23. Dezember 2009 AW: Navigation nicht mittig (<ul>) "margin: 0 auto" muss funktionieren. es könnte daran liegen dass, margin 2 mal in dem block vorhanden ist, darf aber nur einmal vorkommen + Multi-Zitat Zitieren
#7 23. Dezember 2009 AW: Navigation nicht mittig (<ul>) Das zweite überschreibt das erste. Zudem muss ja noch die Vererbung beachtet werden. Der HTML Block ist ein Ausschnitt aus seinem ganzen Dokument, vielleicht wird es auch irgendwo noch überschrieben. Jedoch denke ich, es ist notwendig, dass das Element gefloatet wird, um es mit margin: 0 auto zu platzieren. + Multi-Zitat Zitieren
#8 23. Dezember 2009 AW: Navigation nicht mittig (<ul>) es überschreibt nichts, das ist ja das problem. probiere es mal selber aus. um "margin: 0 auto" anzuwenden ist es egal ob das element gefloatet ist oder nicht. ein beispiel: Code: // css #seite { height: 100px; width: 600px; margin: 0 auto; } // html <div id="seite">stehe mittig ;)</div> + Multi-Zitat Zitieren
#9 24. Dezember 2009 AW: Navigation nicht mittig (<ul>) Hab den Code jetzt so: Style.css Spoiler HTML: #sddm { background-image:url(Bilder/Navi_Back.png); background-repeat:repeat-y; background-position:center; height:22px; font-family:Verdana, Geneva, sans-serif; font-size:80%; color:#FFF; padding: 0; z-index: 30; float:left; width: 1000px; margin: 0 auto; } #sddm li { margin: 0; padding: 0; list-style: none; float:left; } #sddm li a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; } #sddm li a:hover { color:#FFF; font-style:normal; text-decoration: none; color:#999; background-color:#333; } #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #333; border: 1px solid #FFF; } #sddm div a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; position: relative; display: block; margin: 0; text-align:left; padding: 5px 10px; width: auto; white-space: nowrap; } #sddm div a:hover { background: #666; color: #FFF; } #Navigation{ width: 100%;} header.php Spoiler HTML: <body id="Body"> <noscript> <div align="center" style="color: #FFFFFF; font-family:Verdana, Geneva, sans-serif; font-size:large;"> <b>FEHLER:</b> Um die volle Funktionalität zu Garantieren, <b>muss</b> Javascript in ihrem Browser aktiv sein. <br /> Wir danken für Ihr Verständnis.<br /> <br /><br /><br /><br /></div> </noscript> <div id="Header"></div> <ul id="sddm"> <li><a href="index.php">Mainpage</a> | </li> <li><a href="about.php">About</a> | </li> <li><a href="#" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Media</a> | <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> <a href="fotos.php">Fotos</a> <a href="musik.php">Musik</a> <a href="flyer.php">Flyer</a> <a href="presse.php">Presse</a> </div> </li> <li><a href="#" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Event</a> | <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> <a href="infos.php">Infos</a> <a href="vorverkauf.php">Kartenvorverkauf</a> </div> </li> <li><a href="#" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Booking</a> | <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> About:<br /> <a href="akmontana.php">AK Montana</a> <a href="aone.php">A-One</a> <a href="darkdust.php">Dark Dust</a> <a href="prophecy.php">Prophecy</a> <a href="denone.php">DenOne</a> <a href="ziya.php">Ziya</a> <a href="jayd.php">Jay D</a> <a href="ksoul.php">K-Soul</a> <a href="pietrob.php">Pietro B</a> <a href="urbanize.php">Urbanize</a> </div> </li> <li><a href="contact.php">Contact</a> | </li> <li><a href="partner.php">Partner</a> | </li> <li><a href="shop.php">Shop</a></li> </ul></div> </div> und siehe da... ES GEHT IMMER NOCH NICHT :angry: der floated das zwar, aber es nciht ganz mittig... und wenn ich wie Width auf z.b. 700 px stelle, dann schneidet das Bild "Navi_Back.png" ab... + Multi-Zitat Zitieren
#10 26. Dezember 2009 Zuletzt von einem Moderator bearbeitet: 15. April 2017 AW: Navigation nicht mittig (<ul>) suche immernoch nach einer Lösung !!! hier mal ein Bild wie es JETZT aussieht: {img-src: //i47.tinypic.com/5v4xtv.jpg} + Multi-Zitat Zitieren
#11 26. Dezember 2009 AW: Navigation nicht mittig (<ul>) Sorry, hatte zwar gesagt, das muss rein, aber wenn ich ausm #sddm float: left raus nehm, dann klappts. Tipp: Firebug installieren, rumtesten warum es nicht geht! Dann kommst du auch drauf. + Multi-Zitat Zitieren
#12 26. Dezember 2009 AW: Navigation nicht mittig (<ul>) Ja.. jetzt is die NAVI in der Mitte... CSS: Spoiler HTML: @charset "utf-8"; #Body { background-color:#000; background-image:url(Bilder/Leather_Background.jpg); background-repeat:no-repeat; background-position:center top; } #table{width:55%; height:100%;} #Header { background-image:url(Bilder/Header2.png); background-repeat:no-repeat; background-position:center; width:100%; height:206px; } #LinksLayer { visibility:hidden; z-index:2; background-color:#666; position:absolute; left: 632px; top: 244px; } #LinksLayer a{ font-family:Verdana, Geneva, sans-serif; font-size:80%; color:#FFF; font-style:normal; text-decoration: none; } #Navigation a{ color:#FFF; font-style:normal; text-decoration: none; } #Navigation a:hover{ color:#FFF; font-style:normal; text-decoration: none; color:#999; background-color:#333; } #SeiteLinks { width:600px; padding-left:8px; padding-right:8px; float:center; font-family:Verdana, Geneva, sans-serif; font-size:smaller; color:#FFF; background-image:url(Bilder/Background_Content.png); } #SeiteRechts { float:right; width:300px; padding-left:5px; padding-right:5px; margin-left:auto; border-top:double; border-top-color:#999; border-right:double; border-right-color:#999; border-left:double; border-left-color:#FFF; border-bottom:double; border-bottom-color:#FFF; font-family:Verdana, Geneva, sans-serif; font-size:smaller; color:#FFF; background-image:url(Bilder/Background_Content.png); } #SeiteLinksHeadline { background-image:url(Bilder/HeadlineRight.png); background-position:center; width:100%; background-repeat:repeat-y; font-size:120%; text-align:center; text-decoration:underline; } #SeiteRechts a{ color:#FFF; font-style:normal; text-decoration: underline; } #SeiteRechts a:hover{ color:#FFF; font-style:normal; text-decoration: none; color:#999; background-color:#333; } #SeiteRechtsHeadline { background-image:url(); background-position:center; background-color:#7c7c7c; width:100%; background-repeat:repeat-x; font-size:smaller; } #Footer { background-image:url(Bilder/Navi_Back.png); background-repeat:repeat-y; background-position:center; font-family:Verdana, Geneva, sans-serif; font-size:smaller; color:#FFF; width:910px; margin:auto; } #Footer a{ color:#FFF; font-style:normal; text-decoration: none; } #sddm { background-image:url(Bilder/Navi_Back.png); background-repeat:repeat-y; background-position:center; height:22px; font-family:Verdana, Geneva, sans-serif; font-size:80%; color:#FFF; padding: 0; z-index:30; float:left; width:100%; text-align:center; margin:auto 0; } #sddm li { padding: 0; list-style: none; display:inline; } #sddm li a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; } #sddm li a:hover { color:#FFF; font-style:normal; text-decoration: none; color:#999; background-color:#333; } #sddm div { position:absolute; visibility: hidden; margin:auto 0; padding: 0; background: #333; border: 1px solid #FFF; } #sddm div a { color:#FFF; font-style:normal; text-decoration: none; padding-left:5px; padding-right:5px; padding-bottom:3px; position: relative; display: block; margin: 0; text-align:left; padding: 5px 10px; width: auto; white-space: nowrap; } #sddm div a:hover { background: #666; color: #FFF; } #Navigation{ width: 100%;} header.php Spoiler HTML: <body id="Body"> <noscript> <div align="center" style="color: #FFFFFF; font-family:Verdana, Geneva, sans-serif; font-size:large;"> <b>FEHLER:</b> Um die volle Funktionalität zu Garantieren, <b>muss</b> Javascript in ihrem Browser aktiv sein. <br /> Wir danken für Ihr Verständnis.<br /> <br /><br /><br /><br /></div> </noscript> <div id="Header"></div> <ul id="sddm"> <li><a href="index.php">Mainpage</a> | </li> <li><a href="about.php">About</a> | </li> <li><a href="#" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Media</a> | <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> <a href="fotos.php">Fotos</a> <a href="musik.php">Musik</a> <a href="flyer.php">Flyer</a> <a href="presse.php">Presse</a> </div> </li> <li><a href="#" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Event</a> | <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> <a href="infos.php">Infos</a> <a href="vorverkauf.php">Kartenvorverkauf</a> </div> </li> <li><a href="#" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Booking</a> | <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> About:<br /> <a href="akmontana.php">AK Montana</a> <a href="aone.php">A-One</a> <a href="darkdust.php">Dark Dust</a> <a href="prophecy.php">Prophecy</a> <a href="denone.php">DenOne</a> <a href="ziya.php">Ziya</a> <a href="jayd.php">Jay D</a> <a href="ksoul.php">K-Soul</a> <a href="pietrob.php">Pietro B</a> <a href="urbanize.php">Urbanize</a> </div> </li> <li><a href="contact.php">Contact</a> | </li> <li><a href="partner.php">Partner</a> | </li> <li><a href="shop.php">Shop</a></li> </ul> <br /> [...] aber das Drop-Down Menu is jetzt aufeinmal am Linken rand festgeklebt [siehe 2 Posts davor] + Multi-Zitat Zitieren
#13 26. Dezember 2009 AW: Navigation nicht mittig (<ul>) Dir fehlt beim Dropdown ganz einfach der Abstand zum linken Seitenrand. Also du solltest dich echt mal mit CSS außeinanersetzen (www.css4you.de). Hier ist noch ein Beispiel, das sicher deinen Wünschen entspricht: http://demo.magentocommerce.com/ da kannst du mal mit Firefox + Firebug inspekten und abgucken, wie das gemacht ist. Man braucht nicht mal JavaScript für sowas, das geht auch per CSS mit hover und display. + Multi-Zitat Zitieren
#14 26. Dezember 2009 AW: Navigation nicht mittig (<ul>) haha, sag das mal den browser-herstellern ^^ wenn n element via "float" links oder rechts umflossen wird, is da nix mehr mit "auto" + Multi-Zitat Zitieren
#15 26. Dezember 2009 AW: Navigation nicht mittig (<ul>) ich hab das jetzt mit nem Margin-Left:45% gelöst... jetzt is es zu 97% so, wie ich es wollte ^^ Aber trotzdem danke für eure Hilfe... es wäre aber nicht schlecht wenn es einen 100% zufriedenstellenden Lösungsweg gibt ^^ + Multi-Zitat Zitieren