✔ img link Problem

[Godstyle]

Hallo tutler,

ich habe eigentlich ein simples Problem, ich habe einen link der aus 3 Bilder zusammen gesetzt ist.

<p><img src="img/links_gif.png" /><a href="#" style="background-image:url(img/nav_gif.jpg);">Homsssssssssssssssssssssssssssssssse</a><img src="img/rechts_gif.png" /></p>
<table border="1">
<tr>
<td width="800px" bgcolor="#FFFFCC" valign="bottom"><img src="img/links_gif.png" /><a href="#" style="background-image:url(img/nav_gif.jpg)">Homsssssssssssssssssssssssssssssssse</a><img src="img/rechts_gif.png" /></td>
</tr></table>

das erste img stelle den linken Bogen dar, das mittlere soll sich der Link länge anpassen und das dritte den rechten Bogen (als img angefügt).

Ich habe es auf 2 Arten versucht um zu sehen, ob es evt an dem <table> liegt.

Ich möchte nun, das sich alle 3 imgs auf der selben höhe befinden.

Hier die bildangaben:

Bild 1: 15x20px
Bild 2: 1x20px
Bild 3: 15x20px

angaben in: weite x Höhe.

Ich hoffe auf einen Tipp.

Ich habe es bereits versucht indem ich die 3 Bilder in 1 gesetzt habe, dann habe ich das Problem, das der Bogen aussen seine Form verändert, da er gestreckt wird, dies sieht nicht gut aus, da ich mehrere Links mit unterschiedlicher Länge habe und es einheitlich sein soll.

lg

 

[Maik]

Hi,

How to make sexy buttons with CSS

[ Tutorials.de Best of Web -> CSS -> CSS-Tutorials ]

mfg Maik

 

[Godstyle]

Hey,

danke dir für den link,
hatte diese Seite auch schon gefunden, sie führte aber leider nicht zu der erhofften lösung.
Das ergebnis habe ich nun wieder als img angefügt.

Es fehlt mir bei diesem vorgehen der mittlere Teil des Bildes, wenn ich das erste bild nun ersetze gegen ein anderes mit längerem Balken so klappt es wieder.
Dann müsste ich jedoch das erste bild für jeden link neu machen und ändern.

Kennt jmd evt eine änderung mit der es möglich wäre?

lg

 

[Maik]

danke dir für den link,
hatte diese Seite auch schon gefunden, sie führte aber leider nicht zu der erhofften lösung.
Das ergebnis habe ich nun wieder als img angefügt.

Dass es grundsätzlich, und nicht nur in der empfohlenen Seite funktioniert, versteht sich wohl von selbst.

Neben dem Schnappschuß deines Resultats, solltest du vielleicht auch mal deinen dazugehörigen Code zeigen, und weil hier Grafiken im Spiel sind, zusätzlich einen Link zu der Testseite nennen, oder die Seite und Grafiken als ZIP-Datei hier anhängen, damit dies auch mal incl. der Grafiken begutachtet werden kann.

mfg Maik

 

[Godstyle]

ich habe den code ink. der bilder als anhang.

lg

 

[Maik]

Es fehlt mir bei diesem vorgehen der mittlere Teil des Bildes, wenn ich das erste bild nun ersetze gegen ein anderes mit längerem Balken so klappt es wieder.
Dann müsste ich jedoch das erste bild für jeden link neu machen und ändern.

Kennt jmd evt eine änderung mit der es möglich wäre?

Wenn du es mit deinen bestehenden drei Grafiken realisieren willst, kannst du, wie auch in dem Beispiel, sie in einem entsprechend erweiterten verschachtelten Markup verwenden.

mfg Maik

 

[Maik]

Wenn du es mit deinen bestehenden drei Grafiken realisieren willst, kannst du, wie auch in dem Beispiel, sie in einem entsprechend erweiterten verschachtelten Markup verwenden.

Hab mich hierfür mal an deinem Attachment bedient, um die konkreten einzelnen Grafikdimensionen zu erfahren, die im CSS in den height- und padding-Regeln einfließen, damit es zu keinen unerwünschten Überlappungen der ineinander verschachtelten Elemente und deren Hintergrundbilder führt.

• HTML:

<a class="button" href="#"><span><span>Bring world peace</span></span></a>

• CSS:

a.button {
    background: transparent url('img/rechts_gif.png') no-repeat scroll top right;
    color: #444;
    float: left;
    height: 20px;
    padding-right: 15px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('img/links_gif.png') no-repeat top left;
    float:left;
    height: 20px;
    padding: 0 0 0 15px;
}

a.button span span {
    background: transparent url('img/nav_gif.jpg') repeat-x top left;
    display: block;
    line-height: 10px;
    padding: 5px 0;
}

• Resultat:
  
  
  
  
• Fertitsch ;-)

mfg Maik

 

[Godstyle]

Super, ich danke dir, klappt echt hervorragend.