Zum Inhalt springen

CSS Link-Button

TripleD

Von TripleD
in Webdesign

 Teilen

Empfohlene Beiträge

TripleD

TripleD

Geschrieben
Geschrieben

Hallo,

ich hab mir ein Menü mit CSS gebastellt,

auf dem ich Text-Links habe.

jetzt hätte ich noch gerne vor dem Text-Link

ein Bild, das sich bei den verschiedensten

Link Möglichkeiten (link, alink, vlink, hover) ändert.

Gibt es da irgendeine möglichkeit?

Gruß

TripleD

tobias-digital

tobias-digital

Geschrieben
Geschrieben

Hi!

ja, gibt's:

Du definierst dein a-Element als Block, gibst ihm einen linken Innenrand, und definierst das gewünschte Bild als Hintergrundbild, welches du links-mittig ausrichtest und sich nicht wiederholen lässt. Etwa so:


a {

  display: block;

  padding: 0px 0px 0px 10px;

  background-image: url(bild-normal.gif);

  background-repeat: no-repeat;

  background-position: center left;

}

a:hover {

  background-image: url(bild-over.gif);

}

Gruß Tobias

kills

kills

Geschrieben
Geschrieben

klar geht da was :)

entweder bei JS:


<img src='normal.gif' id='image'/><a href="abc.de" 

onMouseOver="documet.getElementById( 'image').src='hover.gif'"

onMouseOut="documet.getElementById( 'image').src='normal.gif'"></a>
wenn dus mit CSS klassen lösen willst, musst du mit background images arbeiten, da du mit css keine img src zuweisen kannst. z.b. 

<a href='abc.de'></a>
CSS: 

a {

   background-image: url('normal.gif');

}

a:hover {

   background-image: url('hover.gif');

}


a:active {

   background-image: url('active.gif');

}

.

.

.

TripleD

TripleD

Geschrieben
  • Autor
Geschrieben

danke erst mal für eure Hilfe.

Also ich würd es schon gern mit CSS realisieren.

Eure vorschläge (CSS) funktioniert irgendwie nicht.

Hier mal mein Code der CSS datei.


a:link { color:#000000; text-decoration:none; background-image: url(../images/link.bmp);}


a:visited { color:#0080FF; text-decoration:none; background-image: url(../images/vlink.bmp);}


a:active { color:#00007F; text-decoration:none; background-image: url(../images/alink.bmp);}


a:hover { color:#FFFFFF; text-decoration:none; }
und 

#menu_bg

{

   width:150;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #CFCFCF;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

   display: block;

   padding: 0px 0px 0px 10px;

   background-repeat: no-repeat;

   background-position: center left;

}

Hoffe ihr findet da ne Lösung.

Wenn ich in #menu_bg ein bg-image einfüge,

dann ändert sich das nicht, wenn ich auf nen Link klicke.

TripleD

TripleD

TripleD

Geschrieben
  • Autor
Geschrieben

Das Bild, dass eigentlich links von Link sein soll,

ist direkt unter dem Link-Text und ändert sich auch.

Aber wenn ich in mein Menü-Hintergrund das Bild

als bg-image mache, ist es zwar an der richtigen stelle,

aber die farbe ändert sich bei klick auf den link nicht.

tobias-digital

tobias-digital

Geschrieben
Geschrieben 


<style type="text/css">

<!--

a { 

   display: block;

   padding: 0px 0px 0px 10px;

   background-repeat: no-repeat;

   background-position: center left;

   color: #000000; 

   text-decoration: none; 

   background-image: url(../images/link.bmp);

}

a:visited { 

   color:#0080FF; 

   text-decoration:none; 

   background-image: url(../images/vlink.bmp);

}

a:active { 

   color: #00007F; 

   text-decoration: none; 

   background-image: url(../images/alink.bmp);

}

a:hover { 

   color: #fff; 

   text-decoration: none; 

}

div#menu_bg {

   width: 150px;

   height: 22px;

   background-color: #AFAFAF;

   border-top: 1px solid #CFCFCF;

   border-right: 1px solid #CFCFCF;

   border-bottom: 1px solid #7F7F7F;

   border-left: 1px solid #7F7F7F;

}

-->

</style>


<div id="menu_bg">

   <a href="">Testlink</a>

</div>

So funktioniert's bei mir in allen Browsern. Ansonsten schick mal nen Link zu der Seite und wir schauen mal drauf

TripleD

TripleD

Geschrieben
  • Autor
Geschrieben

Ich hab mir mal deinen CODE in eine Datei kopiert,

und siehe da, es funktioniert bei mir auch.

Wenn ich aber den CSS-Code in eine extra Datei schreibe,

so wie ich es bei mir ja auch habe, wird garnichtsmehr angezeigt,

auser mein Menühintergrund.

tobias-digital

tobias-digital

Geschrieben
Geschrieben

Hi!

Die Pfadangaben zu den Bildern sind immer aus der Sicht des Stylesheet zu sehen, dass heißt, wenn dein Stylesheet woanders liegt musst Du von da aus auf die Bilder zugreifen.

Beispiel:

/stylesheets/screen/standard.css

/html/menu.htm

/images/link.bmp

dann muss es so lauten: 


background-image: url(../../images/link.bmp);

TripleD

TripleD

Geschrieben
  • Autor
Geschrieben

Also, hier mal meine Code-Schnipsel:

menu.php


<link rel="stylesheet" type="text/css" href="css/menu.css"/>


<div id="menu_rahmen" style="position:absolute; overflow:hidden; top:131; left:14; z-index:0">

</div>


<div id="menu_bg" onclick="menu_link_bg.style.visibility='hidden'" style="position:absolute; overflow:hidden; top:132; left:15; z-index:0">

        	  <a href="home.php" target="body">Home</a>

</div>


<div id="menu_bg" onclick="menu_link_bg.style.visibility='hidden'" style="position:absolute; overflow:hidden; top:154; left:15; z-index:0">

	  <a href="webprogrammierung.php" target="body">Webprogrammierung</a>

</div>
menu.css 

a

{

   display: block;

   padding: 0px 0px 0px 10px;

   background-repeat: no-repeat;

   background-position: center left;

   color: #000000;

   text-decoration: none;

   background-image: url(../images/link.bmp);

}

a:visited

{

   color:#0080FF;

   text-decoration:none;

   background-image: url(../images/vlink.bmp);

}

a:active

{

   color: #00007F;

   text-decoration: none;

   background-image: url(../images/alink.bmp);

}

a:hover

{

   color: #fff;

   text-decoration: none;

}

#menu_bg

{

   width:150;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #CFCFCF;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

}


#menu_rahmen

{

   border-style:solid;

   border-width:thin;

   width:152;

   height:222;

}


.menu_link_bg1

{

   width:92;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #000000;

   border-right:1    solid #000000;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

}


.menu_link_bg2

{

   width:92;

   height:22;


   background-color:#AFAFAF;

   color:#DF0000;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #000000;

   border-bottom:1   solid #7F7F7F;

   border-left:1     solid #7F7F7F;

}


.menu_link_bg3

{

   width:92;

   height:22;


   background-color:#AFAFAF;


   border-top:1      solid #CFCFCF;

   border-right:1    solid #000000;

   border-bottom:1   solid #000000;

   border-left:1     solid #7F7F7F;

}
Ordnerstrucktur 

Main (hier steckt die index.php drin)

->css (hier steckt die menu.css drin)

->images (hier stecken die *.bmp drin)

->include (hier steckt die menu.php drin)

TripleD

TripleD

Geschrieben
  • Autor
Geschrieben

Danke erst mal für eure Hilfe.

Ich hab den Fehler gefunden.

Es lag an den " " vor meinen Links:


<div id="menu_bg" onclick="menu_link_bg.style.visibility='hidden'" style="position:absolute; overflow:hidden; top:154; left:15; z-index:0">

	[COLOR=DarkRed]  [/COLOR]<a href="webprogrammierung.php" target="body">Webprogrammierung</a>

</div>

Gruß

TripleD

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...