Anzeige

link-Element in Div ausrichten

link-Element in Div ausrichten | PSD-Tutorials.de

Erstellt von the_real_didi, 07.05.2009.

  1. the_real_didi

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    link-Element in Div ausrichten
    Ahoi zusammen,

    ich habe ein Problem beim Ausrichten von Link-Elementen in einem Div.

    von Typo3 wird für jeden Menüpunkt ein Div mit dem Link als Inhalt erstellt.
    Hier ein Beispiel:

    Code (Text):
    1.  
    2. <div class="menu1-level1-no"><a href="index.php?id=2" onfocus="blurLink(this);">get it ...</a></div>
    Ich zeige euch mal das Ergebnis und sage dann etwas dazu.
    [​IMG]

    die rot umrahmten Elemente sind die Divs, die den link enthalten. das schwarz umrahmte ist der entsprechende link.

    mein ziel ist nun den Linktext im Div vertikal zentriert anzuzeigen. Da vertical-align: middle; kein Ergebnis geliefert hat, wollte ich die Positionierung per padding und margin vornehmen. Padding-left für die links hat auch funktioniert aber bei padding-top wird zwar der link nach oben hin erweitert, allerdings nicht innerhalb des divs nach unten verschoben. (siehe schwarze Rahmen)

    hier der CSS-Code

    Code (Text):
    1.  
    2. .menu1-level2-no {
    3.     background-image: url(../Bilder/Template_Getaf_prod_28.jpg);
    4.     background-repeat: no-repeat;
    5.     height: 27px;
    6.     width: 296px;
    7.     border: 1px solid #ff0000;
    8.  
    9. }
    10.  
    11. .menu1-level2-act {
    12.     background-image: url(../Bilder/Template_Getaf_prod_32.jpg);
    13.     background-repeat: no-repeat;
    14.     height: 27px;
    15.     width: 296px;
    16. }
    17.  
    18. .menu1-level2-no a {
    19.     padding-left: 40px;
    20.     padding-top: 10px;
    21.     font-weight: bold;
    22.     text-decoration: none;
    23.     border: 1px solid #000000;
    24. }
    25.  
    26. .menu1-level2-act a {
    27.     padding-left: 40px;
    28.     padding-top: 10px;
    29.     font-weight: bold;
    30.     text-decoration: none;
    31. }
    32.  
    Bin im Moment echt ratlos, woran das liegt. Ich hoffe, ihr könnt mir da weiter helfen.
     
    #1      
  2. Gackoo_duz

    Gackoo_duz Gackoo

    Dabei seit:
    03.09.2008
    Beiträge:
    285
    Geschlecht:
    männlich
    Software:
    CS6 Masterkollection, C4d, u.a
    Kameratyp:
    Nikon D5000, D90
    link-Element in Div ausrichten
    AW: link-Element in Div ausrichten

    Im Code steht
    <div class="menu1-level1-no

    in der CSS Sehe ich keinen Eintrag davon, ausser dem <a> Tag.
     
    #2      
  3. the_real_didi

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    link-Element in Div ausrichten
    AW: link-Element in Div ausrichten

    ah, sorry, habe aus dem Seiten-Quelltext das falsche Element heraus gepickt.
    Code (Text):
    1.  
    2. <div class="menu1-level2-no"><a href="index.php?id=10" onfocus="blurLink(this);">Kontakt</a></div>
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    link-Element in Div ausrichten
    #4      
  5. the_real_didi

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    link-Element in Div ausrichten
    AW: link-Element in Div ausrichten

    vielen Dank, line-height hat funktioniert.

    gibt es eine möglichkeit den Bereich für den Link auf die Größe des Divs zu bringen, dass man auf den gesamten Bereich und nicht nur auf den Text klicken kann?
     
    Zuletzt bearbeitet: 07.05.2009
    #5      
  6. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    link-Element in Div ausrichten
    AW: link-Element in Div ausrichten

    display: block; fuer die Anker
     
    #6      
  7. the_real_didi

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    link-Element in Div ausrichten
    AW: link-Element in Div ausrichten

    besten Dank. funktioniert.
     
    #7      
x
×
×