Styling Problem

Cyborg · #1 (**permalink**) 23.06.2011, 23:50

Hallöchen

Ich habe ein kleines Styling Problem und bräuchte mal eure Hilfe.

Folgendes Bild wird mir mit folgenden Code erzeugt:

HTML-Code:

<table border="1">
<tr>
<td rowspan="2">
 <div style="margin-left:20px; margin-right:20px;">
 <img src="blau.png" alt="Leihvertrag" /></div>
</td>
<td>Hier steht ein kurzer Text.
</td>
</tr>
<tr>
<td valign="top"><a href="www.google.de">Das ist ein Link, der auch umbrechen kann.</a>
</td>
</tr>
</table>

Das Ziel ist es jetzt, dass die Pfeilspitze direkt auf die Mitte des Links zeigt. Auch wenn der Link umbricht.

Hätte da jemand eine Idee ?

threadi · #2 (**permalink**) 25.06.2011, 14:18

Verzichte auf die Tabelle und binde den Pfeil als Hintergrundbild für den Link ein. Dieses kannst Du dann mit background-position entsprechend ausrichten.

Cyborg · #3 (**permalink**) 25.06.2011, 15:06

Danke für deine Antwort.
Kannst du mir vielleicht noch einen Google-Tip geben ?

Ich finde irgendwie nicht wirklich einen Ansatz für mein Problem.

threadi · #4 (**permalink**) 25.06.2011, 15:17

SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Um den Abstand vom Text zum Hintergrundbild zu erreichen, wäre padding noch sinnvoll.

Code:

a {
 background-image: url(pfeil.png);
 background-position: 50% 0%;
 padding-left: 200px;
}

kingz-art · #5 (**permalink**) 28.06.2011, 00:26

Jip.. meine Rede. Raus mit der Tabelle und über background-image lösen..

Cyborg · #6 (**permalink**) 28.06.2011, 00:45

Danke für den Tipp,

das Ganze sieht nun leider so aus ?!

kingz-art · #7 (**permalink**) 28.06.2011, 01:00

lol.. kein Ding. Dir fehlt nur ne kleine Angabe. Hier mal der Code:

Code:

a {
background: url(pfeil.png) 0 50% no-repeat;
padding-left: 200px;
}

Kannst das auch alles in eine Zeile klopfen,.. als nur background: | dann die URL | dann die Position | dann das repeat

Und in Deinem Fall willst Du ja kein repeat haben.. deshalb no-repeat.

Denke so sollte es funzen... Grüßla

Cyborg · #8 (**permalink**) 30.06.2011, 11:19

hey kingz-art,

nochmal vielen dank.

jetzt sieht das ganze aber so aus

ohne umbruch:

mit umbruch:

mermshaus · #9 (**permalink**) 30.06.2011, 20:35

Kannst du ein Livebeispiel irgendwo hochladen? Die Art der Stauchung der Grafik erscheint mir eigenartig.

Cyborg · #10 (**permalink**) 30.06.2011, 22:19

Bitteschön.

Bild mit Link

Ich wunder mich gerade, wieso das Ding auf einmal wieder in die nächste Zeile unter den Pfeil umbricht. Das war heute morgen noch nicht so

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Font der Überschrift ändern (Problem)	artist	CSS	2	07.12.2007 11:01
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 10:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 15:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 18:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 07:28