Andere farbe beim linkbutton

wurmax

moin,
ich versuche verzweifelt mit zwei verschiedenen Grafiken es so hin zu bekommen, dass wenn der Linkbutton nit angewählt isst die eine GRafik ist und wenn man ihn anwählt dann in einer anderen Farbe ist. Zweite Grafik. Ich poast hier jetzt mal meien Quelltexte als ocss und html.

html quelltext:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Max Homepage-Startseite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table align="center" border="0" width="660" cellpadding="0" cellspacing="0">
<tr>
<td id="header" width="660" height="120">
[img]grafiken/Banner.jpg[/img]
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="navi">
[url='index.html'][img]grafiken/link_anders.jpg[/img][/url]
</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

css quelltext:

Code

body
{
	background
	color:                  #000000;
	margin-left: 		0px;
	margin-right: 		0px;
	margin-top:		0px;
	padding: 		0px;
	font-size:		small;
	font-family: 		Verdana,Arial,;
         color:                  #FFFFFF;
         height:			100%;
}
a.navlink:link
{
	background-image:       url(grafiken/link_normal.jpg);
	text-decoration: 	none;
}
a.navlink:visited
{
	background-image:       url(grafiken/link_normal.jpg);
	text-decoration: 	none;
}
a.navlink:hover
{
	background-image:       url(grafiken/link_normal.jpg);
	text-decoration: 	underline;
}
a.navlink:active
{
	background-image:       url(grafiken/link_normal.jpg);
	text-decoration: 	none;
}


.Schrift
{
         font-size:               small;
         color:                  #FFFFFF;
}
#header
{
         width:                   660px;
         height:                  120px;
}


#navi
{
         background-repeat:       no-repeat;
         padding-right:           825px;
         padding-left:            0px
}

Alles anzeigen

driver

1. ich würd des mit js lösen

2. da steht überall des gleiche bild, kann ja nix ändern...

wurmax

wie soll cih das denn nach deiner meinung aufschreiben ?
das is ja meine problem !

yeti66

wurmax,

so meint driver das :

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Max Homepage-Startseite</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body { margin:  0px;font-size: small;font-family: Verdana,Arial,; color: #FFFFF;}


a:link { background-image:url(rot.gif); text-decoration:none;}
a:visited{background-image:url(grafiken/link_normal.jpg);text-decoration: none;}
a:hover {background-image:url(blau.gif);text-decoration:underline;}
a:active{background-image:url(grafiken/link_normal.jpg);text-decoration: none;}


.Schrift{font-size: small;color: #FFFFFF;}
#header{width:660px; height: 120px;}
#navi{background-repeat:no-repeat;padding-right: 825px;padding-left:0px} 
</style>
</head>
<body>
<table align="center" border="0" width="660" cellpadding="0" cellspacing="0">
  <tr>
    <td id="header" width="660" height="120">[img]grafiken/Banner.jpg[/img] </td>
  </tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>[url='index.html']erster Link[/url]</td>
    <td>[url='index.html']zweiter Link[/url]</td>
    <td>[url='index.html']dritter Link[/url]</td>
    <td>[url='index.html']vierter Link[/url]</td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

Gruß yeti66

wurmax

moin,
das is jetzt schon fast so wie ich mir es vorgestellt habe. nur wei krieg ich es hin, dass die buttons nicht nur in der größe bestimt werden können dadurch wie viel man dort rein schreibt, sonder das dieeine feste größe von 170X30 haben. ?

driver

setz dei breite der zeile auf die größe.

den text kannst dann mit padding-top / -right / -left / -bottm ausrichten

yeti66

Hier noch mal was als Beispiel zum üben.
Du mußt Dich schon etwas mit http://de.selfhtml.org/ auseinandersetzen.

Gruß yeti66
-------------------------------------------
Es ist eben noch kein Meister vom Himmel gefallen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Max Homepage-Startseite</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body { margin:0px;font-size: small;font-family: Verdana,Arial,; color: #FFFFF;}


a:link {text-decoration:none;color: #000000; padding:10px;background-color:#cccccc;}
a:visited{text-decoration:none;padding:10px}
a:hover {text-decoration:none;color: #FF0000; padding:10px;background-color:#FFFF00;}
a:active{text-decoration:none;}


.Schrift{font-size: small;color: #FFFFFF;}
#header{width:680px; height: 120px;}
#navi{background-repeat:no-repeat;padding-right: 825px;padding-left:0px}
</style>
</head>
<body>
<table align="center" border="0" width="660" cellpadding="0" cellspacing="0">
  <tr>
    <td id="header">[img]grafiken/Banner.jpg[/img] </td>
  </tr>
</table>
<table align="center" bgcolor="#CCCCCC" width="680"   border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">[url='index.html']erster Link[/url]</td>
    <td align="center">[url='index.html']zweiter Link[/url]</td>
    <td align="center">[url='index.html']dritter Link[/url]</td>
    <td align="center">[url='index.html']vierter Link[/url]</td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

yeti66

lassen wir die Gurke von oben mal weg und machen Nägel mit Köpfen.

Tags