• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

verticale Ausrichtung bei Tabellenzelle als Link

B

Basti2o1o

Neues Mitglied
Hallo,

ich habe ein Kalender, bei dem einzelne Tage als Link dargestellt werden. Klappt auch.
Das Problem ist die verticale Ausrichtung des Links in der Tabell (Zelle).
Wenn ich nur die Zahl als Link setze geht es, nur wenn ich die ganze Zelle als Link setze nicht, also wenn ich display:block; setze bei a.infobox
Weiß vielleicht jemand, wie ich die Zahl auf die gleiche Höhe bekomme wie dort, wo kein Link ist?

Hier einmal der Quelltext:

PHP: 
<html>

<head>

<style type="text/css">
  a.infobox { border-bottom: 0px dashed #c30; text-decoration:none; color:#FFFFFF; display:block; height:25px; }
  a.infobox:hover { color:#FFFFFF;  }
  a.infobox span { visibility:hidden; position:absolute; margin-left:-90px;
    margin-top:-190px; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible;
    border:0px solid #c30; color:blue; 
    background-image:url(hinter.png); 
}

  a.infobox span { text-align:justify; width:179px; height:170px; }

 .date
{
width:25px; height:30px; border:solid 1px #000000;
text-align:center;
background:url(calendar_day_bg.gif);
font-family: 'Arial';
font-size: 12px;
font-weight:bold;
}

 .date1
{
width:25px; height:30px; border:solid 1px #000000;
text-align:center;
color:#999999;
font-family: 'Arial';
font-size: 12px;
}

.head
{
border:solid 1px #cccccc;
background-color:#cccccc;
text-align:center;
font-family: 'Arial';
font-size: 12px;
font-weight:bold;

}

.link
{
width:25px; height:30px; border:solid 1px #000000;
text-align:center;
background:url(calendar_raceday_bg.gif);
font-family: 'Arial';
font-size: 12px;
font-weight:bold;
}
</style>
<!--[if IE 5]><style type="text/css">
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
</style><![endif]-->

</head>

<body>
<br><br><br>
<table cellpadding="1" cellspacing="1">
<tr><td colspan="7" class="head">August</td></tr>
<tr>
<td class="date1">25</td>
<td class="date1">26</td>
<td class="date1">27</td>
<td class="date1">28</td>
<td class="date1">29</td>
<td class="date1">30</td>
<td class="date1">31</td>
</tr>

<tr>
<td class="date">1</td>
<td class="date">2</td>
<td class="date">3</td>
<td class="date">4</td>
<td class="link"><a class="infobox">5<span>
<center>
<table border="0"><tr>
<?php echo "<tr><td colspan='3' style='font-size:10px; font-family:Verdana; color:#000000;'><center><b>1. Spieltag<br><br><b>$date0101</b></td></tr>";  ?>
<tr><td style="text-align:right; font-size:10px; font-family:Verdana; color:#000000;">
<?php echo "$spiel0101"; ?></td><td style="font-size:10px; font-family:Verdana; color:#000000;"><center>&nbsp;:&nbsp;</td><td style="font-size:12px; font-family:Verdana; color:#000000;">
<?php echo "$spiel0102"; ?></td></tr></table></center>
</span></a></td>

<td class="date">6</td>
<td class="date">7</td>
</tr>
<tr>
<td class="date">8</td>
<td class="date">9</td>
<td class="date">10</td>
<td class="date">11</td>
<td class="date">12</td>
<td class="date">13</td>
<td class="date">14</td>
</tr>
<tr>
<td class="date">15</td>
<td class="date">16</td>
<td class="date">17</td>
<td class="date">18</td>
<td class="date">19</td>
<td class="date">20</td>
<td class="date">21</td>
</tr>
<tr>
<td class="date">22</td>
<td class="date">23</td>
<td class="date">24</td>
<td class="date">25</td>
<td class="date">26</td>
<td class="date">27</td>
<td class="date">28</td>
</tr>
<tr>
<td class="date">29</td>
<td class="date">30</td>
<td class="date">31</td>
<td class="date1">1</td>
<td class="date1">2</td>
<td class="date1">3</td>
<td class="date1">4</td>
</tr>

</table>

</body>

</html>

Hier einmal hochgeladen, damit ihr sehen könnt wie es aussieht. http://ib-tenbieg.de/eintrachtforum/neu/kallender2.php

Besten Dank schonmal,
Gruß, Basti
 
<a class="infobox">5 usw. <- das ist der Link, der zu keiner Seite verweißt, sondern ein Infofenster öffnet. Deutlich rot hinterlegt. Kaum zu übersehen.
Der Quelltext ist ein Ausschnitt aus einer größeren Datei, hier alles unnötige weggelassen damit es übersichtlicher ist was gemeint ist.
Was meinst du mit "stört die Ansicht mit Sicherheit" ?

Also wenn jemand eine Idee hat wie ich die "5" auf die gleiche Höhe bekomme wie die Zahlen ohne Link dann bitte posten.

Danke.
 
Informiere dich bitte über das Grundgerüst einer HTML-Seite:
SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei
Und über Doctypes und was passiert, wenn man diese weglässt:
10 Tipps für eine perfekte Webseite! Teil 2: Kein Dokument ohne DOCTYPE
Programmierung: Doctypes - welcher ist der Richtige?

Dein Quellcode ist dermaßen fehlerhaft, dass mein Firebug hier nicht mal alles richtig angezeigt. So kann deine Webseite nicht richtig dargestellt werden. Valider Quellcode wäre wie gesagt das erste Ziel was Du anstreben solltest. Du hast z.B. jetzt innerhalb dieses Links eine Tabelle und was weiß ich noch alles hinterlegt - das ist falsch, nicht valide, und führt zur Darstellungsproblemen.

Die vertikale Ausrichtung innerhalb eines Blockelements ist nicht möglich. Den Link hast Du zu einem solchen gemacht. Theoretisch müsstest Du die festgelegte Höhe weglassen und den Inhalt per padding ausrichten. Wenn mein Firebug mich nicht auf Grund des fehlerhaften Quellcodes täuscht, müsste stattdessen ein "padding: 5px" ausreichen.
 
Ich weiß wie man richtigen HTML Code schreibt. Ich habe ein ganzes Bundesliga Tippspiel mit php und MySQL programmiert. Und wie gesagt ist das nur ein Auszug ohne DOCTYPE usw. Nur für diese Frage wesentlicher Code.

Habe "padding: 5px" gesetzt und das Blockelement entfernt. Von der Höhe passt es jetzt auch, nur wollte ich, dass die ganze Zelle als Link aggiert. Jetzt macht er neben der Zahl rechts und links nur 5 px als Link. Mit width:100% funktioniert es auch nicht. Hat vielleicht jemand noch eine Idee wie es in der Breite gehen könnte?
 
Ich sagte nicht, dass Du display weglassen solltest sondern die feste Höhe. Dann passt es bei mir im FF sowohl vertikal als auch horizontal, natürlich immer noch unter der Maßgabe, dass es keinen Doctype gibt. Im FF ist auch die ganze Zelle verlinkt, so wie Du es willst.
 
Jo so funktioniert es, danke.
Wie ich gesagt hab war das nur ein Ausschnitt vom gesamten Code, natürlich habe ich dort Doctype drin.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben