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

Problem mit Ausrichtung von Text und Grafik in einer Zeile

Dieses Thema im Forum "CSS" wurde erstellt von holger_buns, 17. April 2015.

  1. holger_buns

    holger_buns Mitglied

    Hallo, ich möchte in einem Menü zu einem Text-Link noch eine Grafik dahinter positionieren. Leider verschiebt er mir die Grafik aber in die nächste Zeile unterhalb des Textlinks. ich bekomme die Grafik nicht so positioniert, dass diese direkt rechts neben dem Text-Link erscheint. Die Grafik ist 15x15px groß. Wer kann mir helfen?

    Es geht um die Grafik ...flagge_d.png

    HTML:
    1. <ulid="t_menu_upper">
    2. <listyle="line-height:25px;"><aclass="active_upper"href="index_nl.html">Home</a> // <ahref="index.html">Deutsch <imgsrc="images/flagge_d.png"style="vertical-align:middle"alt="Flagge D"/></a> // <aclass="active_upper"href="index_nl.html">Nederlands</a> // <ahref="sites/datenschutzhinweis_nl.html">Datenschutzhinweis</a> // <ahref="sites/impressum_nl.html">Impressum</a></li>
    3. <!--<li><a class="active_upper" href="index_nl.html">Deutsch</a> // <a href="#">Niederl&auml;ndisch</a></li>-->
    4. </ul>
    Hier der CSS Teil für t_menu_upper

    Code (CSS):
    1. #t_menu_upper li {
    2. margin-right:25px;
    3. display:inline;
    4. height:20px;
    5. font-family:cabin, sans-serif;
    6. font-size:12px;
    7. color:#77131d;
    8. }
    9. #t_menu_upper li a,#t_menu_upper li a:link,#t_menu_upper li a:visited,#t_menu_upper li a:active,#t_menu_upper li a:hover,#t_menu_upper li.active_upper a,#t_menu_upper li.active_upper a:link,#t_menu_upper li.active_upper a:visited,#t_menu_upper li.active_upper a:active,#t_menu_upper li.active_upper a:hover {
    10. display:inline-block;
    11. height:20px;
    12. line-height:20px;
    13. font-family:cabin, sans-serif;
    14. font-weight:400;
    15. font-size:12px;
    16. color:#77131d;
    17. text-decoration:none;
    18. text-transform:none;
    19. padding:0;
    20. }
    21. #t_menu_upper li a:hover.active_upper {
    22. text-decoration:none;
    23. }
    Gruss
    Holger
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Welcher Browser ist gemeint?

    Ich kann den Fehler in keinem der gängigen u. aktuellen Browser reproduzieren (OS: Win7).

    PS: Warum fehlen hier überhaupt in deinem HTML-Snippet die Leerzeichen zwischen den einzelnen Attributen?
     
  3. holger_buns

    holger_buns Mitglied

    Hm, warum die leerzeilen fehlen weiss ich leider auch nicht. Ich habs einfach hier rein kopiert. Bei mir sind die Leerzeichen da.

    Was meinst du damit das der Fehler nicht bei dir sichtbar ist. Wird bei dir direkt neben Deutsch eine Grafik angezeigt?
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Ja.

    Existiert evtl. im weiteren Stylesheet für <img> eine CSS-Regel namens display:block?

    Die würde diesen Fehler erklären.
     
    iCup gefällt das.
  5. holger_buns

    holger_buns Mitglied

  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Bingo ;)
    Lösung, falls die Regel anderweitig benötigt wird:
    Code (CSS):
    1. #t_menu_upper img {display:inline}
     
    iCup gefällt das.
  7. holger_buns

    holger_buns Mitglied

    O.k. Danke funktioniert!
     
Die Seite wird geladen...