Ankündigung

Einklappen
Keine Ankündigung bisher.

Horizontale Listenelemente vertikal zentrieren

Einklappen

Neue Werbung 2019

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

  • Horizontale Listenelemente vertikal zentrieren

    Hallo,

    wie schon oben erwähnt geht es um eine horizontale Liste.
    In dieser Liste befindet sich die Navigaton der Seite.
    Hab stundenlang ach ner Lösung gesucht, aber alle Vorschläge haben nicht
    funktioniert.

    Hier mal das html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="mitte">
    <div id="leiste" style="display: block;">
        <ul id="punkte">
            <li id="anfang">&nbsp;</li>
            <li class="eintrag"><a href="/index.php?site=2&amp;sub=1">Betonbau</a></li>
            <li class="space"></li>
            <li class="eintrag"><a href="/index.php?site=2&amp;sub=2">Montage von Fertigelementen</a></li>
            <li class="space"></li>
            <li class="eintrag"><a href="/index.php?site=2&amp;sub=3">Mauerwerksbau</a></li>
            <li class="space"></li>
            <li class="eintrag"><a href="/index.php?site=2&amp;sub=4">Tief- und Kanalbau</a></li>
            <li class="space"></li>
            <li class="eintrag"><a href="/index.php?site=2&amp;sub=5">Putzarbeiten</a></li>
            <li class="space"></li>
            <li class="eintrag"><a href="/index.php?site=2&amp;sub=6">Außenanlagen</a></li>
            <li id="ende">&nbsp;</li>
        </ul>
    </div>
    </div>
    </body>
    </html>
    Und hier das CSS:
    Code:
    body
    {
        background-color: #999999;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #334;
    }
    
    a{
        text-decoration:none;
        color:#000;
    }
    
    div#leiste{
        position:absolute;
        width:795px;
        height:45px;
        display:none;
        padding:0;
        margin:0;
    }
    
    ul#punkte{
        width:655px;
        height:43px;
      padding:0;    
        margin:0 auto;
    }
    ul#punkte li{
        list-style-type: none;
        float:left;
        text-align:center;
      font:menu;
    }
    
    li#anfang{
        width:10px;
        height:42px;
        background-image: url('../pics/bg_leiste_links.gif');
         background-repeat: no-repeat;
    }
    
    li.eintrag{
        height:42px;
        background-image: url('../pics/bg_leiste.gif');
         background-repeat: repeat-x;
         width:100px;
    
    }
    li.eintrag a{
        display:block;
        height:38px;
        padding:0;
        margin:0;
        vertical-align:middle;
    }
    
    li.space{
        height:42px;
        background-image: url('../pics/leiste_space.gif');
         background-repeat: no-repeat;
         width:1px;
         margin:0;
         padding:0;
    }
    
    li#ende{
        width:10px;
        height:42px;
        background-image: url('../pics/bg_leiste_rechts.gif');
         background-repeat: no-repeat;
    }
    Wie man sehen kann sind einige Links umgebrochen.
    Ich habe schon vieles versucht, aber es nicht hinbekommen, das die
    einzeiligen Links vertikal zentriert sind. Von mir aus auch bottom.

    Kann mir bitte jemand sagen wie ich dashinbekomme?


  • #2
    Code:
    <li id="anfang">&nbsp;</li>
    <li class="space"></li>
    Sowas kann bitte nicht dein Ernst sein ...


    Und stelle bei in solchen Fällen bitte ein Online-Beispiel bereit, damit man das gleich nachvollziehen kann - ich habe keine Lust auf Copy&Paste für sowas.

    Kommentar


    • #3
      Und wieso bitte schön sollte das nicht mein Ernst sein?
      Was ist daran bitte auszusetzen?

      Hintergrund ist einfach der, das die Liste Hintergrundgrafiken
      verwendet um ein Menü darzustellen.

      Kommentar


      • #4
        Zitat von pfump Beitrag anzeigen
        Und wieso bitte schön sollte das nicht mein Ernst sein?
        Was ist daran bitte auszusetzen?
        Leere Elemente sind aus HTML-Sicht totaler Quatsch.
        Abstände macht man mittels CSS.

        Und von deinen Hintergrundgrafiken sehe ich auch immer noch nichts.

        Kommentar


        • #5
          Nur die Ruhe. Die hab ich im Eifer des gefechts übersehen

          Damit man sieht was ich meine hier der Link:

          http://www.star-wars.de.vu/test

          Kommentar


          • #6
            Da ist immer noch der Unsinn mit den leeren Listelementen drin.

            Erst vernünftiges HTML aufbauen, anschließend um Formatierung kümmern.

            Kommentar


            • #7
              Da sind keine leeren Listenelemente drin.
              Wie man sieht besitzen diese einen geschützten Leerschritt!

              Des weiteren sind diese Elemente für die Abgrenzung der einzelnen
              Links da (ist das |).

              Kommentar


              • #8
                Du müsstest den einzeiligen Elementen ein line-height:38px; zuweisen.
                cu
                "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

                Kommentar


                • #9
                  Zitat von pfump Beitrag anzeigen
                  Da sind keine leeren Listenelemente drin.
                  Wie man sieht besitzen diese einen geschützten Leerschritt!
                  D'oh! Damit sind sie leer. Sie transportieren keinerlei Inhalt.
                  Das ist das Äquivalent von "spacer.gif"-Grafiken in Layouts aus dem letzten Jahrtausend.

                  Sowas hat in sinnvoll strukturiertem HTML nichts verloren.


                  Aber hey, wenn du meine Hinweise hier nicht annehmen willst, sondern lieber ständig widersprichst - dann lass' ich's halt, dann löse dein Problem von mir aus alleine.

                  Kommentar


                  • #10
                    Na schön. Und wie kann ich das umgehen?

                    Kommentar


                    • #11
                      Du brauchst zur formatierung folgende CSS Definitionen:
                      Code:
                      div#leiste { ... }
                      div#leiste:before { ... }
                      div#leiste:after { ... }
                      ul { ... }
                      li { ... }
                      li a { ... }
                      ul+li a { ... }
                      li a:hover { ... }
                      lösch alle li-Tags die &nbsp;-krempel enthalten, behalte NUR die Tags die auch tatsächlich Links inne haben.

                      Les dir auf CSS Tutorial zum den Themen: floating, silbing, nesting :before :after overflow und min-width im speziellen durch.

                      Kriegste schon hin

                      P.S.: Keines deiner Listenelemente brauch innerhalb deines divs ein class oder id attribut!
                      [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


                      • #12
                        Umbruch vermeiden

                        probiers mal mit css Eigenschaft: white-space: nowrap;

                        SELFHTML: white-space

                        Viel Glück

                        Kommentar

                        Lädt...
                        X