✔ Wie bekomme ich diesen Link hin?

[jackisback]

Hallo,
also ich habe es nun schon lange versucht aber jetzt muss Hilfe her!
Es geht um einen Link, der Links ein Bild zeigt und rechts zwei Zeilen Text enthält das Ganze ist in einen Blocksatz gepackt weil beim hover eine Hintergrund Bild angezeigt wird.

Das Problem ist die zweite Zeile Text die immer unter das Bild rutscht. Es könnte aber auch sein, dass das Problem meine Kenntnisse sind und ich hoffe eher das Zweite denn dagegen kann man was tun.
Hier mal ein paar Bilder wie es aussehen soll

Wichtig ist das die komplette Blaue fläche der Link ist (Blocksatz)

Wer kann helfen

 

[Maik]

Hi,

wie lautet denn der bisherige Quellcode (HTML + CSS)?

 

[jackisback]

<a class="link" href="einlink.php">
<img border="0" src="images/bild.jpg" width="66" height="64"  align="texttop">Erste Zeile<br>
Zweite Zeile
</a>

CSS

a:link.link	{
border:1px solid #f0f0f0; 
color: #066BEF; 
font-family:Verdana; 
font-size:12pt;
text-decoration:none; 
Display: Block; 
padding-left:30px; 
padding-top:8px; 
padding-bottom:7px
}
a:hover.link {
border:1px solid #CCEEFF; 
color: #066BEF; 
font-family:Verdana; 
font-size:12pt; 
text-decoration:none; 
Display: Block; 
padding-left:30px; 
padding-top:8px; 
padding-bottom:7px; 
background-image:url('../images/uebersicht/hintergrund.jpg'); background-repeat:repeat-x; background-position-y:center}

 

[Maik]

Lösungsvorschlag:

a.link:link {
border:1px solid #f0f0f0;
color: #066BEF;
font-family:Verdana;
font-size:12pt;
text-decoration:none;
display: block;
padding-left:30px;
padding-top:8px;
padding-bottom:7px
}
a.link:hover {
border:1px solid #CCEEFF;
color: #066BEF;
font-family:Verdana;
font-size:12pt;
text-decoration:none;
display: block;
padding-left:30px;
padding-top:8px;
padding-bottom:7px;
background-image:url('../images/uebersicht/hintergrund.jpg'); background-repeat:repeat-x; background-position-y:center}

a img {
float:left;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<a class="link clearfix" href="einlink.php">
<img border="0" src="images/bild.jpg" width="66" height="64"  align="top">Erste Zeile<br>
Zweite Zeile
</a>

 

[jackisback]

Ich weis zwar nicht wie du das gemacht hast aber

BOMMMMBE

 

[Maik]

Ich hab lediglich das Grafikelement mit der float-Eigenschaft ausgestattet, damit es vollständig von dem zweizeiligen Text umflossen wird, und damit die Grafik den unteren Rahmen des Links nicht überlappt, hab ich zusätzlich http://positioniseverything.net/easyclearing.html eingesetzt.