theexplainer
New member
Hi.
Ich will optisch ansprechende Links dynamisch generieren. Deshalb sollen ineinander verschachtelte Container als gesamtes verlinkt werden.
Da aber nur Inline-Elemente verlinkt werden dürfen, verwende ich span und keine Tabellen oder divs.
Nun bin ich fast soweit wie ich es haben will, es fehlt nur noch, einen text in einem span unten auszurichten.
mit margin kann ichs nicht machen, da wenn der text länger wird, es vielleicht zwei zeilen werden und dann fehlt ja die untere.
so sollte es aussehen.
4.jpg ist das Bild von dem Filter
eyelink.jpg ist der orangene Rahmen
Die schrift Test soll links oben im Rahmen sein und Orange, was super funktioniert
Das Bild soll links unten sein , was auch geht
Der Text Test2 soll rechts unten sein, aber entsprechend bei mehrzeiligem Text alles sichtbar sein.
Tut er überhaupt nicht. Der Text Test2 ist immer rechts vom Bild Top ausgerichtet.
Habt Ihr eine Idee?
Danke
Ich will optisch ansprechende Links dynamisch generieren. Deshalb sollen ineinander verschachtelte Container als gesamtes verlinkt werden.
Da aber nur Inline-Elemente verlinkt werden dürfen, verwende ich span und keine Tabellen oder divs.
Nun bin ich fast soweit wie ich es haben will, es fehlt nur noch, einen text in einem span unten auszurichten.
mit margin kann ichs nicht machen, da wenn der text länger wird, es vielleicht zwei zeilen werden und dann fehlt ja die untere.
so sollte es aussehen.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<style>@charset "utf-8";
body{
background-color : #444444;
/* Hintergrundbild ohne Wiederholung */
background-attachment: scroll;
/* Erste Zahl Position von Links. Zweite Zahl Position von oben */
overflow: auto;
}
.eyelink{
cursor: pointer;
background-image: url(eyelink.jpg);
background-color : #000000;
width: 199px;
height: 93px;
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: #DD8E30;
margin: 10px;
padding-top: 5px;
padding-left: 10px;
padding-right: 2px;
padding-bottom: 2px;
float: left;
}
.eyelinktext{
float: right;
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
line-height: 18px;
vertical-align: bottom;
border:1px solid #DD8E30;
font-weight: normal;
color: #ffffff;
height:74px;
margin-top: auto;
margin-bottom: 0px;
}
.eyelinkinner{
position: relative;
right:0px;
bottom:0px;
}
.eyelinkbild{
float: left;
width: 100px;
height:74px;
background: url(4.jpg) bottom left no-repeat;
}
.eyelinktext td {
vertical-align: bottom;
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: normal;
color: #ffffff;
/*border-color: #CCCCCC;
border : thin solid #cccccc; */
}
</style>
</head>
<body>
<a href="'.$row['Link'].'" target="_self">
<span class="eyelink">Test
<span class="eyelinktext">
<table><tr><td><img src="4.jpg" border="0" alt=""/></td><td height="70" width="180" valign="top" align="right">Test</td></tr></table>
</span></span></a>
<br/><br/><br/>
<a href="'.$row['Link'].'" target="_self">
<span class="eyelink">Test
<span class="eyelinkbild">
</span>
<span class="eyelinktext"><span class="eyelinkinner">Test2 </span>
</span></span></a>
</body>
</html>4.jpg ist das Bild von dem Filter
eyelink.jpg ist der orangene Rahmen
Die schrift Test soll links oben im Rahmen sein und Orange, was super funktioniert
Das Bild soll links unten sein , was auch geht
Der Text Test2 soll rechts unten sein, aber entsprechend bei mehrzeiligem Text alles sichtbar sein.
Tut er überhaupt nicht. Der Text Test2 ist immer rechts vom Bild Top ausgerichtet.
Habt Ihr eine Idee?
Danke
