Nhjo: Textposition innerhalb eines CSS-Buttons

SELF-Forum

Textposition innerhalb eines CSS-Buttons

Nhjo
– Informationen zu den Bewertungsregeln

Hallo,
ich versuche verzweifelt, den Text innerhalb eines CSS-Buttons zu positionieren (linksbündig unten)!
Linksbündig geht ja, aber er läßt sich nicht dazu überreden, nach unten zu wandern. Vielleicht hat ja jemand eine Idee?!

CSS:
a.menu {
 float: right;
 width: 120px;
 height: 70px;
 font-size: 10pt;
 background-color: #5f7683;
 margin-left: 3px;
 text-indent: 5px;
}

a.menu:link    {
 float: left;;
 background-color: #5f7683;
 text-decoration: none;
 color: #FFFFFF;
 vertical-align: middle;
}
a.menu:visited {
 color: #FFFFFF;
 background-color: #5f7683;
 text-decoration: none;
}
a.menu:hover   {
 color: #FFFFFF;
 background-color: #5f836a;
 text-decoration: none;
}
a.menu:active  {
 color: #FF0000;
 background-color :#5f836a;
 text-decoration: none;
}
------------------------------------------------
HTML:
<div id="menu">
   <div align="left">
            <a class="menu" href="index.htm"> Home</a>
   <a class="menu" href="links/index.htm">Links</a>
     <a class="menu" href="mailto:name@domain.de">&nbsp;E-Mail</a>
            </div>
</div>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Textposition innerhalb eines CSS-Buttons

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Linksbündig geht ja, aber er läßt sich nicht dazu überreden, nach unten zu wandern. Vielleicht hat ja jemand eine Idee?!

    a.menu:link    {
    vertical-align: middle;

    Wirkt nicht wegen „'vertical-align'[…] Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente“ [CSS2 §10.8]

    Mit 'line-height' ließe sich da wohl was machen – solange der Linktext nur einzeilig ist, worauf du aber wenig bis gar keinen Einfluss hast.

    Eher bieten sich wohl 'margin-top' oder 'padding-top' an.

    <div id="menu">
       <div align="left">
                <a class="menu" href="index.htm"> Home</a>
       <a class="menu" href="links/index.htm">Links</a>
         <a class="menu" href="mailto:name@domain.de">&nbsp;E-Mail</a>
                </div>
    </div>

    Wie hat sich das 'align'-Attribut dahin verirrt, wenn du doch _alle_ Darstellungsangaben mit CSS machen möchtest?

    Die Klassifizierung der 'a'-Elemente macht keinen Sinn, wenn sie alle derselben Klasse angehören. Du kannst sie in CSS auch mit dem Nachfahrenselktor selektieren: '#menu a {}'.

    Den Sinn von zwei verschachtelten 'div' sehe ich auch nicht. Außerdem: Warum 'div'?

    Ich möchte gern eine Liste sein, bitte bitte lass mich ein 'ul' ('ol') sein! (frei nach wahsaga)

    So sollte es aussehen:

    <ul id="menu">  
  <li><a href="index.htm">Home</a></li>  
  <li><a href="links/index.htm">Links</a></li>  
  <li><a href="mailto:name@domain.de">E-Mail</a></li>  
</ul>

    Aber natürlich Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen] beachten: „Verlinke niemals auf die aktuelle Seite.“

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln