Bild als Hintergrund von "Links"

Status
Nicht offen für weitere Antworten.
N

Netzpirat

Grünschnabel
Hallo.

folgendes Problem:

Ich habe eine Tabelle, in der sich Hyperlinks befinden.
Jetzt wollte ich jeden dieser Links mit einem Bild hinterlegen. Das jeweilige Bild hat die Abmaße: 100px x 30px ... bei 7 Links horizontal nebeneinander sollten diese die 700px breite Tabelle komplett füllen.

LEIDER macht mir CSS aber einen Strich durch die Rechnung. Es werden zwar die Bilder als Hintergrund von Links genommen, leider werden diese nur dort dargestellt, wo auch das eigentliche Wort (der Link) steht. Das Hintergrundbild wird also quasi sowohl nach oben und unten, als auch nach links und rechts "abgeschnitten". Je länger quasi das Wort (der Link), desto mehr sieht man vom Hintergrund.

hier nochmal versucht das ganze grafisch darzustellen:

So sollte es sein: http://eiersal.at/css/soll.jpg

So ist es leider: http://eiersal.at/css/ist.jpg


Ich hoffe ihr könnt mir helfen.

Danke schon vorab.


Gruß, Netzpirat
 
Weise den Verweis-Elementen mit display:block Block-Level-Charakteristika zu, wie etwa in angehängtem Beispiel.
 

Anhänge

erstmal Herzlichen Dank.

leider bin ich nicht all zu "pro"...

ich nutze ein cms. dabei heißen die CSS-Definitionen:

a.mainlevel:link
a.mainlevel:visited
a.mainlevel:hover

könntest du mir bitte den Gefallen tun, und genau hinter die jeweiligen CSS-Definitionen den Quelltext schreiben, der da hingehört, damit es funktioniert?

Denn eben habe ich versucht deinen Quellt. an den von mir anzupassen. leider funktioniert das nicht wirklich. :-(


Wäre super, wenn das klappen würde!


Danke schon vorab.


Gruß, Netzpirat
 
soll ich'n screenshot machn oder brauchst den den code?

im code sieht man nicht viel, da der ja eigentlich erst durch das CMS realisiert wird.
 
Netzpirat hat gesagt.:
ich nutze ein cms. dabei heißen die CSS-Definitionen:

a.mainlevel:link
a.mainlevel:visited
a.mainlevel:hover
Zum Vergrößern anklicken....

Prinzipiell Nix Anderes als im css zu schreiben:
Code: 
a.mainlevel:link { display: block; }

Resp. das Gleiche für die anderen Beiden. Wenn Du innerhalb einer Tabellenzelle nur einen solchen Link hast, könnte das gehen (interessante Idee, muß ich mir merken). Wenn Du mehrere davon in einer Zelle hast, und die bislang nebeneinander standen, dann stehen sie jetzt untereinander.

Da der Hauptverwendunkszweck von Hintergrundbildern bei Links vermutlich ein sog. "button" sein dürfte, habe ich das so gemacht, daß ich innerhalb des Ankers einen solchen Button eingefügt habe, und das Hintergrundbild diesem hinzugefügt habe statt dem Anker. Das klappt soweit ganz gut. Opera und Konqueror setzen allerdings den Text da drauf zu hoch. Und der IE führt den Link in diesem Fall nicht aus. Er zeigt ihn zwar in der Statuszeile an beim Drüberfahren mit der Maus, aber der Link funktioniert trotzdem nicht. Du kannst zwar die Navigation bei dem Button noch mal (doppelt) als JavaScript handler ausführen, aber das funktioniert eben nur dann, wenn JavaScript aktiviert ist.

Wenn Du natürlich wirklich nur einen solchen Link pro Tabellenzelle hast, warum weist Du das Hintergrundbild nicht einfach der Zelle zu? Das könnte in dem Fall einfacher sein.
 
nein nein... ich habe mehrere links in einer zelle...

da steht nebeneinander:

Home Link1 Link2


u.s.w.


sonst wäre das nicht das problem.
 
Hi,

wenn du mehr Links in einer Zelle hast, könntest du sie mit float in den Textfluss übernehmen.
Damit werden sie nebeneinander angezeigt.

Beispiel:
Code: 
a.mainlevel,
a.mainlevel:link{ display: block;
                  float: left;
                  width: 100px;
                  height: 30px;
                  background: url(bg.gif) 0 0 repeat-x;
                  line-height: 30px;
                  text-align: center;
                  text-decoration: none;
                  border-right: 1px solid #666;}
a.mainlevel:visited{}
a.mainlevel:hover{}
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück