??Linker: Block-Element Link rutscht hoch

SELF-Forum

Block-Element Link rutscht hoch

??Linker
– Informationen zu den Bewertungsregeln

Schönen guten Abend,

ich erstelle hobbymäßig Webseiten und Applikationen für gemeinnützige Vereine. So auch jetzt. Allerdings habe ich ein Problem, bei dem ich keine Lösung finde: Ich habe durch Tabellen einen Kalender erstellt. In diesem Kalender sind einzelne Tage markiert und verlinkt. Hierfür habe ich die Links zu Blockelementen umgestaltet und Textdekorationen und -unterstreichung entfernt. Jetzt ist allerdings der Text hochgerutscht. Auch über line-height bekam ich keine Besserung. Ich habe das Problem mit margin und padding zwar erst beseitigen können, doch rutscht dann die Hintergrundfarbe nach unten. Ich bin jetzt seit ca. 17 Uhr mit dem Problem beschäftigt, finde aber keine Lösung. Daher möchte ich Euch dieses Rätsel nicht vorenthalten und hoffen, dass von Euch vielleicht jemand die Lösung findet.

Anbei die Dateiausschnitte:
html-Teil:

  
            <h4>Mai</h4>  
            <table class="monat">  
             <tr>  
              <td class="tag"></td>  
              <td class="tag">6</td>  
              <td class="tag">13</td>  
              <td class="tag">20</td>  
              <td class="tag">27</td>  
             </tr>  
             <tr>  
              <td class="tag"></td>  
              <td class="tag">7</td>  
              <td class="tag">14</td>  
              <td class="tag">21</td>  
              <td class="tag">28</td>  
             </tr>  
             <tr>  
              <td class="tag">1</td>  
              <td class="tag">8</td>  
              <td class="tag">15</td>  
              <td class="tag">22</td>  
              <td class="tag">29</td>  
             </tr>  
             <tr>  
              <td class="tag">2</td>  
              <td class="tag">9</td>  
              <td class="tag">16</td>  
              <td class="tag">23</td>  
              <td class="tag">30</td>  
             </tr>  
             <tr>  
              <td class="tag">3</td>  
              <td class="tag">10</td>  
              <td class="tag">17</td>  
              <td class="tag">24</td>  
              <td class="tag">31</td>  
             </tr>  
             <tr>  
              <td class="tag"><a class="samstag" href="<?PHP echo $_SERVER['REQUEST_URI'] ?>?fahrplan=samstag">4</a></td>  
              <td class="tag"><a class="samstag" href="<?PHP echo $_SERVER['REQUEST_URI'] ?>?fahrplan=samstag">11</a></td>  
              <td class="tag"><a class="samstag" href="<?PHP echo $_SERVER['REQUEST_URI'] ?>?fahrplan=samstag">18</a></td>  
              <td class="tag"><a class="samstag" href="<?PHP echo $_SERVER['REQUEST_URI'] ?>?fahrplan=samstag">25</a></td>  
              <td class="tag"></td>  
             </tr>  
             <tr>  
              <td class="tag">5</td>  
              <td class="tag"><a class="sonntag" href="<?PHP echo $_SERVER['REQUEST_URI'] ?>?fahrplan=sonntag">12</a></td>  
              <td class="tag">19</td>  
              <td class="tag"><a class="sonntag" href="<?PHP echo $_SERVER['REQUEST_URI'] ?>?fahrplan=sonntag">26</a></td>  
              <td class="tag"></td>  
             </tr>  
            </table>

style.css

* {  
font-family : 'lucida grande',tahoma,verdana,arial,sans-serif;  
font-size : 11px;  
padding : 0;  
margin : 0;  
border-spacing : 0;  
line-height : normal;  
}  
td.monat {  
width : 120px;  
}  
a.samstag, a.sonntag {  
<!--padding-top : 2.5px;  
margin-bottom : -2.5px;-->  
display : block;  
color : #000000;  
background-color : #00FFFF;  
text-decoration: none;  
text-underline: none;  
}  
a.samstag {  
background-color : #00FFFF;  
}  
a.sonntag {  
background-color : #FF9900;  
}  
td.tag, td.ltag, a.samstag, a.sonntag {  
text-align : center;  
vertical-align : middle;  
width : 20px;  
height : 20px;  
}  
td.monat, td.legende {  
background-color : #999999;  
}  
td.tag, td.ltag {  
background-color : #CCCCCC;  
}

Ich möchte im Vorraus für eure Hilfe danken.
Schöne Grüße
CW

P.s: Als Lösung möchte ich nicht die Zelle färben und den Link nur als Inline-Element nutzen...

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Block-Element Link rutscht hoch

    Baba
    – Informationen zu den Bewertungsregeln

    Ich kann "nach oben rutschen" nicht ganz nachvollziehen. Was genau meinst Du?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Block-Element Link rutscht hoch

      ??Linker
      – Informationen zu den Bewertungsregeln

      Hallo,
      dann werde ich mal die aufgekommenen Fragen bzw. Aussagen beantworten bzw. kommentieren:

      Ich kann "nach oben rutschen" nicht ganz nachvollziehen. Was genau meinst Du?

      Der Text innerhalb des Links steht 5px höher als der Text in den benachbarten Zellen ohne Link. Die Zellengröße jedoch ist identisch. Dies tritt sowohl bei ie, wie auch ff auf. Beispiel

      Hast du wirklich vier Hierarchieebenen für Überschriften? Falls nein, wäre ein h4-Element semantisch nicht korrekt. Wenn du h4 nur gewählt hast, weil dir dessen Default-Formatierung am besten zusagt, wäre das die falsche Strategie. Wähle die Elementtypen lieber nach der Dokumentstruktur, und formatiere sie passend mit CSS.

      Nein ich habe das h4 nicht genommen, weil mir das Default-Layout gefiel, ich habe lediglich diesen Teil nicht hier wiedergegeben.

      Es scheint so, als hätten alle Zellen in table.monat die Klasse "tag". Dann ist diese Klasse aber überflüssig; sie trifft dann weder eine inhaltliche Aussage, noch ist sie zur Selektierung durch CSS nötig, weil der Selektor table.monat td ebensogut passt.

      Danke das wird geändert.

      Über einen solchen Brutal-Reset in CSS kann man geteilter Meinung sein - ich finde ihn nicht gut und würde lieber gezielt die Elemente formatieren, die mir wichtig sind.

      Da die Default-Werte der einzelnen Browser doch unterschiedlich sind und ich die Schrift so überall brauche, sehe ich dies als, sagen wir mal, praktisch an und finde pauschal keinen Nachteil, da abweichende Elemente gezielt anders formatiert werden.

      Die Zeichenfolgen <!-- und --> begrenzen einen Kommentar in HTML, nicht aber in CSS. Die erste Eigenschaft, die in diesem CSS-Block steht, lautet also <!--padding-top und ist ungültig, die nächste lautet margin-bottom und bekommt den Wert -2.5px, die nächste lautet -->display und ist auch ungültig. Die gewünschte Definition display:block; ist damit unwirksam.
      Kommentare werden in CSS mit der Zeichenfolge /* kommentar */ gekennzeichnet.

      Der Fauxpas ist mir trotz Vorschau erst nach dem Absenden aufgefallen, doch konnte ich diesen leider nicht mehr ändern. Der Fehler resultiert hieraus jedoch nicht. Ich habe diesen Teil nur zur Veranschaulichung wieder eingefügt und dann falsch auskommentiert.

      Abgesehen davon sehe ich in deinem Code-Auszug keine td.monat, sondern nur viele td.tag.

      Der wiedergegebene html-Teil befindet sich in der Zelle der Klasse Monat.

      Kein Grrund, unwillkürrlich Buchstaben zu verrdoppeln.

      Stimmt. Aber auch keiner Leerzeichen zu unterschlagen ("ebenso gut") (Das war die Retourkutsche ;-D; auch wenn es ein häufig begangener Fehler ist).

      Hast Du / habt Ihr denn trotzdem eine Lösung für mein Problem?

      Schöne Grüße
      CW

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Block-Element Link rutscht hoch

        dedlfix
        – Informationen zu den Bewertungsregeln

        Tach!

        Hast Du / habt Ihr denn trotzdem eine Lösung für mein Problem?

        Der Firebug (und ähnliche Tools in den Browsern) ist dafür ja immer eine unschätzbare Hilfe. Mit diesem fand ich, dass die Tabellenzellen display:table-cell haben, deine a-Elemente jedoch display:block bekommen. Und dann dann die Eigenschaft vertical-align unterschiedlich gesetzt ist und interpretiert wird.

        dedlfix.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Block-Element Link rutscht hoch

        Der Martin
        – Informationen zu den Bewertungsregeln

        Moin,

        Der Text innerhalb des Links steht 5px höher als der Text in den benachbarten Zellen ohne Link. Die Zellengröße jedoch ist identisch. Dies tritt sowohl bei ie, wie auch ff auf. Beispiel

        noch besser als ein Bild zur Veranschaulichung wäre ein live-Beispiel gewesen, bei dem man auch den Code anschauen oder untersuchen kann. So kann man nur das Bild ansehen und feststellen: Deine Beobachtung stimmt, also machst du vermutlich irgendwas falsch.

        Kommentare werden in CSS mit der Zeichenfolge /* kommentar */ gekennzeichnet.
        Der Fauxpas ist mir trotz Vorschau erst nach dem Absenden aufgefallen, doch konnte ich diesen leider nicht mehr ändern. Der Fehler resultiert hieraus jedoch nicht. Ich habe diesen Teil nur zur Veranschaulichung wieder eingefügt und dann falsch auskommentiert.

        Dann würde mich erst recht der *echte* Code online interessieren.

        Abgesehen davon sehe ich in deinem Code-Auszug keine td.monat, sondern nur viele td.tag.
        Der wiedergegebene html-Teil befindet sich in der Zelle der Klasse Monat.

        Das ging aus deinem Code-Auszug nicht hervor, da war nur eine Tabelle (also table) der Klasse "monat".

        Kein Grrund, unwillkürrlich Buchstaben zu verrdoppeln.
        Stimmt. Aber auch keiner Leerzeichen zu unterschlagen ("ebenso gut")

        Wenn man das Kapitel zur Getrenntschreibung in der Rechtschreib_d_eform ausdrücklich ablehnt, schreibt man "ebensogut" auch weiterhin zusammen, wenn es als Adverb auftritt. Ich schreibe auch "radfahren" oder "sitzenbleiben" (eine Schulklasse wiederholen) weiterhin zusammen, "Delphin" mit 'ph' in der Mitte und "rauh" mit 'h' am Ende. Da bin ich stur.

        (Das war die Retourkutsche ;-D; auch wenn es ein häufig begangener Fehler ist).

        In Ordnung. Ob es ein Fehler ist, liegt im Auge des Betrachters. Und die Tatsache, dass es nach alter Rechtschreibung so richtig war, ist die Erklärung für das häufige Auftreten.

        Hast Du / habt Ihr denn trotzdem eine Lösung für mein Problem?

        Vielleicht. Lass uns das Problem live anschauen, dann entdeckt man eventuell leichter, wo der Hund vergraben ist.

        Ciao,
         Martin

        --
        Most experts agree: Any feature of a program that you can't turn off if you want to, is a bug.
        Except with Microsoft, where it is just the other way round.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Block-Element Link rutscht hoch

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich erstelle hobbymäßig Webseiten und Applikationen für gemeinnützige Vereine.

    aber gegen gutgemeinte Ratschläge, auch wenn sie nicht direkt mit der Frage zu tun haben, hast du auch nichts einzuwenden, oder? ;-)

    <h4>Mai</h4>

    Hast du wirklich vier Hierarchieebenen für Überschriften? Falls nein, wäre ein h4-Element semantisch nicht korrekt. Wenn du h4 nur gewählt hast, weil dir dessen Default-Formatierung am besten zusagt, wäre das die falsche Strategie. Wähle die Elementtypen lieber nach der Dokumentstruktur, und formatiere sie passend mit CSS.

    <table class="monat">

    <tr>
                  <td class="tag"></td>
                  <td class="tag">6</td>
                  <td class="tag">13</td>
                  <td class="tag">20</td>
                  <td class="tag">27</td>
                 </tr>

      
Es scheint so, als hätten alle Zellen in table.monat die Klasse "tag". Dann ist diese Klasse aber überflüssig; sie trifft dann weder eine inhaltliche Aussage, noch ist sie zur Selektierung durch CSS nötig, weil der Selektor `table.monat td`{:.language-css} ebensogut passt.  
  

> ~~~css

* {  

> font-family : 'lucida grande',tahoma,verdana,arial,sans-serif;  
> font-size : 11px;  
> padding : 0;  
> margin : 0;  
> border-spacing : 0;  
> line-height : normal;  
> }

    Über einen solchen Brutal-Reset in CSS kann man geteilter Meinung sein - ich finde ihn nicht gut und würde lieber gezielt die Elemente formatieren, die mir wichtig sind.

    td.monat {

    width : 120px;
    }
    a.samstag, a.sonntag {
    <!--padding-top : 2.5px;
    margin-bottom : -2.5px;-->
    display : block;
    color : #000000;
    background-color : #00FFFF;
    text-decoration: none;
    text-underline: none;
    }

      
Die Zeichenfolgen <!-- und --> begrenzen einen Kommentar in HTML, nicht aber in CSS. Die erste Eigenschaft, die in diesem CSS-Block steht, lautet also <!--padding-top und ist ungültig, die nächste lautet margin-bottom und bekommt den Wert -2.5px, die nächste lautet -->display und ist auch ungültig. Die gewünschte Definition display:block; ist damit unwirksam.  
Kommentare werden in CSS mit der Zeichenfolge /\* kommentar \*/ gekennzeichnet.  
  
Abgesehen davon sehe ich in deinem Code-Auszug keine td.monat, sondern nur viele td.tag.  
  
Es gibt einen anderen "Hack", um CSS-Definitionen testweise unwirksam zu machen: Man stellt ihnen einen beliebigen Buchstaben voran, der dann einen ungültigen Namen ergibt - aus "padding" wird zum Beispiel "ppadding", was ungültig ist und ignoriert wird.  
  

> Ich möchte im Vorraus für eure Hilfe danken.  
  
Kein Grrund, unwillkürrlich Buchstaben zu verrdoppeln.  
  
So long,  
 Martin  

-- 
Auf jeden Menschen auf der ganzen Welt entfallen statistisch gesehen etwa 3000 Spinnen, wie Wissenschaftler jetzt festgestellt haben.  
Wer will meine haben? Denn ich will sie bstimmt nicht.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln