✔ Werbeanzeige - komplettes DIV verlinken

[proloser]

Ich möchte ein komplettes DIV mit der Breite von 234 Pixel verlinken. Enthalten ist ein Titel, Bild und Text. Ich hab das ganze bereits umgesetzt aber es kommt immer wieder zu problemen.


Folgende Probleme treten zB auf:

- FF: Farbe vom "Text" ist manchmal gleich wie der Titel
- IE: Es wird nicht das ganze DIV verlinkt


Hier der Code:

<style type="text/css">
div#anzeige {
  width: 234px;
}


div#anzeige h1 {
  font-size: 12px;
  font-weight: bold;
  color: #3B5998;
  margin: 0px;
  padding: 0px;
  margin-bottom: 5px;
  text-align: left;
}


div#anzeige img {
	margin-right: 5px;
	float: left;
}


div#anzeige p {
  font-size: 11px;
  color: #000000;
  line-height: 13px;
  margin: 0px;
  padding: 0px;
  text-align: left;
}


div#anzeige a {
  display: block;
  text-decoration: none;
}
</style>



<div id="anzeige">
   <a target="_blank" href="http://www.example.com">
      <h1>Titel</h1>
      <img border="0" src="example.jpg" />
      <p>Text</p>
   
      <div style="clear: both;"></div>	
   </a>
</div>

Gibt es evtl. eine andere und bessere Lösung?

Ich hoffe ihr könnt mir weiterhelfen!

Gruß proloser

 

[hela]

<div id="anzeige">
   <a target="_blank" href="http://www.example.com">
      <h1>Titel</h1>
      <img border="0" src="example.jpg" />
      <p>Text</p>
   
      <div style="clear: both;"></div>	
   </a>
</div>

Gibt es evtl. eine andere und bessere Lösung?
...

Hallo,

richtiges HTML wäre die bessere Lösung.
Aus deinem HTML-Fragment ist nicht ersichtlich ob du mit HTML4 oder mit HTML5 arbeitest. Vermutlich handelt es sich um HTML4 und dort sind Blockelemente innerhalb eines Inlineelements (bis auf eine Ausnahme) nicht zulässig. Sieh dir bitte mal die HTML4-Elementreferenz für das A-Element an, dort ist beschrieben welche Kindelemente zulässig sind.

Eine HTML5-Referenz gibt es hier: Webkompetenz.

 

[proloser]

Ich arbeite mit HTML4. Leider bin ich daraus nicht schlauer geworden und konnte das Problem nicht lösen.

 

[hela]

Ich arbeite mit HTML4. Leider bin ich daraus nicht schlauer geworden und konnte das Problem nicht lösen.

Dein HTML ist invalid:
Im oben gezeigten Quelltext gibt es ein A-Element (Link), in dem als Kindelemente ein H1-, ein P- und ein DIV-Element enthalten sind. Das ist bei HTML4 nicht zulässig und u.U. schon die Fehlerquelle.

Was ist daran unverständlich? Sieh dir bitte die oben verlinkte Elementrefenz an.

 

[proloser]

OK, ich glaube langsam versteh ich es. Es darf also zwischen "a"-Element kein "h" und "p" stehen. Um das Problem zu lösen würde ich wie folgt vorgehen:

<div id="anzeige">
   <a target="_blank" href="http://www.example.com">
      <b>Titel</b><br />
      <img border="0" src="example.jpg" />
      <span>Text</span>
   
      <span style="clear: both;"></span>  
   </a>
</div>

Wäre das korrekt?

Gruß proloser

 

[thewall]

Du kannst statt den DIV in einen Link zu setzen, den Link als DIV nutzen.
Gib einfach dem Link den CSS Wert. Er funktioniert dann wie ein verlinkter DIV.

   <a target="_blank" href="http://www.example.com" id="anzeige">
      <h1>Titel</h1>
      <img border="0" src="example.jpg" />
      <p>Text</p>
      <div style="clear: both;"></div>  
   </a>

 

[proloser]

Ich bring es nicht so hin, wie ich es mir vorstelle. Das Bild ist entweder im IE oder im FF an einer anderen Position.

Aktueller Stand:

<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>

So sollte es eigentlich aussehen und komplett verlinkt sein:




Gruß proloser



EDIT:
Ich hab mich noch wo anderst schlau gemacht. Mit folgendem Link bin ich zu einer Lösung gekommen:
3.4 Block- und Inline-Elemente - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Vielen Danke für die anderen Tipps!