1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Linkfarbe ändern

Discussion in 'Web-Know-how für die Homepage' started by homerjay76, Jan 6, 2008.

Thread Status:
Not open for further replies.
  1. homerjay76

    homerjay76 Byte

    Hallo zusammen, habe haufenweis Thumbnails mit Rahmen als Link auf das
    vergrößerte Foto.
    Ich möchte nun die Farbe des Rahmen bzw. Links ändern.

    Wenn ich das veraltete

    Code:
    <body [COLOR="Red"]link="#b87c45" vlink="#ffffff"[/COLOR] >
    verwende, klappt das einwandfrei.
    Mache ich das ganze aber mit CSS bleibt die Linkfarbe unverändert:

    Code:
    style type="text/css">

body {
padding:0px;
margin:0px;

font-family:Verdana,Arial,Helvetica,sans-serif;
color:#000000;}

[COLOR="Red"]
a:link { color:#b87c45; }
a:visited { color:#ffffff; }
[/COLOR]

#banner {
height:115px;
margin:10px; }

#inhalt {
width:auto;
min-width:500px;
max-width:700px;
padding:5px;
margin:20px 180px;
img margin: 50px; }

#inhalt img {
margin: 5px; } 

#sprache {
position:absolute;
top:155px;
left:10px;
width:100px;
height:50px; }

#navi {
position:absolute;
top:200px;
left:10px;
width:160px;
height:300px; }

p {
font-size:1.4em;
padding:0px 10px; }
pre {
font-size:1.2em;
padding:0px 10px;´}

body, #inhalt, #navi { background-color:#ffe4b5; }

</style>
</head>


<div id="inhalt">

<p><span style="font-weight:bold">Bilder anklicken zum Vergr&ouml;&szlig;ern:</span></p>
<p>
<a href="fotos/foto1.jpg" ><img src="thumbnails/foto1_t.jpg" width="90" height="90" border="3" alt="Foto 1 - bitte anklicken!"></a> 
<a href="fotos/foto2.jpg" ><img src="thumbnails/foto2_t.jpg" width="90" height="90" border="3" alt="Foto 2 - bitte anklicken!"></a> 
<a href="fotos/foto3.jpg" ><img src="thumbnails/foto3_t.jpg" width="90" height="90" border="3" alt="Foto 3 - bitte anklicken!"></a> 
<a href="fotos/foto4.jpg" ><img src="thumbnails/foto4_t.jpg" width="90" height="90" border="3" alt="Foto 4 - bitte anklicken!"></a>
<a href="fotos/foto5.jpg" ><img src="thumbnails/foto5_t.jpg" width="90" height="90" border="3" alt="Foto 5 - bitte anklicken!"></a> 
<a href="fotos/foto6.jpg" ><img src="thumbnails/foto6_t.jpg" width="90" height="90" border="3" alt="Foto 6 - bitte anklicken!"></a> 

... usw ...
</p>

</div>

    Was mache ich da falsch, habe schon bei Selfhtml nachgelesen, ohne erfolg! Irgendwo hat sich doch noch ein Fehler versteckt. :aua:

    Grüße
    Homerjay76
     
    homerjay76, Jan 6, 2008
    #1
  2. kalweit

    kalweit Hüter der Glaskugel

    Lass einfach mal bei

    a:link

    das

    :link

    weg.
     
    kalweit, Jan 6, 2008
    #2
  3. homerjay76

    homerjay76 Byte

    Hallo Kalweit,

    habe ich eben versucht, klappt leider nicht!

    Sonst noch nen Tipp?

    mfg
    Homerjay76
     
    homerjay76, Jan 6, 2008
    #3
  4. prm

    prm Byte

    Was die Linkfarbe betrifft klappt das bei mir.
    Du willst ja aber die Rahmenfarbe der Bilder ändern.
    Füge deshalb mal das in die CSS-Angaben hinzu:
    Code:
    img {border-color:#b87c45;}
    Leider kann ich dir nicht sagen, ob und wie man eine Hover-/Visited-Farbe füpr die Bilderrahmen hinterlegen kann.
     
    prm, Jan 7, 2008
    #4
  5. homerjay76

    homerjay76 Byte

    Ist nicht die Linkfarbe gleich der Rahmenfarbe wenn man keine
    Farbangabe macht?

    Wenn ich bei dem Image-Tag z.B. border="3" eingebe
    habe ich einen Rahmen um das Bild in Dunkelblau.
    Gleiche Farbe wie bei Links. Habe ich das Bild angeklickt
    ist die Rahmenfarbe violett, ebenso wie bei einem besuchten Link.

    Also ist doch die Rahmenfarbe gleich der Linkfarbe.

    Mit
    HTML:
    <body link="#b87c45" vlink="#ffffff" >
    klappt es ja, da gebe ich ja auch die Linkfarbe an.

    Oder habe ich da einen gewaltigen Denkfehler???
     
    homerjay76, Jan 7, 2008
    #5
  6. prm

    prm Byte

    Probiers mal so:
    Code:
     a:link img {border: solid 3px #b87c45;}
     
    prm, Jan 8, 2008
    #6
  7. SmokeyJoe22

    SmokeyJoe22 ROM

    Also ich würde des sowieso generell mit einem eigenen stile formular machen umschonmal den hässlichen rand wegzubekommen.
    also einfach eine datei "stile.css" anlegen mit folgendem inhalt:

    .variablerName a {
    text-decoration: none;
    }

    anschließend musst du diese stile.css datei in den gleichen ordner legen in der dein html file ist.
    im html file musst du dann folgendes eingeben:
    <head>
    <link href="Stile.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>
    </head>

    und

    <a href="..." class="variablerNAME" ...>
    <img src=...>
    oder was auch immer

    so hast du die ränder weg und im prinzip auch keine link farbe mehr! ich finde es persönlich schöner wenn man nicht diesen link rahmen um ein bild hat!
     
    SmokeyJoe22, Jan 8, 2008
    #7
  8. kalweit

    kalweit Hüter der Glaskugel

    ...der TO soll mal den ganzen Quellcode der Seite posten. Sieht wohl eher so aus, als ob er die CSS-Angaben an anderer Stelle nochmal überschreibt.
     
    kalweit, Jan 8, 2008
    #8
  9. homerjay76

    homerjay76 Byte

    @ prm: Das schaut ganz gut aus, nur klappt das leider nicht für einen
    DIV - Bereich. Es wird die ganze Seite so formatiert. Ich
    wollte aber nur die Thumbnails.

    @ Kalweit: Hier nochmals der ganze Quelltext:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>

<meta http-equiv="content-style-type" content="text/css; charset=ISO-8859-1">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.3)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.3)">

<meta name="robots" content="follow">

<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" lang="de" content="">
<meta name="keywords" lang="en" content="">
<meta name="date" content="So, 04 Feb 2007 18:15:00 GMT">

<link rel="shortcut icon" href="favicon.ico" type="image/ico">

<style type="text/css">


[COLOR="red"]a:link img {border: solid 3px #b87c45;}
a:visited img {border: solid 3px #ffffff;}

<!--
oder wie in Selfhtml beschreiben

a:link { color:#b87c45; }
a:visited { color:#ffffff; }
-->
[/COLOR]


body {
  padding:0px;
  margin:0px;
  
  font-family:Verdana,Arial,Helvetica,sans-serif;
  color:#000000;}
  
#banner {
  height:115px;
  margin:10px;  }

#inhalt {

  width:auto;
  min-width:200px;
  max-width:700px;
  padding:5px;
  margin:20px 180px;
  img margin: 50px;  }


#inhalt img {
  margin: 5px;  }  

  

#sprache {
  position:absolute;
  top:155px;
  left:10px;
  width:100px;
  height:50px;  }


#navi {
  position:absolute;
  top:200px;
  left:10px;
  width:160px;
  height:300px;  }


p {
  font-size:1.4em;
  padding:0px 10px;  }

pre {
  font-size:1.2em;
  padding:0px 10px;  }


body, #inhalt, #navi { background-color:#ffe4b5; }

</style>
</head>

<body> [COLOR="Red"]<!--  bzw. <body link="#b87c45" vlink="#ffffff">  -->[/COLOR]


<div id="banner">
<img id="topbanner" height="114" width="755" src="grafik/bilderbanner.gif"  border="0"  alt=" Bilder " >
</div>


<div id="inhalt">

<p><span style="font-weight:bold">Bilder anklicken zum Vergr&ouml;&szlig;ern:</span></p>
<p>
<a href="fotos/foto1.jpg" ><img src="thumbnails/foto1_t.jpg" width="90" height="90" border="3" alt="Foto 1 - bitte anklicken!"></a> 
<a href="fotos/foto2.jpg" ><img src="thumbnails/foto2_t.jpg" width="90" height="90" border="3" alt="Foto 2 - bitte anklicken!"></a> 
<a href="fotos/foto3.jpg" ><img src="thumbnails/foto3_t.jpg" width="90" height="90" border="3" alt="Foto 3 - bitte anklicken!"></a> 
<a href="fotos/foto4.jpg" ><img src="thumbnails/foto4_t.jpg" width="90" height="90" border="3" alt="Foto 4 - bitte anklicken!"></a>
<a href="fotos/foto5.jpg" ><img src="thumbnails/foto5_t.jpg" width="90" height="90" border="3" alt="Foto 5 - bitte anklicken!"></a> 
<a href="fotos/foto6.jpg" ><img src="thumbnails/foto6_t.jpg" width="90" height="90" border="3" alt="Foto 6 - bitte anklicken!"></a> 
<a href="fotos/foto7.jpg" ><img src="thumbnails/foto7_t.jpg" width="90" height="90" border="3" alt="Foto 7 - bitte anklicken!"></a> 
<a href="fotos/foto8.jpg" ><img src="thumbnails/foto8_t.jpg" width="90" height="90" border="3" alt="Foto 8 - bitte anklicken!"></a>
<a href="fotos/foto9.jpg" ><img src="thumbnails/foto9_t.jpg" width="90" height="90" border="3" alt="Foto 9 - bitte anklicken!"></a> 
<a href="fotos/foto10.jpg" ><img src="thumbnails/foto10_t.jpg" width="90" height="90" border="3" alt="Foto 10 - bitte anklicken!"></a> 
<a href="fotos/foto11.jpg" ><img src="thumbnails/foto11_t.jpg" width="90" height="90" border="3" alt="Foto 11 - bitte anklicken!"></a> 
<a href="fotos/foto12.jpg" ><img src="thumbnails/foto12_t.jpg" width="90" height="90" border="3" alt="Foto 12 - bitte anklicken!"></a>
<a href="fotos/foto13.jpg" ><img src="thumbnails/foto13_t.jpg" width="90" height="90" border="3" alt="Foto 13 - bitte anklicken!"></a> 
<a href="fotos/foto14.jpg" ><img src="thumbnails/foto14_t.jpg" width="90" height="90" border="3" alt="Foto 14 - bitte anklicken!"></a> 
<a href="fotos/foto15.jpg" ><img src="thumbnails/foto15_t.jpg" width="90" height="90" border="3" alt="Foto 15 - bitte anklicken!"></a> 
<a href="fotos/foto16.jpg" ><img src="thumbnails/foto16_t.jpg" width="90" height="90" border="3" alt="Foto 16 - bitte anklicken!"></a>
<a href="fotos/foto17.jpg" ><img src="thumbnails/foto17_t.jpg" width="90" height="90" border="3" alt="Foto 17 - bitte anklicken!"></a> 
<a href="fotos/foto18.jpg" ><img src="thumbnails/foto18_t.jpg" width="90" height="90" border="3" alt="Foto 18 - bitte anklicken!"></a> 
<a href="fotos/foto19.jpg" ><img src="thumbnails/foto19_t.jpg" width="90" height="90" border="3" alt="Foto 19 - bitte anklicken!"></a> 
<a href="fotos/foto20.jpg" ><img src="thumbnails/foto20_t.jpg" width="90" height="90" border="3" alt="Foto 20 - bitte anklicken!"></a> 
<a href="fotos/foto21.jpg" ><img src="thumbnails/foto21_t.jpg" width="90" height="90" border="3" alt="Foto 21 - bitte anklicken!"></a>
<a href="fotos/foto22.jpg" ><img src="thumbnails/foto22_t.jpg" width="90" height="90" border="3" alt="Foto 22 - bitte anklicken!"></a>
<a href="fotos/foto23.jpg" ><img src="thumbnails/foto23_t.jpg" width="90" height="90" border="3" alt="Foto 23 - bitte anklicken!"></a> 
<a href="fotos/foto24.jpg" ><img src="thumbnails/foto24_t.jpg" width="90" height="90" border="3" alt="Foto 24 - bitte anklicken!"></a> 
<a href="fotos/foto25.jpg" ><img src="thumbnails/foto25_t.jpg" width="90" height="90" border="3" alt="Foto 25 - bitte anklicken!"></a> 
<a href="fotos/foto26.jpg" ><img src="thumbnails/foto26_t.jpg" width="90" height="90" border="3" alt="Foto 26 - bitte anklicken!"></a>
<a href="fotos/foto27.jpg" ><img src="thumbnails/foto27_t.jpg" width="90" height="90" border="3" alt="Foto 27 - bitte anklicken!"></a>
<a href="fotos/foto28.jpg" ><img src="thumbnails/foto28_t.jpg" width="90" height="90" border="3" alt="Foto 28 - bitte anklicken!"></a> 
<a href="fotos/foto29.jpg" ><img src="thumbnails/foto29_t.jpg" width="90" height="90" border="3" alt="Foto 29 - bitte anklicken!"></a> 
<a href="fotos/foto30.jpg" ><img src="thumbnails/foto30_t.jpg" width="90" height="90" border="3" alt="Foto 30 - bitte anklicken!"></a> 
<a href="fotos/foto31.jpg" ><img src="thumbnails/foto31_t.jpg" width="90" height="90" border="3" alt="Foto 31 - bitte anklicken!"></a>
<a href="fotos/foto32.jpg" ><img src="thumbnails/foto32_t.jpg" width="90" height="90" border="3" alt="Foto 32 - bitte anklicken!"></a> 
<a href="fotos/foto33.jpg" ><img src="thumbnails/foto33_t.jpg" width="90" height="90" border="3" alt="Foto 33 - bitte anklicken!"></a> 
<a href="fotos/foto34.jpg" ><img src="thumbnails/foto34_t.jpg" width="90" height="90" border="3" alt="Foto 34 - bitte anklicken!"></a> 
<a href="fotos/foto35.jpg" ><img src="thumbnails/foto35_t.jpg" width="90" height="90" border="3" alt="Foto 35 - bitte anklicken!"></a> 
<a href="fotos/foto36.jpg" ><img src="thumbnails/foto36_t.jpg" width="90" height="90" border="3" alt="Foto 36 - bitte anklicken!"></a>
<a href="fotos/foto37.jpg" ><img src="thumbnails/foto37_t.jpg" width="90" height="90" border="3" alt="Foto 37 - bitte anklicken!"></a>
<a href="fotos/foto38.jpg" ><img src="thumbnails/foto38_t.jpg" width="90" height="90" border="3" alt="Foto 38 - bitte anklicken!"></a>
<a href="fotos/foto39.jpg" ><img src="thumbnails/foto39_t.jpg" width="90" height="90" border="3" alt="Foto 39 - bitte anklicken!"></a>
<a href="fotos/foto40.jpg" ><img src="thumbnails/foto40_t.jpg" width="90" height="90" border="3" alt="Foto 40 - bitte anklicken!"></a>
<a href="fotos/foto41.jpg" ><img src="thumbnails/foto41_t.jpg" width="90" height="90" border="3" alt="Foto 41 - bitte anklicken!"></a>
<a href="fotos/foto42.jpg" ><img src="thumbnails/foto42_t.jpg" width="90" height="90" border="3" alt="Foto 42 - bitte anklicken!"></a>
<a href="fotos/foto43.jpg" ><img src="thumbnails/foto43_t.jpg" width="90" height="90" border="3" alt="Foto 43 - bitte anklicken!"></a> 
<a href="fotos/foto44.jpg" ><img src="thumbnails/foto44_t.jpg" width="90" height="90" border="3" alt="Foto 44 - bitte anklicken!"></a> 
<a href="fotos/foto45.jpg" ><img src="thumbnails/foto45_t.jpg" width="90" height="90" border="3" alt="Foto 45 - bitte anklicken!"></a> 
<a href="fotos/foto46.jpg" ><img src="thumbnails/foto46_t.jpg" width="90" height="90" border="3" alt="Foto 46 - bitte anklicken!"></a> 
<a href="fotos/foto47.jpg" ><img src="thumbnails/foto47_t.jpg" width="90" height="90" border="3" alt="Foto 47 - bitte anklicken!"></a> 
<a href="fotos/foto48.jpg" ><img src="thumbnails/foto48_t.jpg" width="90" height="90" border="3" alt="Foto 48 - bitte anklicken!"></a>
<a href="fotos/foto49.jpg" ><img src="thumbnails/foto49_t.jpg" width="90" height="90" border="3" alt="Foto 49 - bitte anklicken!"></a>
<a href="fotos/foto50.jpg" ><img src="thumbnails/foto50_t.jpg" width="90" height="90" border="3" alt="Foto 50 - bitte anklicken!"></a>
<a href="fotos/foto51.jpg" ><img src="thumbnails/foto51_t.jpg" width="90" height="90" border="3" alt="Foto 51 - bitte anklicken!"></a>
<a href="fotos/foto52.jpg" ><img src="thumbnails/foto52_t.jpg" width="90" height="90" border="3" alt="Foto 52 - bitte anklicken!"></a>
<a href="fotos/foto53.jpg" ><img src="thumbnails/foto53_t.jpg" width="90" height="90" border="3" alt="Foto 53 - bitte anklicken!"></a>
<a href="fotos/foto54.jpg" ><img src="thumbnails/foto54_t.jpg" width="90" height="90" border="3" alt="Foto 54 - bitte anklicken!"></a>
<a href="fotos/foto55.jpg" ><img src="thumbnails/foto55_t.jpg" width="90" height="90" border="3" alt="Foto 55 - bitte anklicken!"></a>
<a href="fotos/foto56.jpg" ><img src="thumbnails/foto56_t.jpg" width="90" height="90" border="3" alt="Foto 56 - bitte anklicken!"></a>
<a href="fotos/foto57.jpg" ><img src="thumbnails/foto57_t.jpg" width="90" height="90" border="3" alt="Foto 57 - bitte anklicken!"></a>
<a href="fotos/foto58.jpg" ><img src="thumbnails/foto58_t.jpg" width="90" height="90" border="3" alt="Foto 58 - bitte anklicken!"></a>
<a href="fotos/foto59.jpg" ><img src="thumbnails/foto59_t.jpg" width="90" height="90" border="3" alt="Foto 59 - bitte anklicken!"></a>
<a href="fotos/foto60.jpg" ><img src="thumbnails/foto60_t.jpg" width="90" height="90" border="3" alt="Foto 60 - bitte anklicken!"></a>
<a href="fotos/foto61.jpg" ><img src="thumbnails/foto61_t.jpg" width="90" height="90" border="3" alt="Foto 61 - bitte anklicken!"></a>
<a href="fotos/foto62.jpg" ><img src="thumbnails/foto62_t.jpg" width="90" height="90" border="3" alt="Foto 62 - bitte anklicken!"></a>
<a href="fotos/foto63.jpg" ><img src="thumbnails/foto63_t.jpg" width="90" height="90" border="3" alt="Foto 63 - bitte anklicken!"></a>
<!--
<a href="fotos/foto64.jpg" ><img src="thumbnails/foto64_t.jpg" width="90" height="90" border="3" alt="Foto 64 - bitte anklicken!"></a>
<a href="fotos/foto65.jpg" ><img src="thumbnails/foto65_t.jpg" width="90" height="90" border="3" alt="Foto 65 - bitte anklicken!"></a>

-->

</p>

</div>

<div id="sprache">
<a href="bilder.html"><img height=20 width=33 src="grafik/de.bmp"  border="0"  alt="Sprache wechseln - deutsch" ></a>
<a href="enbilder.html"><img height=20 width=33 src="grafik/uk.bmp"  border="0"  alt="Change language - english"></a>
</div>

<div id="navi">
<a href="index.html"><img id="Navi1" height="60" width="160" src="grafik/startoff.gif"  border="0"  alt=" Startseite " ></a><br>
<a href="bilder.html"><img id="Navi2" height="60" width="160" src="grafik/bilderon.gif"  border="0"  alt=" Bilder " ></a><br>
<a href="kontakt.html"><img id="Navi3" height="60" width="160" src="grafik/kontaktoff.gif"  border="0"  alt=" Kontakt / Impressum " ></a><br>
<a href="downloads.html"><img id="Navi4" height="60" width="160" src="grafik/downloadsoff.gif"  border="0"  alt=" Downloads " ></a><br>
<a href="links.html"><img id="Navi5" height="60" width="160" src="grafik/linksoff.gif"  border="0"  alt=" Links " ></a>
</div>


</body>
</html>
     
    homerjay76, Jan 8, 2008
    #9
  10. prm

    prm Byte

    Dann schreibe einfach den div noch vorne dran:
    Code:
    #inhalt a:link img {border: solid 3px #b87c45;}
     
    prm, Jan 8, 2008
    #10
  11. homerjay76

    homerjay76 Byte

    Hi prm,

    habe ich auch schon versucht, aber meine Navi-Buttons werden breiter und die Sprache-Buttons bekommern einen wißen Rand.

    Werd wohl bei der alten Lösung bleiben.

    Danke
    Homerjay76
     
    homerjay76, Jan 8, 2008
    #11
  12. prm

    prm Byte

    Sind die Navi-Buttons im gleichen Div? Dann schlägt das natürlich durch.

    Bilde dann besser eine Link-Klasse:
    Code:
    .img a:link img {border: solid 3px #b87c45;}
    HTML:
    <a class"img" href="....."
     
    prm, Jan 8, 2008
    #12
  13. homerjay76

    homerjay76 Byte

    Muß ich mal testen.
    Die Buttons sind in einem extra DIV.
    Habe vorhin den Quelltext gepostet, wenn du Dir nen
    Überblick verschaffen möchtest.
     
    homerjay76, Jan 8, 2008
    #13
  14. prm

    prm Byte

    Korrektur:
    Es muss heißen
     
    prm, Jan 8, 2008
    #14
  15. homerjay76

    homerjay76 Byte

    Jetzt habe ich es doch noch geschafft.
    Hat doch mit

    Code:
    #inhalt a:link img {border: solid 3px #b87c45;}
#inhalt a:visited img {border: solid 3px #ffffff;}
    funktioniert, mußte allerdings im IMG - Tag das border="3" rauslöschen.

    Oh Mann, eigentlich klar, aber ...


    Danke nochmals für eure Hilfe
    Homerjay76
     
    homerjay76, Jan 8, 2008
    #15
Thread Status:
Not open for further replies.

Share This Page