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

html-Probleme bei der Erstellung einer Tabelle mit Bildern, Text und Links

Soenke

Neues Mitglied
Hallo,

mein Ziel ist die Erstellung einer grafischen und klickbaren Übersicht über die in dem Internetauftritt enthaltenen "Kategorien" (bei mir "Archive" genannt) mittels einer Tabelle. In der jeweiligen Tabellenzelle ist ein Bild und eine Überschrift hinterlegt. Die vollständige Zelle soll beim Überfahren" mit der Maus die Hintergrundfarbe wechseln und vollständig "klickbar" sein.

Ich habe eine zweispaltige Tabelle mit jeweils den Überschriften und Grafiken in den Tabellenzellen (<td>...</td>) erstellt und diese verlinkt.

Mein Problem: es werden zum einen Error-Meldungen bei der Validierung ausgegeben, die ich trotz längerer Lösungsversuche nicht zu lösen vermag (Fehlermeldung: End tag a violates nesting rules.
…ligncenter ..." /><br /> </a></td><td…). Zum anderen gelingt es mir auch nicht, die gesamte Fläche der Tabellenzelle "klickbar" zu machen. Darüber hinaus würde ich gerne auf JavaScript-Befehle (Mouseover und onMouseOut) verzichten und die Änderung der Farbe beim Überfahren mit dem Cursor über a:hover erreichen.

Nachfolgend mein Lösungsversuch (zunächst noch in html und JavaScirpt - später vielleicht einmal mit dem Versuch, dies auch in css umzusetzen):

<table>
<tbody>
<tr>

<td onMouseover='this.bgColor="#..."' onMouseOut='this.bgColor="#..."'>
<a href="http://..." title="…" style="text-decoration:none; text-align:center">
<h5>…</h5>
<img src="http://... .jpg" alt="..." width="…" height="…" class="aligncenter …" />
</a>
</td>

<td>

</tr>
...
</table>

Hier ist der Link zu meiner Internetseite: http://rechtsanwalt-und-sozialrecht.de.

Falls jemand Anregungen oder sogar Lösungen zu meiner Problematik hat, wäre ich für eine Rückmeldung dankbar.

Grüße
 
Werbung:
Warum überhaupt eine Tabelle? Diese dienen zur Darstellung von tabellarischen Daten, die du aber nicht hast. Soetwas löst man mit div's
 
Warum überhaupt eine Tabelle? Diese dienen zur Darstellung von tabellarischen Daten, die du aber nicht hast. Soetwas löst man mit div's

Oder eine Liste: (HTML)
Code:
<ul class="uebersicht">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

(CSS)
Code:
.uebersicht li:hover {
    background-color: gray;
}

oder irre ich? Damit der gesamte <li> tag Klickbar wäre würde mir außer JS nichts bekannt sein..
 
Werbung:
hallo bdt600 und bodo,

vielen Dank für die Hinweise - habe es mit <div> und dann auch mit <ul> versucht - es funktioniert schon fast, aber noch nicht ganz ...

Grüße
Sönke
 
Hallo.

Deine Validierungsprobleme kommen daher das in einem <a> Element keine Blockelemente erlaubt sind.
Du hast aber mit <h5> und <p> gleich mehrere Blockelemente.

Gruss
Elroy
 
Wenn die ganze Fläche klickbar werden soll, wirst du wohl um Css kaum herumkommen. Dort musst das a-Element als Blockelement definieren und ihm ein Breite(width) mitgeben.

Beispiel:

a{ display: block;
width: 250px;
}

Mfg Nita
 
Werbung:
Hallo zusammen und besten Dank für die Antworten!

Ich habe es jetzt so im css und im html gelöst und es funktioniert, ohne dass eine Fehleranzeige beim Validieren erscheint:

css

.uebersicht { float:left;width:50%;text-align:center;text-decoration:none;vertical-align: middle;}
.uebersicht strong {color:#000;line-height:3.5;text-decoration:none;font-family:"Times New Roman", "Times Roman", Times, serif;font-weight:550;}
.uebersicht a {display:block;}
.uebersicht a:hover {background-color:#F5F8FC;text-decoration:none;}
.cl { clear:left }

html

<div class="uebersicht">
<div>
<a href="http://.../" title="..." ><strong>...</strong><img src="http://..." alt="..." width="..." height="..." class="..." />
</a>
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</a>
</div>
</div>

<div class="uebersicht">
<div>
<a href="http://.../" title="..." ><strong>...</strong><img src="http://..." alt="..." width="..." height="..." class="..." />
</div>
<div>
...
</div>
...
</a>
</div>
<div></div>

</div>
<div class="cl"></div>

Besten Dank noch einmal für die Hinweise!!!
 
Zurück
Oben