opi: vertical-align im a-Tag bei width und height von 100%

Hallo,

ich habe mich an dem Beitrag von Gernot orientiert, um Tabellen-
spalten mit Mouseover ohne JS zu realisieren.

http://forum.de.selfhtml.org/archiv/2005/2/t101072/#m620079

Wie aber kann ich nun den Link vertikal zentriert ausrichten?
Mit vertical-align funktionniert es leider nicht (IE). Was allerdings
funktioniert ist text-align.

Hat jemand eine Idee?

Greez,
opi

--
Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
  1. Hallo,

    ich habe mich an dem Beitrag von Gernot orientiert, um Tabellen-
    spalten mit Mouseover ohne JS zu realisieren.

    http://forum.de.selfhtml.org/archiv/2005/2/t101072/#m620079

    Wie aber kann ich nun den Link vertikal zentriert ausrichten?
    Mit vertical-align funktionniert es leider nicht (IE). Was allerdings
    funktioniert ist text-align.

    text-align ist für die horizontale ausrichtung!!!

    Poste bitte mal deinen Code dann finden wir vielleicht den Fehler!

    mit vertical-align:middle sollte es aber eigenltich gehen.

    1. Hallo,

      Wie aber kann ich nun den Link vertikal zentriert ausrichten?
      Mit vertical-align funktionniert es leider nicht (IE). Was allerdings
      funktioniert ist text-align.

      text-align ist für die horizontale ausrichtung!!!

      Das habe ich natülich s/nicht// gewußt!!! Aber danke für die Info :-)

      Poste bitte mal deinen Code dann finden wir vielleicht den Fehler!

      Das habe ich doch schon!

      Hier also nochmal:

      http://forum.de.selfhtml.org/archiv/2005/2/t101072/#m620079

      Einfach ein "vertical-align:middle;" im "td a {}" einfügen.

      Mit text-align wollte ich nur zum Ausdruck bringen, dass ich das
      vertical-align richtig platziert hatte.

      mit vertical-align:middle sollte es aber eigenltich gehen.

      Greez,
      opi

      --
      Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
  2. Hallo opi,

    ich habe mich an dem Beitrag von Gernot orientiert, um Tabellen-
    spalten mit Mouseover ohne JS zu realisieren.

    http://forum.de.selfhtml.org/archiv/2005/2/t101072/#m620079

    Wie aber kann ich nun den Link vertikal zentriert ausrichten?
    Mit vertical-align funktionniert es leider nicht (IE). Was allerdings
    funktioniert ist text-align.

    was soll denn in den Zellen vertikal und horizontal zentriert werden? Solange dessen Höhe feststeht, wüsste ich eine Möglichkeit mit relativer Positionierung und einem zusätzlichen Element. Sobald das aber z.B. unterschiedlich viel Text in unterschiedlicher Schriftgröße sein kann, wäre ich mit meinem Latein am Ende.

    Gruß Gernot

    1. Hallo,

      was soll denn in den Zellen vertikal und horizontal zentriert werden?

      Der <a href="#">Linkname</a> soll vertikal zentriert werden.

      Solange dessen Höhe feststeht, wüsste ich eine Möglichkeit mit relativer Positionierung und einem zusätzlichen Element. Sobald das aber z.B. unterschiedlich viel Text in unterschiedlicher Schriftgröße sein kann, wäre ich mit meinem Latein am Ende.

      Und genau das scheint mein Problem zu sein. Der Text (Linkname) kann
      sehr lang werden :-)

      Ich habe es allerdings mit ein wenig Schummlerei geschafft, aber ob
      das die optimalste Lösung ist (CSS, no JS), weiß ich leider nicht.

      <html>
      <head>
      <title></title>
      <meta name="author" content="Gernot Back">
      <meta name="generator" content="Ulli Meybohms HTML EDITOR">
      <style type="text/css">
      <!--
      html, body {
        margin:0px;
        padding:0px;
      }

      table {
        width:100%;
        height:100%;
      }

      td a {
        width:100%;
        height:100%;
        background-color:#ff0000;
        display:block;
      }

      td a:hover {
        background-color:#00ff00;
      }
      -->
      </style>
      </head>
      <body>
      <table cellspacing="0" cellpadding="0">
      <tr>
       <td>
        <a href="#1">
         <table style="width:100%;height:100%;">
          <tr><td style="text-align:center;vertical-align:middle;">feld 1</td></tr>
         </table>
        </a>
       </td>
       <td><a href="#2">feld 2</a></td>
      </tr>
      <tr>
       <td><a href="#3">feld 3</a></td>
       <td><a href="#4">feld 4</a></td>
      </tr>
      </table>
      </body>
      </html>

      Greez,
      opi

      --
      Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
      1. Hallo opi,

        <a href="#1">
           <table style="width:100%;height:100%;">
            <tr><td style="text-align:center;vertical-align:middle;">feld 1</td></tr>
           </table>
          </a>

        Vom Validator kriegst du das aber um die Ohren gehauen, und ob das in allen Browsern funktioniert, ist auch sehr fraglich.

        Gruß Gernot

        1. Hallo Gernot,

          Hallo opi,

          <a href="#1">
             <table style="width:100%;height:100%;">
              <tr><td style="text-align:center;vertical-align:middle;">feld 1</td></tr>
             </table>
            </a>

          Vom Validator kriegst du das aber um die Ohren gehauen, und ob das in allen Browsern funktioniert, ist auch sehr fraglich.

          kann ich mir gut vorstellen, aber es gibt wahrscheinlich keine
          andere Lösung.

          Oder wie könnte ich das sonst realisieren?

          Ich realisiere ein kleines Forum, das folgenden Aufbau hat:

          ------------------------------------------------------------------
          |         |                      |  Author,   |                  |
          |  Image  |  Titel des Beitrags  |  Datum,    |  weitere Felder  |
          |         |                      |  Uhrzeit   |                  |
          ------------------------------------------------------------------
          |         |                      |  Author,   |                  |
          |  Image  |  Titel des Beitrags  |  Datum,    |  weitere Felder  |
          |         |                      |  Uhrzeit   |                  |
          ------------------------------------------------------------------
          |         |                      |  Author,   |                  |
          |  Image  |  Titel des Beitrags  |  Datum,    |  weitere Felder  |
          |         |                      |  Uhrzeit   |                  |
          ------------------------------------------------------------------

          Es ist halt mein Wunsch, das sich der Hintergrund des Titels beim
          Überfahren mit der Maus anders färbt. Genauso gibt es in den weiteren
          Felden ebenfalls Links.

          Greez,
          opi

          --
          Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
          1. Hallo opi,

            Ich realisiere ein kleines Forum, das folgenden Aufbau hat:


            |         |                      |  Author,   |                  |
            |  Image  |  Titel des Beitrags  |  Datum,    |  weitere Felder  |
            |         |                      |  Uhrzeit   |                  |

            |         |                      |  Author,   |                  |
            |  Image  |  Titel des Beitrags  |  Datum,    |  weitere Felder  |
            |         |                      |  Uhrzeit   |                  |

            |         |                      |  Author,   |                  |
            |  Image  |  Titel des Beitrags  |  Datum,    |  weitere Felder  |
            |         |                      |  Uhrzeit   |                  |

            Es ist halt mein Wunsch, das sich der Hintergrund des Titels beim
            Überfahren mit der Maus anders färbt. Genauso gibt es in den weiteren
            Felden ebenfalls Links.

            Ja aber dieses Gimmick ist doch nicht so wichtig, als ob man es nicht auch mit JS realisieren könnte, und damit ist es ja auch nicht schwer!

            Ich meine die Seite bleibt doch auch für Leute, die das Geflimmer vielleicht bewusst aus solchen Gründen abstellen, indem sie JS deaktiveiren nutzbar.

            Gruß Gernot

            1. Hallo Gernot,

              Es ist halt mein Wunsch, das sich der Hintergrund des Titels beim
              Überfahren mit der Maus anders färbt. Genauso gibt es in den weiteren
              Felden ebenfalls Links.

              Ja aber dieses Gimmick ist doch nicht so wichtig, als ob man es nicht auch mit JS realisieren könnte, und damit ist es ja auch nicht schwer!

              Ich meine die Seite bleibt doch auch für Leute, die das Geflimmer vielleicht bewusst aus solchen Gründen abstellen, indem sie JS deaktiveiren nutzbar.

              ok, diese Worte habe ich mir mal zu Herzen genommen und da ich kein
              Javascript kann, habe ich erstmal nach ein Lösung gesucht und musste
              mich ein wenig einarbeiten, bis ich dann entdeckte, dass ich für die
              Zentralisierung eine extra .js Datei einrichten muss.

              Das hat mir natürlich überhaupt nicht gepasst und habe nach einer
              Lösung gesucht, um die Formatierungen mit Javascript mit in die .css
              Datei aufnehmen zu können.

              Ich bin also folgendermaßen vorgegangen...

              So schaut die test.htm aus:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
              <html>  
              <head>  
                 <title>JS-Test</title>  
                 <link rel="stylesheet" type="text/css" href="/css/test.css">  
                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
                 <script language="JavaScript" type="text/JavaScript">  
                    function switchClass(obj,strClassName) {  
                       obj.className = strClassName;  
                    }  
                 </script>  
              </head>  
              <body>  
              <table style="width:50%;height:10em;margin:0;padding:0;border-collapse:collapse;">  
                 <tr>  
                    <td class="feld" OnMouseOver="switchClass(this,'feldOver');" OnMouseOut="switchClass(this,'feld');">Feld 1</td>  
                    <td style="width:50%;height:50%;border:1px solid black;">  
                    </td>  
                 </tr><tr>  
                    <td style="width:50%;height:50%;border:1px solid black;">  
                    </td>  
                    <td style="width:50%;height:50%;border:1px solid black;">  
                    </td>  
                 </tr>  
              </table>  
              </body>  
              </html>
              

              und so meine test.css:

              .feld { background-color:#A2B5CD; width:50%; height:50%; }
              .feldOver { background-color:#ACE; }

              Kann man das gelten lassen?

              Greez,
              opi

              --
              Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
              1. Hallo opi,

                Kann man das gelten lassen?

                Ich hätte da auf den ersten Blick nichts zu beanstanden. Validieren lässt sich das auch.

                Gruß Gernot

                1. Hallo,

                  Hallo opi,

                  Kann man das gelten lassen?

                  Ich hätte da auf den ersten Blick nichts zu beanstanden. Validieren lässt sich das auch.

                  Hast du zu beanstanden, dass in meinem Code etwas nicht konform ist
                  oder das ich es selbst validieren sollte :-)

                  Greez,
                  opi

                  --
                  Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
                  1. Hallo opi,

                    Hast du zu beanstanden, dass in meinem Code etwas nicht konform ist
                    oder das ich es selbst validieren sollte :-)

                    Ich habe nichts zu beanstanden, aber ich bin ja nicht maßgeblich. Der Validator hat aber auch nichts zu beanstanden, wie du selbst überprüfen kannst.

                    Herzlichen Glückwunsch.

                    ;-)

                    Gruß Gernot

                    1. Hallo,

                      Ich habe nichts zu beanstanden, aber ich bin ja nicht maßgeblich. Der Validator hat aber auch nichts zu beanstanden, wie du selbst überprüfen kannst.

                      oh, das habe ich :-)

                      et lopt ...

                      Danke für die Hilfe!

                      Greez,
                      opi

                      --
                      Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|
                2. Hallo,

                  Ich hätte da auf den ersten Blick nichts zu beanstanden. Validieren lässt sich das auch.

                  das habe ich jetzt doch nicht ganz verstanden!

                  Was heißt "benötigen Sie einen korrekten Parsebaum des Dokuments" ?

                  Soll ich etwa

                  .feld {
                     background-color : #a2b5cd;
                     width : 50%;
                     height : 50%;
                  }
                  .feldOver {
                     background-color : #ace;
                  }

                  statt

                  .feld { background-color:#a2b5cd; width:50%; height:50%; }
                  .feldOver { background-color:#ace; }

                  schreiben?

                  Greez,
                  opi

                  --
                  Selfcode: ie:( fl:( br:^ va:) ls:] fo:) rl:( n4:? ss:| de:] ch:? mo:|