• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation

Status
Für weitere Antworten geschlossen.
Mario348

Mario348

Neues Mitglied
Ich möchte nicht solch eine Navigation, sondern, Textbuttons mit einem Hintergrundbild.
Ausserdem möchte ich Linkeigenschaften wie mouseover für die Buttons.
Das Hintergrundbild der Buttons für's Mouseover möchte ich ebenfalls bestimmen.

Code Navigation:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="shortcut icon" href="http://www.arudc.ch/favicon.ico">
<meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
<meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
<meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
<meta name="title" content="Alles rund um den Computer">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="Mario Bienz">
<meta name="publisher" content="arudc.ch">
<meta name="copyright" content="arudc.ch">
<meta name="revisit-after" content="after 20 days">
<meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
<meta name="page-type" content="Gratisdownloads & Tips">
<meta name="audience" content="alle">
<meta name="robots" content="index,follow">
<meta name="generator" content="http://www.arudc.ch">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>



<style type="text/css">
<!--
#hauptnavi {list-style-type: none; margin:0.5em;padding-left:0.5em;}

#hauptnavi a {background-color: #CCC; display: block;margin-bottom: 5px; padding: 3px 10px; widdth: 99%;}

html>body #hauptnavi a {width: 12em; }


#navicontainer {width:8em;}
#hauptnavi a {text-decoration:none;}

-->
</style>

</head>

<body>

<div id="navicontainer">
<ul id="hauptnavi">
<li><a href="2.html" target="mitte.html">neuste RADEON-Grafikkartentreiber</a></li>
<li><a href="3.html" target="mitte.html">Windows Vista-Infos</a></li>
<li><a href="4.html" target="mitte.html">Viren und Malware</a></li>
<li><a href="5.html" target="mitte.html">Stressabbau-Downloads</a></li>
<li><a href="6.html" target="mitte.html">Musik</a></li>
<li><a href="7.html" target="mitte.html">Browser-Downloads</a></li>
<li><a href="9.html" target="mitte.html">Webradio</a></li>
<li><a href="10.html" target="mitte.html">Maps</a></li>
<li><a href="remote.html" target="mitte.html">Remote</a></li>
<li><a href="http://578049.guestbook.onetwomax.de" target="mitte.html">Gästebuch</a></li>
<li><a href="newsletter.html" target="mitte.html">Newsletter</a></li>
<li><a href="impressum.html" target="mitte.html">Impressum</a></li>
</ul>
</div>
</body>
</head>
 
Zuletzt bearbeitet:
Ich hab beispielsweise das hier versucht, klappt aber nicht !

Code: 
<style type="text/css">
<!--
#hauptnavi {list-style-type: none; margin:0.5em;padding-left:0.5em;}

[COLOR=Red]#hauptnavi a {background-image: buttonfarbverlauf.jpg;[/COLOR] display: block;margin-bottom: 5px; padding: 3px 10px; widdth: 99%;}

html>body #hauptnavi a {width: 12em; }


#navicontainer {width:8em;}
#hauptnavi a {text-decoration:none;}
[COLOR=Red]#hauptnavi a:hover {image: buttonfarbverlauf2.jpg;}[/COLOR]

-->
</style>

</head>

<body>

<div id="navicontainer">
<ul id="hauptnavi">
<li><a href="2.html" target="mitte.html">neuste RADEON-Grafikkartentreiber</a></li>
<li><a href="3.html" target="mitte.html">Windows Vista-Infos</a></li>
<li><a href="4.html" target="mitte.html">Viren und Malware</a></li>
<li><a href="5.html" target="mitte.html">Stressabbau-Downloads</a></li>
<li><a href="6.html" target="mitte.html">Musik</a></li>
<li><a href="7.html" target="mitte.html">Browser-Downloads</a></li>
<li><a href="9.html" target="mitte.html">Webradio</a></li>
<li><a href="10.html" target="mitte.html">Maps</a></li>
<li><a href="remote.html" target="mitte.html">Remote</a></li>
<li><a href="http://578049.guestbook.onetwomax.de" target="mitte.html">Gästebuch</a></li>
<li><a href="newsletter.html" target="mitte.html">Newsletter</a></li>
<li><a href="impressum.html" target="mitte.html">Impressum</a></li>

</ul>
</div>
 
Code: 
#hauptnavi a {
background-image: url('buttonfarbverlauf.jpg');
/*und so weiter*/
Ein Hintergrundbild wird afaik immer nur so eingefügt, wie ich es oben geschrieben habe. Versuch das mal.
 
Zuletzt bearbeitet:
Hab's so probiert, funktioniert aber nicht:

#hauptnavi a {hover: url(buttonfarbverlauf2.jpg);


Wie kann ich machen, dass beim Anklicken des Buttons der Link nicht "aufleuchtet" ? Müsste ich die Buttons in Form eines Bildes verlinken ???
 
1. Hast Du nicht Leerzeichen und ' im Code, die nicht sein dürfen ?
2. Wo muss ich den Code einbinden ?
 
Du verwirrst mich ganz schön !

Wie lautet der Code jetzt richtig ?
Ich habe für die Navigation eine .css Datei erstellt, in die nur dieser Code kommt oder ?
 
Nur als Beispiel:

In CSS-Datei (style.css):
Code: 
a:hover { background-image:url('buttonfarbverlauf2.jpg'); }

Im Head der HTML-Datei:
Code: 
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
 
Meine .css Datei sieht nun so aus:

Code: 
#hauptnavi {list-style-type: none; margin:0.5em;padding-left:0.5em;}

#hauptnavi a {background-image: buttonfarbverlauf.jpg; display: block;margin-bottom: 5px; padding: 3px 10px; widdth: 99%;}

html>body #hauptnavi a {width: 12em; }


#navicontainer {width:8em;}
#hauptnavi a {text-decoration:none;}
#hauptnavi a {background-image: url(buttonfarbverlauf.jpg);
a:hover { background-image:url('buttonfarbverlauf2.jpg'); }
Der mouseover-Effekt klappt jedoch immer noch nicht !
Ausserdem möchte ich, dass sich die Links beim Klick auf den Button nicht "Bewegen", die Beschriftung sollte also still stehend bleiben.
Weiter möchte ich für meine Navigation nebst den Buttons noch einen Farbverlauf.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="buttonstyle.css">
<link rel="shortcut icon" href="http://www.arudc.ch/favicon.ico">
<meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
<meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
<meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
<meta name="title" content="Alles rund um den Computer">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="Mario Bienz">
<meta name="publisher" content="arudc.ch">
<meta name="copyright" content="arudc.ch">
<meta name="revisit-after" content="after 20 days">
<meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
<meta name="page-type" content="Gratisdownloads & Tips">
<meta name="audience" content="alle">
<meta name="robots" content="index,follow">
<meta name="generator" content="http://www.arudc.ch">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<div id="navicontainer">
<ul id="hauptnavi">
<li><a href="2.html" target="mitte.html">neuste RADEON-Grafikkartentreiber</a></li>
<li><a href="3.html" target="mitte.html">Windows Vista-Infos</a></li>
<li><a href="4.html" target="mitte.html">Viren und Malware</a></li>
<li><a href="5.html" target="mitte.html">Stressabbau-Downloads</a></li>
<li><a href="6.html" target="mitte.html">Musik</a></li>
<li><a href="7.html" target="mitte.html">Browser-Downloads</a></li>
<li><a href="9.html" target="mitte.html">Webradio</a></li>
<li><a href="10.html" target="mitte.html">Maps</a></li>
<li><a href="remote.html" target="mitte.html">Remote</a></li>
<li><a href="http://578049.guestbook.onetwomax.de" target="mitte.html">Gästebuch</a></li>
<li><a href="newsletter.html" target="mitte.html">Newsletter</a></li>
<li><a href="impressum.html" target="mitte.html">Impressum</a></li>

</ul>
</div>
</body>
</head>
Farbverlauf:

Code: 
<defs>
<linearGradient id="farbverlauf1">
<stop offset="0%" stop-color="gold">
<stop offset="100%" stop-color="red">
</linearGradient>
</defs>
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben