Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Link im <li> vertikal zentrieren

  1. #1
    Großmeister(in) Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Link im <li> vertikal zentrieren

    Hallo,
    ich wollte mal nachfragen ob zu dem Problem jemand eine Lösung kennt. Ich habe nun schon mehre Stunden rummprobiert aber noch keine Lösung gefunden .

    So sieht es bei mir aktuell aus:



    Wie man sieht ist die Schrift vertikal noch sehr unschön positioniert.

    Dies ist der HTML Aufbau:

    HTML-Code:
    <div id="nav">
        <ul>
            <li class="current_page_item"><a href="-">Startseite</a></li>
            <li class="page_item page-item-22"><a title="Impressum" href="-">Impressum</a></li>
            <li class="page_item page-item-20"><a title="Testseite1" href="-">Testseite1</a></li>
        </ul>
    </div>
    Das die betreffende CSS:

    HTML-Code:
    #nav
    {
        background-color:#35779F;
    }
    #nav ul
    {
        padding:0px;
        margin:0px;
        list-style:none;
        height:30px;
    }
    #nav li
    {
        float:left;
        height:30px;
    }
    #nav ul li a
    {
        color:#FFFFFF;
        font-weight:bold;
        padding:0px 12px;
        text-decoration:none;
    }
    #nav ul li:hover
    {
        background-color:#4D93B9;
    }
    #nav ul li.current_page_item
    {
        background-color:#60A2C9;
    }
    #nav ul .current_page_item a
    {
        text-decoration:underline;
    }
    An der HTML Auszeichnung kann ich leider nichts ändern, da diese von Wordpress vorgegeben wird.

    Vielen Dank im Voraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    -

  2. #2
    Samurai Avatar von ludgerf321
    Registriert seit
    19.11.2007
    Ort
    Hannover
    Beiträge
    232
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Einfach,
    PHP-Code:
    line-height:30px
    einfügen. So gings immer bei mir, benutze aber eigene Schriften, daher mach ich des netmehr...
    Hier kannste auch nochmal schauen.

    LG Ludger

  3. #3
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Hi,

    wenn die Links display:block haben (sollten sie bei derartigen navis immer, damit die ganze Schaltfläche klickbar ist), greifen vertikale paddings dafür.

    Eine Höhe für ul/li brauchst du dann nicht.

    Die Zeilenhöhe durch line-height zu verändern, um das zu erreichen halte ich für keine gute Lösung, die Box wird ja dadurch nicht vergrößert.
    Außerdem benötigt line-height keine Maßeinheit weil es ein Faktor ist und das Ganze mit Maßeinheit zu Vererbungsproblemen führen kann (das steht auch in deinem geposteten Link!! ).
    Geändert von koslowski (24.01.2010 um 11:08 Uhr)

  4. #4
    Samurai Avatar von ludgerf321
    Registriert seit
    19.11.2007
    Ort
    Hannover
    Beiträge
    232
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Stimmt...
    Merke auch gerade, dass ich immer display:block; drinne hatte ...
    Naja wie gesagt, ich benutz nur noch Grafiken.

    LG Ludger

  5. #5
    Bandit
    Gast

    Standard AW: Link im <li> vertikal zentrieren

    Zitat Zitat von ludgerf321 Beitrag anzeigen
    Naja wie gesagt, ich benutz nur noch Grafiken.
    Das ist aber auch auf Dauer keine vernünftige Lösung.

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Link im <li> vertikal zentrieren

    also ich benutze nen span innerhalb vom a und mach die position relativ, dann kann ich munter loscoden und kann es frei nach schnauze positionieren.. denn nen echtes center sieht manchmal auch kacke aus...
    optik hat nicht immer was mit der echten mitte zu tun....
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Zitat Zitat von bandit600 Beitrag anzeigen
    Das ist aber auch auf Dauer keine vernünftige Lösung.
    mit den Techniken meiner Tuts doch.
    Da hat sogar der Screenreader kein Problem mit.

    synaptic machts ja auch so in der Art.

  8. #8
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Hallo,
    ich habe das noch nicht ganz verstanden . Wenn das mit line-height nicht so schön ist, wie soll dann das display:block gesetzt werden?

    wenn die Links display:block haben (sollten sie bei derartigen navis immer, damit die ganze Schaltfläche klickbar ist), greifen vertikale paddings dafür.
    Ich habe es mal hier eingefügt:

    Code:
    #nav ul li a
    {
        color:#FFFFFF;
        font-weight:bold;
        padding:0px 12px;
        text-decoration:none;
        display:block;
        vertical-align:middle;
    }
    Das vertical-align war nur testweise - funktioniert ja eh nur bei inline Elementen. Aber das display:block brachte so leider gar nichts. Wie ist das mit den vertikalen Paddings gemeint?

    Danke

    Edit:

    So funktioniert es:

    Code:
    #nav ul li a
    {
        color:#FFFFFF;
        font-weight:bold;
        padding:0px 12px;
        text-decoration:none;
        display:block;
        height:24px;
        padding-top:6px;
    }
    Kann man mit der Lösung leben?
    => Im IE6 und 5.5 wird die Navigation nicht gefloatet sondern untereinander dargestellt. Wenn ich dem li einen width gebe, geht es - ist aber sehr unschön => sollte es nicht auch ohne gehen?
    Geändert von Darkxor (24.01.2010 um 18:05 Uhr)
    -

  9. #9
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Zitat Zitat von Darkxor Beitrag anzeigen
    => Im IE6 und 5.5 wird die Navigation nicht gefloatet sondern untereinander dargestellt. Wenn ich dem li einen width gebe, geht es - ist aber sehr unschön => sollte es nicht auch ohne gehen?
    dann lass a auch floaten.

    Mit display:block wird das inline-Element zum Blockelement und damit so breit wie es geht.

    Wenn li ohne width floatet sollte a grundsätzlich auch immer floaten, schon wg. IE6.

    Am besten ist immer ein Link zum Problem.

  10. #10
    Meister(in)
    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Link im <li> vertikal zentrieren

    Die line-height: immer so hoch wie die Navigation

Ähnliche Themen

  1. Schrift vertikal zentrieren
    Von Macrosdesign im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 16.07.2008, 18:48
  2. Vertikal zentrieren
    Von schrepfer im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 08.04.2008, 17:21
  3. <div> Element vertikal zentrieren
    Von Tikonteroga im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.12.2006, 14:20
  4. Tabelle vertikal zentrieren
    Von step5 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.09.2005, 15:54
  5. Flash vertikal zentrieren
    Von McMetzger im Forum Flash Forum
    Antworten: 6
    Letzter Beitrag: 21.09.2004, 10:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •