Forum Doku Wiki Blog

Forumsarchiv 2005, September
vertical-align im a-Tag bei width und height von 100%

archivierte Beiträge lesen

  1. (CSS) vertical-align im a-Tag bei width und height von 100% von opi, 06. 09. 2005, 14:10

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

Der folgende Beitrag wurde am 06. 09. 2005, 14:10 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 06. 09. 2005, 14:58 Uhr von Greedy_Raccoon veröffentlicht.

> 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.

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

Der folgende Beitrag wurde am 06. 09. 2005, 15:06 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 06. 09. 2005, 16:03 Uhr von Gernot Back veröffentlicht.

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

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

Der folgende Beitrag wurde am 06. 09. 2005, 16:17 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 06. 09. 2005, 16:24 Uhr von Gernot Back veröffentlicht.

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

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

Der folgende Beitrag wurde am 06. 09. 2005, 17:17 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 06. 09. 2005, 17:58 Uhr von Gernot Back veröffentlicht.

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

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

Der folgende Beitrag wurde am 07. 09. 2005, 13:33 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 07. 09. 2005, 14:25 Uhr von Gernot Back veröffentlicht.

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

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

Der folgende Beitrag wurde am 07. 09. 2005, 14:39 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 07. 09. 2005, 14:58 Uhr von Gernot Back veröffentlicht.

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

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

Der folgende Beitrag wurde am 07. 09. 2005, 16:10 Uhr von opi veröffentlicht.

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:|

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

Der folgende Beitrag wurde am 07. 09. 2005, 14:49 Uhr von opi veröffentlicht.

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:|

© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4