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

- css
0 Greedy_Raccoon0 opi
0 Gernot Back
0 opi
0 Gernot Back
0 opi
0 Gernot Back
0 opi
0 Gernot Back
0 opi
0 Gernot Back
0 opi
0 opi
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
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.
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
Hallo opi,
ich habe mich an dem Beitrag von Gernot orientiert, um Tabellen-
spalten mit Mouseover ohne JS zu realisieren.
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
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
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
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
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
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
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
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
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
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
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