kostenloser Webspace werbefrei: lima-city


Bild-Link Problem

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    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?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    Ö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
  4. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    Deine Version funktioniert leider auch nicht. unter ie7 tritt das problem nciht auf.

    das bild reagiert auf den code von mir, wenn ich ihn lösche erscheint ein rahmen (violett - standard).

    Beitrag zuletzt geändert: 29.4.2010 12:29:00 von aklasse
  5. 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.
  6. aklasse schrieb:
    Warum wird dort ein Strich unter dem Bild angezeigt?´

    Weil Du das im Stylesheet so definiert hast. :wink:

    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
  7. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    die background color brauche ich für die anderen links.
    werde mal den ersten tipp versuchen!
  8. aklasse schrieb:
    die background color brauche ich für die anderen links.
    werde mal den ersten tipp versuchen!
    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.

    Also praktisch
    a.menu_link{ 
    background-color: none; 
    font-size: 0px;}
    für die css-datei und dann bei den Links jeweils
    <a href="index.php" class="menu_link"><img src="11.jpg"  
     alt="Linkliste" /></a>
    So viel Aufwand ist das denke ich nicht. ;)
  9. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    Hatte ich als erste ausprobiert. funktioniert leider nicht. ich bin am verzweifeln. in der aktuellen version läuft es wnigestens unter firefox.
  10. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    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)
  11. 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
  12. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    ?? 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.
  13. 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
  14. karlsve

    Moderator Kostenloser Webspace von karlsve

    karlsve hat kostenlosen Webspace.

    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
  15. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    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:
    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;
    				}
    (Unwesentliche Code-Teile habe ich entfernt)

    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...
  16. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    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!
  17. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!