Bild-Link Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
balken
bild
brauche
christliche musik
code
ersten tipp
farbe
haufe
hintergrund
hintergrundfarbe
http
klasse
problem
rahmen
strich
tag
text
url
versuch
versuchen
-
ich möchte auf der Webseite http://link.haufen.at die Menüpunkte als tag/bild">bilder realisieren.
im css habe ich folgendes stehen:
img, img a { border: none; text-decoration: none; background-color: none; }
Das Bild wird so angezeigt:
<a href="index.php"><img src="11.jpg" alt="Linkliste" /></a>
Warum wird dort ein Strich unter dem Bild angezeigt? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Öhm, ich glaub Du hast da irgendwie a und img vertauscht, oder?
ich würde es ja an Deiner Stelle mit a img { versuchen.
aber eigentlich würde ich dem a einfach eine klasse zuweisen und dann die klasse im css verarbeiten.
a.bilderlink {
blabla
}
und dann
<a class="bilderlink" href="index.php"><img src="11.jpg" alt="Linkliste" /></a>
Beitrag zuletzt geändert: 29.4.2010 0:01:14 von sonok -
Das Problem scheint in der font-size, welche du für das body-element gesetzt hast zu liegen.
Wenn ich da 0px eintrage, ist der "Strich" darunter weg. -
aklasse schrieb:
Warum wird dort ein Strich unter dem Bild angezeigt?´
Weil Du das im Stylesheet so definiert hast.
Schau dir die Farben der Striche mal an. Das sind die im Stylesheet definierten background-Colors für das a-Tag.
Nimm die Definition für background-color raus und die Balken sind weg.
FF
Beitrag zuletzt geändert: 29.4.2010 14:56:58 von fatfreddy -
aklasse schrieb:
Wie wäre es, eine extra-css-cass für die verschiedenen Link-Arten anzuwenden? Also beispielsweise link_menu oder so? Denn das mit der Hintergrundfarbe ist definitiv die Ursache für die Farbe des "Strichs".. Wobei das Ding noch immer da sein wird, wenn du die Hintergrund-Farbe änderst, nur wird er halt nicht mehr die Farbe haben. Wenn du die Schriftgröße für die jeweiligen Links anpassen willst, um die Striche dann letztendlich weg zu bekommen, würde sich das dann halt auch anbieten.
die background color brauche ich für die anderen links.
werde mal den ersten tipp versuchen!
Also praktisch
für die css-datei und dann bei den Links jeweilsa.menu_link{ background-color: none; font-size: 0px;}
So viel Aufwand ist das denke ich nicht. ;)<a href="index.php" class="menu_link"><img src="11.jpg" alt="Linkliste" /></a> -
Hatte ich als erste ausprobiert. funktioniert leider nicht. ich bin am verzweifeln. in der aktuellen version läuft es wnigestens unter firefox.
-
Ich habe jetzt alles ausprobiert:
Hintergrundfarbe löschen / auf selbe wie hintergrund setzten.
Rahmen entfernen.
Unterstreichung entfernen.
margin und padding 0.
jetzt läuft es im firefox, das reicht. so schlimm sehen die balken auch nicht aus...
P.S.: in die linkliste könnt ihr euch eintragen! (http://link.haufen.at) -
Ich habe eine andere Lösung gefunden ;)
Diese habe ich auch auf meiner Startseite verwendet:
<a href="www.exemple.com"><img src="beispielbild.jpg" alt="endsprechenden text einfügen" title="Bildlinktitel" border="0"></a>
<a href="index.php" class="menu_link"><img src="11.jpg"
alt="Linkliste" /></a>
Im zweiten fehlt mindestens das border, den titel kann man noch als sanehäubchen obendrauf einbauen ;)
Da benötigt man keen css um das Bild einzufügen ;)
Habe selber ewig recherchiert in meinen ganzen Büchern über HTML um das zu finden :)
Und mein Link funktioniert auch im IE
Beitrag zuletzt geändert: 30.4.2010 19:00:18 von menticorte -
?? Kein CSS um Bilderr ein zu binden ??
Die Bilder werden ganz normal mit img tag eingebunden, nur über css formatiert.
Weiß nicht genau was du meinst. -
Ich versteh nicht wirklich Dein Problem... im IE sind Deine IMG-Links unterstrichen, im FF nicht! Unschön und wohl nicht gewollt, ich würde es so versuchen... In die CSS wieder text-decoration ergänzen und den Link in nur eine Zeile schreiben... sowas wird schon mal seltsam von gewissen Browsern interpretiert!
a img, a:link img { border: 0; text-decoration: none; }
<a href="index.php" onmouseover="on('linkliste', '12.jpg', '11.jpg');" onmouseout ="off();"><img src="11.jpg" name="linkliste" width="200" height="25" alt="Linkliste" class="menulinks" /></a>
Beitrag zuletzt geändert: 1.5.2010 1:31:41 von staymyfriend -
Versuch es mal mit einem ganz einfachen
div#top a {
background: transparent;
}
Das dürfte dein Problem lösen
MfG
karlsve
Beitrag zuletzt geändert: 1.5.2010 4:00:21 von karlsve -
Ich hatte gerade das selbe Problem und habe es folgendermaßen gelöst:
Im HTML-Text musst du, wie sonok schon gesagt hat, die Bilder über Klassen definieren:
<a class="bilderlink" href="index.php"><img src="11.jpg" alt="Linkliste" /></a>
Das selbe musst du nun auch mit deinen Textlinks machen - diese definierst du aber über eine andere Klasse:
<p><a class="textlink" href="http://worshipsong.de">WorshipSong - christliche Musik</a> Hier findest du christliche Musik, Texte, Lieder, Musikvideos uvm. </p><img src="hr.jpg" alt="Trennlinie" />
Dein CSS änderst du dann folgendermaßen:
(Unwesentliche Code-Teile habe ich entfernt)a.textlink:link { color: #540132; background-color: #9BCDFF; } a.textlink:visited { color: #540132; background-color: #D3E7FB; } a.textlink:active { color: #540132; background-color: #FFFFFF; } a.textlink:hover { color: #540132; background-color: #D3E7FB; } a.bilderlink:link, img { border: none; }
So sollte es dann endgültig funktionieren. Dein Problem war, dass du die Pseudo-Klassen (a:link,...) allgemein definiert hast und diese haben dann deine Bilder-Klasse overruled... -
karlsve schrieb:
Versuch es mal mit einem ganz einfachen
div#top a {
background: transparent;
}
Das dürfte dein Problem lösen
MfG
karlsve
YES, IT WORKS!!
So einfach und trotzdem nicht drauf gekommen... VIELEN DANK für die Hilfe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
