css: vertical-align bei Blockelemnten

Dieses Thema im Forum "Web-Design" wurde erstellt von wusa, 12.03.2008.

  1. wusa

    wusa Thread Starter MacUser Mitglied

    Beiträge:
    536
    Zustimmungen:
    18
    Mitglied seit:
    24.08.2006
    Moin Zusammen,

    ich komm grad nicht weiter ich habe eine Navigation mit einer Liste gebaut
    die hyperlinks in der den <li> Elmenten sind als "display:block" definiert.
    ICh will aber dass die Schrift am unteren Rand des <li>-elemts augerichtet wird und bekomme es gard nicht gebacken. Hatte geacht das geht easy mit "vertical-align: bottom"

    Kann mir jemand helfen?

    Markup

    Code:
    echo "<ul>\n";
    echo "  <li><a href='/'>Home</a></li>\n";
    echo "  <li><a href='/'>Team</a></li>\n";
    echo "  <li><a href='/'>Arbeit</a></li>\n";
    echo "  <li><a href='/'>Referenzen</a></li>\n";
    echo "  <li class='lastElem'><a href='/'>Kontakt</a></li>\n";
    echo "</ul>\n";
    

    Stylesheet

    Code:
    /* ----- Definitionen für den 'Navigation'-Container. */
    #nav{
      float: right;
      }
      
    #nav ul {
      margin: 0; padding: 0;
      list-style: none;  
      }
      
    #nav ul li{
      float: left;
      width: 6em; height:118px;
      margin: 0; padding: 0;
      font-size: 1em;
      vertical-align: 100px;
      border-left: 1px solid #404040;
      }
    
      
    #nav a{
      height:118px;
      display: block;
      bottom: 10px;
      text-decoration: none;
      color: #fff;
      text-align: center;
      background: #1B1B1B url(../images/header_bg_gray.PNG) repeat-x top right;
      }
      
    #nav a:hover{
      text-decoration: none;
      background: #CCF330 url(../images/header_bg_green.PNG) repeat-x top right;
      }
    
    gruß|wusa
     
  2. dms

    dms

    Ganz grob und die Zahlen stimmen nicht
    Code:
    #nav a{
      height:80px;
      [b]padding-top:38px;[/b]
      display: block;
      text-decoration: none;
      color: #fff;
      text-align: center;
      background: #1B1B1B url(../images/header_bg_gray.PNG) repeat-x top right;
      }
    Sollte so inetwa machbar sein. vertical-align ist was anderes.
     
  3. wusa

    wusa Thread Starter MacUser Mitglied

    Beiträge:
    536
    Zustimmungen:
    18
    Mitglied seit:
    24.08.2006
    Nenenee,

    mit "padding" funzt das ganze nicht da sonst auch das komplette block element runtergeschoben wird...
    Es muss doch eine Möglichkeit geben?

    gruß|wusa
     
  4. dms

    dms

    padding verschiebt nichts. Natürlich muss die Höhe entsprechend verkleinert werden.
     
  5. wusa

    wusa Thread Starter MacUser Mitglied

    Beiträge:
    536
    Zustimmungen:
    18
    Mitglied seit:
    24.08.2006
    ooh..mannsen..

    ja Verpeilung meinserseits..
    Danke!
     
Die Seite wird geladen...
Ähnliche Themen - vertical align Blockelemnten
  1. Luzzy
    Antworten:
    17
    Aufrufe:
    3.939
  2. maceis
    Antworten:
    11
    Aufrufe:
    1.633

Diese Seite empfehlen