css: vertical-align bei Blockelemnten

Diskutiere das Thema css: vertical-align bei Blockelemnten im Forum Web-Design

  1. wusa

    wusa Thread Starter 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 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 Mitglied

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

    ja Verpeilung meinserseits..
    Danke!
     
Die Seite wird geladen...
Ähnliche Themen - css vertical align
  1. tomasu
    Antworten:
    3
    Aufrufe:
    493
  2. Sonnenfrau
    Antworten:
    6
    Aufrufe:
    493
  3. gklinsel
    Antworten:
    7
    Aufrufe:
    510
  4. dennz2017
    Antworten:
    2
    Aufrufe:
    525
  5. Luzzy
    Antworten:
    17
    Aufrufe:
    3.979

MacUser.de weiterempfehlen

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...