XHTMLforum - Komplettes DIV mit Text & Bild verlinken

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Komplettes DIV mit Text & Bild verlinken (http://xhtmlforum.de/showthread.php?t=64571)

Komplettes DIV mit Text & Bild verlinken

Ich möchte ein komplettes DIV mit Titel, Bild und Text verlinken.

Das ganze soll dann etwa so aussehen:
Anhang 4125

Natürlich hab ich bereits etwas umgesetzt aber es funktioniert noch nicht so wie ich mir das vorstelle.

HTML-Code:

<style type="text/css">

html, body { 

    font-family: Verdana;

    background-color: #FFFFFF;

    margin: 0px;

    padding: 0px;

}

 

 

.ad_main {

    width: 234px;

}

 

 

.ad_title {

    width: 234px;

    font-size: 12px;

    font-weight: bold;

    margin-bottom: 5px;

}

 

 

.ad_img {

    float: left;

}

 

 

.ad_text {

    font-size: 11px;

}

 

 

.ad_link {

    display: block;

    text-decoration: none;

}

 

</style>

 

 

 

<div class="ad_main">

    <a href="http://www.example.net" class="ad_link">

        <span class="ad_title">Suchmaschine</span><br />

        <span class="ad_img"><img border="0" src="img.jpg" /></span>

        <span class="ad_text">Die weltweit größte und beste Suchmaschine im Internet.</span>

    </a>

</div>

Im IE wird es zwar richtig angezeigt aber das A-Element geht nicht über das ganze DIV (Der freie Platz - rechts neben dem Bild und unter dem Text - wird nicht verlinkt). Im FF ist zwar das komplette DIV verlinkt aber "margin" wird zB nicht berücksichtigt.

Ich hoffe ihr könnt mir weiterhelfen.

Gruß proloser

Zitat:

Zitat von proloser (Beitrag 493462)

Für die vollständige Verlinkung der Fläche im IE, gib dem Link "Layout" durch eine passende Eigenschaft:

Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

'width: 100%' bietet sich an.

Grüße
gaby

Zitat:

Zitat von proloser (Beitrag 493462)

Im FF ist zwar das komplette DIV verlinkt aber "margin" wird zB nicht berücksichtigt.

margin kann auch nicht verlinkt werden, da es nicht zum Elementinhalt gehört.

Zitat:

Zitat von proloser (Beitrag 493462)

Im FF ist zwar das komplette DIV verlinkt aber "margin" wird zB nicht berücksichtigt.

Das kommt daher, weil der Seitentitel in einem <span>, also einem Inline-Element, eingeschlossen ist.

Auf Inline-Elemente lassen sich keine vertikalen margins anwenden.

Auf Block-Elemente, und Inline-Elemente mit Block-Eigenschaften, schon eher.

Alles klar, ich hab jetzt verstanden warum es nicht funktioniert. Könnt ihr mir vielleicht noch Lösungsvorschläge geben, denn ich weiß momentan nicht, wie ich das Problem lösen könnte.

Gruß proloser

Zitat:

Zitat von proloser (Beitrag 493475)

Dazu müsstest du uns verraten, worin dein Problem aktuell noch besteht. Wenn du die Ursache kennst, solltest du der Wirkung doch entgegentreten können.

Der vollständige Quelltext bzw eine Testseite online wäre hier sehr nützlich.

Zitat:

Zitat von proloser (Beitrag 493475)

Alles klar, ich hab jetzt verstanden warum es nicht funktioniert. Könnt ihr mir vielleicht noch Lösungsvorschläge geben, denn ich weiß momentan nicht, wie ich das Problem lösen könnte.

Okay, ich fasse ich es nochmal in andere Worte:
Wenn du ein margin-top oder margin-bottom deklarieren willst, wirkt das nur auf Block-Elemente, und Inline-Elemente mit Block-Eigenschaften.

3.4 Block- und Inline-Elemente - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Ein span (=Inline-Element) kannst du mit einem entsprechenden Wert für die display-Eigenschaft dazu bringen, daß es sich wie ein Block-Element verhält.

Super, so versteh es sogar ich :o
Danke, jetzt funktioniert alles!

Gruß proloser