CSS Link-Button

TripleD · 17. September 2004

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 · 17. September 2004

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 · 17. September 2004

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 · 17. September 2004

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

kills · 17. September 2004

angezeigt wird das image?

nur nicht gewechselt?

TripleD · 17. September 2004

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 · 17. September 2004


<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 · 17. September 2004

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 · 17. September 2004

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);

kills · 17. September 2004

poste ma hier dein zeugs

oder gib die url ma raus!

TripleD · 17. September 2004

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 · 17. September 2004

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

Anmelden

CSS Link-Button

Empfohlene Beiträge

TripleD

tobias-digital

kills

TripleD

kills

TripleD

tobias-digital

TripleD

tobias-digital

kills

TripleD

TripleD

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Benutzerkonto erstellen

Anmelden

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de