Ankündigung

Einklappen
Keine Ankündigung bisher.

Zentrierung vertikaler Navigation

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zentrierung vertikaler Navigation

    Hallo,

    ich habe das Problem, dass sich eine Navigationsleiste nicht zentrieren lässt. Ich suche seit Stunden im Netz nach einer Lösung. Hier das Beispiel:
    Heuss Contactlinsen
    Und hier der betreffende Code
    HTML
    Code:
        <div id="navitop">
            <ul>
                <li><a href="dienstleistungen.html">Dienstleistungen</a></li>
                <li><a href="linsentypen.html">Linsentypen</a></li>
                <li><a href="preise.html">Preise</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
                <li><a href="bildergalerie.html">Bildergalerie</a></li>
          </ul>
        </div>
    CSS
    Code:
    #navitop {
    	float:left;
    	margin:20px auto auto auto;
    	font-size:90%;
    	font-weight:bold;
    	width: 640px;
    }
    #navitop ul {
    	display:inline;
    	width: 640px;
    	list-style:none;
    	text-align:center;
    }
    #navitop li {
    	float:left;
    	text-decoration: none;
    	height:19px;
    }
    #navitop a {
    	text-decoration: none;
    	padding:0 17px;
    	margin:0 2px 0 0;
    	height:19px;
    }
    Wahrscheinlich seh ich nur den Wald vor lauter Bäumen nicht. Vielleicht kann mir jemand die richtige Brille aufsetzen.

    Danke schon jetzt.


  • #2
    Du setzt die Liste (ul) zwar auf display:inline aber nicht die Elemente (li), im Gegenteil, du ziehst sie mit float aus dem Layout heraus. So können sie auch nicht wie Text behandelt und mit text-align zentriert werden.

    Versuch also mal, statt float:left display:inline zu verwenden
    @fschmengler - @fschmengler - @schmengler
    PHP Blog - Magento Entwicklung - CSS Ribbon Generator

    Kommentar


    • #3
      Ich würde eher sagen, dass er das ul dann auch floaten sollte.
      --

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


      • #4
        Wie würdest du es denn dann zentrieren wenn du die genaue Breite nicht kennst?
        @fschmengler - @fschmengler - @schmengler
        PHP Blog - Magento Entwicklung - CSS Ribbon Generator

        Kommentar


        • #5
          Stimmt auch wieder.
          --

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar


          • #6
            <ul>-Element ans div ausrichten und kindelemente unbrechbar ausrichten -> Zentriert

            <div> margin:auto <ul>...</ul> margin:auto </div>

            <ul> dont break <li>...</li> dont break </ul>

            deine Seite da kriegste übrigens locker xHTML-strict
            [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

            Kommentar


            • #7
              Du kannst das ul aber nur ausrichten, wenn Du dessen Breite kennst.
              --

              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


              --

              Kommentar


              • #8
                Also die Mischung aller Tipps hat geholfen. Herzlichen Dank.
                Hier die Lösung im CSS (im HTML-Code hat sich nichts verändert)
                Code:
                #navitop {
                	float:left;
                	margin:20px auto auto auto;
                	font-size:90%;
                	font-weight:bold;
                	width: 640px;
                }
                #navitop ul {
                	float:left;
                	display:inline;
                	width: 640px;
                	list-style:none;
                	text-align:center;
                }
                #navitop li {
                	display:inline;
                	text-decoration: none;
                	height:19px;
                }
                #navitop a {
                	text-decoration: none;
                	padding:0 15px;
                	margin:0 1px 0 1px;
                	height:19px;
                }

                Kommentar


                • #9
                  oder dessen kind-element-umbruch verhinderst...
                  [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                  Kommentar


                  • #10
                    oder dessen kind-element-umbruch verhinderst...
                    Das hat mit Floating etc. aber nicht mehr viel zu tun. Das ist einzig Zetrierung von Inline-Elementen geschuldet.
                    --

                    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                    --

                    Kommentar


                    • #11
                      PS:

                      Ich sehe da nichts zentriertes. Ergänz mal Rahmen:

                      PHP-Code:
                      #navitop {
                          
                      float:left;
                          
                      margin:20px auto auto auto;
                          
                      font-size:90%;
                          
                      font-weight:bold;
                          
                      width640px;
                          
                      border:1px solid;
                      }
                      #navitop ul {
                          
                      float:left;
                          
                      display:inline;
                          
                      width640px;
                          list-
                      style:none;
                          
                      text-align:center;
                          
                      border:1px solid;
                      }
                      #navitop li {
                          
                      display:inline;
                          
                      text-decorationnone;
                          
                      height:19px;
                          
                      border:1px solid;
                      }
                      #navitop a {
                          
                      text-decorationnone;
                          
                      padding:0 15px;
                          
                      margin:0 1px 0 1px;
                          
                      height:19px;

                      --

                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                      --

                      Kommentar


                      • #12
                        PS: So gehts:

                        Code:
                        ul , li , div {
                        	margin:0;padding:0;
                        }
                        #navitop {
                        	margin:20px auto auto auto;
                        	font-size:90%;
                        	font-weight:bold;
                        	width: 640px;
                        	border:1px solid;
                          text-align:center;
                        }
                        #navitop ul {
                        	display:inline;
                        	list-style:none;
                        	text-align:center;
                        	border:1px solid;
                        }
                        #navitop li {
                        	display:inline;
                        	text-decoration: none;
                        	height:19px;
                        	border:1px solid;
                        }
                        #navitop a {
                        	text-decoration: none;
                        	padding:0 15px;
                        	margin:0 1px 0 1px;
                        	height:19px;
                        }
                        [edit]
                        Für den IE6 unbedingt noch Weißraum zwischen den <li> entfernen!
                        --

                        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                        --

                        Kommentar


                        • #13
                          Code:
                          ul , li , div {
                          	margin:0;padding:0;
                          }
                          #navitop {
                          	margin:20px auto auto auto;
                          	font-size:90%;
                          	font-weight:bold;
                          	width: 640px;
                          	border:1px solid;
                            text-align:center;
                          }
                          #navitop ul {
                          	display:inline; // selbes verhalten wie parent element
                          	list-style:none;
                          	text-align:inherit; // selbes verhalten wie parent element
                          	border:1px solid;
                          }
                          #navitop li {
                          	display:inherit; // selbes verhalten wie parent element
                          	text-decoration: none;
                          	height:19px;
                          	border:1px solid;
                          }
                          #navitop a {
                          	text-decoration: inherit; // selbes verhalten wie parent element
                          	padding:0 15px;
                          	margin:0 1px 0 1px;
                          	height:19px; // selbe höhe wie parent-element
                          }
                          inherit:
                          CSS text-align property

                          don't inherit - nicht IE konform für:
                          CSS height property
                          CSS border-style property ( und restliche border-subclasses )

                          do inherit if - nicht IE konform wenn parent element ( trifft hier nicht zu ):
                          CSS display property

                          sollte doch auch gehen oder ? und ja mir is grad langweilig *g*
                          [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                          Kommentar


                          • #14
                            Irgendwie verstehe ich Deine Beiträge heute nicht. Was soll das jetzt sagen?
                            --

                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                            --

                            Kommentar


                            • #15
                              Zitat von nikosch Beitrag anzeigen
                              Irgendwie verstehe ich Deine Beiträge heute nicht. Was soll das jetzt sagen?
                              Das ich grad was ausprobiert hab wie du anhand meines postings sicher festgestellt hast
                              [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                              Kommentar

                              Lädt...
                              X