[CSS] Navigation nicht mittig (<ul>)

Dieses Thema im Forum "Webdesign" wurde erstellt von SoulOfRussia, 21. Dezember 2009 .

  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 ^^
     
  2. 22. Dezember 2009
    AW: Navigation bricht...

    versuch mal:
    Code:
    #sddm { margin: 0 auto; }
    #sddm li { display: inline; }
    ansonsten nimm ne tabelle ^^
     
  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.
     
  4. 23. Dezember 2009
    AW: Navigation nicht mittig (<ul>)

    24h sind um ^^ *PUSH*

    Ich kriegs nicht hin !!!!

    BITTE HELFT MIR
     
  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.
     
  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
     
  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.
     
  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>
    
     
  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&auml;t zu Garantieren, <b>muss</b> Javascript in ihrem Browser aktiv sein. <br />
     Wir danken f&uuml;r Ihr Verst&auml;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...
     
  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:

    5v4xtv.jpg
    {img-src: //i47.tinypic.com/5v4xtv.jpg}
     
  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.
     
  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&auml;t zu Garantieren, <b>muss</b> Javascript in ihrem Browser aktiv sein. <br />
     Wir danken f&uuml;r Ihr Verst&auml;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]
     
  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.
     
  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"
     
  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 ^^
     
  16. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.