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

Validitätsprobleme a {display:block}

J

JohDe

Neues Mitglied
Hi!
Ich habe ein Problem mit folgendem Code, da man ja block-level Elemente (p, h2) nicht in Inline Elemente packen darf. Alle gängigen Browser stellen den Code zwar wie gewollt dar, aber valide ist die Seite so nicht, auserdem ist es nicht möglich Texte zu markieren.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                        <a href="link" title="" class ="product_display_line">
                            <img src="/pictures/.." alt=""/>
                            <h2>bla</h2>
                            <p>bla</p>
                        </a>
css:
Code: 
.product_display_line
{
    display:block;
    height: 100%;
    border-top: 1px solid #b0b2b5;
    border-bottom: 1px solid #b0b2b5;
    margin-bottom:20px;
    text-decoration: none;
}
.product_display_line:hover
{
    background: #e9e9ea;
}
.product_display_line h2
{
    position:relative;
    margin-left: 160px;
    margin-bottom:6px;
    padding-top:10px;
    width: 460px;
    height:19px;
}

.product_display_line p
{
    position:relative;
    margin-left: 160px;
    width: 460px;
    height: 85px;   
}
.product_display_line img
{
    float:left;
}

Kennt von euch jemand eine einfache Möglichkeit diese Probleme zu umgehen, aber trotzdem den großflächigen Link, sowie den Hover Effekt zu behalten?
 
Dann stimmt doch die Semantik nicht mehr, struppi.

So geht's! (Beispielcode; bitte entsprechend anpassen)
HTML: 
<div class="linkWrapper">
  <a href=""><img src="/pictures/.." alt=""/></a>
  <h2><a href="">bla</a></h2>
  <p><a href="">bla</a></p>
</div>

Code: 
div:hover a {
  /* hier die Hover-Effekte der Links eingeben */
}

Gruß
Körnerbrötchen
 
Wieso sollte die Semantik nicht mehr stimmen? Wir Wissen nicht was 'bla' bedeutet.

Wenn tatsächlich eine Überschrift und ein Absatz verlinkt werden sollen, dann wäre folgendes besser:

HTML: 
<h2><a ..>bla</a></h2>
<p><a ..>bla</a><p>
 
Na, wenn ich die Semantik von oben nehme (oder verstehe ich dich gerade bloß nicht richtig?). Deinen Code findest du in meinem übrigens wieder. Was daran besser sein soll, entzieht sich meiner Kenntnis!
 
besser nicht, aber der Link ist um alle Elemente, nicht nur um das Bild.

EDIT: Aber du hast recht, ich hab deinen Code gar nicht genau angeschaut, insofern war mein Einwurf nicht unbedingt berechtigt. Aber wie gesagt, Semantisch finde ich es merkwürdig eine Überschrift und einen Absatz zu verlinken
 
Danke für eure schnellen Antworten, damit ihr seht was ich realisieren will hier ein Bild.

product_line.jpg

Ich habe einige (bis zu 10) dieser Navigationselemente untereinander im Content. Der Link soll über das gesamte Element gehen, beim Hovern soll der Hintergrund Grau werden und aus Usabilitygründen wäre es schön wenn der Text Markiert werden könnte.
Bei deiner Lösung, Körnerbrötchen, habe ich das Problem, dass der Bereich ohne Bild/Text eben nicht verlinkt ist.

MfG.
 
Zuletzt bearbeitet:
Hallo JohDe,
du musst p und h1 weiterhin als block-Elemente definieren. Alles andere ist eine Frage der height-Angaben und der Nutzung von padding statt margin.

Gruß
Körnerbrötchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben