nicht angemeldet
Link-Navigation mit Button/Bild
Hallo,
ich suche schon seit Gestern früh ohne Erfolg, vielleicht nicht richtig.
Ich probiere mit CSS, will eine HP erstellen.
Ich möchte die Textlinks der Navigation mit Buttons ersetzen, komme aber nicht klar, was z.B. bei "ul#Navigation a:link {
color: black; background-color: #FFD700 ;" zu ändern ist.
Dieses color: usw. muss irgendwie ersetzt werden.
Sorry, bin html/css-Anfänger
-
Beispiele für Navigationslinks mit separatem CSS-Teil (im Head-Bereich oder in einer seperaten CSS-Datei)
---
.navli a:link{
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#000000;
font-size:14px;
font-weight:bold;
padding-left:20px;
margin:15px;
display:block;
background-image: url(../img/Rechteck000.png);
background-repeat: no-repeat;
}.navli a:visited{
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#666666;
font-size:14px;
font-weight:bold;
padding-left:20px;
margin:15px;
display:block;
background-image: url(../img/Rechteck666.png);
background-repeat: no-repeat;
}.navli a:hover{
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FF9900;
font-size:14px;
font-weight:bold;
padding-left:20px;
margin:15px;
display:block;
background-image: url(../img/RechteckF90.png);
background-repeat: no-repeat;
}
---
Der eigentliche Link:<a href="../index.html">Inhalt</a>
--------------------------------------------
In dem A-Tag:<a href="../index.html" style="background-image: url(../img/RechteckF90.png); background-repeat: no-repeat; background-color:#FF9900;" >Inhalt</a>
Problem: man benötigt auf alle Fälle einen Inhalt als Schrift.
-----------------------------------
Aber warum nicht einfach:
<a href="../index.html" style="background-color:#FF9900">
<img src="../img/Hintergrund.png " width="100" height="62" />
</a>-
Danke, ich werde es so probieren,
obwohl ich das nicht wirklich verstehe, bin eben Anfänger:
mit separatem CSS-Teil (im Head-Bereich oder in einer seperaten CSS-Datei)-
Dann bin ich mal nicht so und schreibe ein wenig ausführlicher...
-----------------------------------------
Variante 1 mit CSS im Head-Teil der HTML
(gekürzte CSS-Angaben)<html>
<head>
<title>Beispiel</title>
<style type="text/css">
<!--
.navli a:link{
background-color:#000000;
background-image: url(../img/Rechteck000.png);
background-repeat: no-repeat;
}.navli a:visited{
background-color:#000000;
background-image: url(../img/Rechteck666.png);
background-repeat: no-repeat;
}.navli a:hover{
background-color:#000000;
background-image: url(../img/RechteckF90.png);
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<p><a href="../index.html">Inhalt</a></p>
</body>
</html>
____________________________________________
Variante 2:Eine Datei mit Namen "design.css" wird von mir in den Ordner "css" gespeichert.
Inhalt (einfach mit dem Editor eingefügt):/* Normaler Link */
.navli a:link{
color:#000000;
background-image: url(../img/Rechteck000.png);
background-repeat: no-repeat;
}
/* Besuchter Link */
.navli a:visited{
color:#000000;
background-image: url(../img/Rechteck666.png);
background-repeat: no-repeat;
}
/* beim Mausüberfahren des Links */
.navli a:hover{
color:#000000;
background-image: url(../img/RechteckF90.png);
background-repeat: no-repeat;
}Die Html habe ich jetzt in einem Nachbar-Ordner (z.B. "html" gespeichert)
im Kopfteil wird jetzt angezeigt, wo man die CSS-Datei finden kann.<html>
<head>
<title>Beispiel</title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/design.css"/>
</head>
<body>
<p><a href="../index.html">Inhalt</a></p>
</body>
</html>Die Sachen gehörten aber zu den Grundlagen von CSS
und die solltest du dir mal zu Gemüte führen.-
##############################
===============
Die Sachen gehörten aber zu den Grundlagen von CSS
und die solltest du dir mal zu Gemüte führen.#############################
Ich ändere seit einer Woche meine HP (Aussehen und Inhalt), man legte mir nahe, Frames zu benutzen.
Seit 2 Tagen empfiehlt man mir CSS (mit Recht), vorher wusste ich nichts von CSS.
Man möge mir verzeihen, dass ich nicht gleich alle Grundlagen weiss und umsetzen kann.Danke für die Hilfe.
Scheint nicht zu gehen, da es sich bei meiner Seite um 10 verschiedene links handelt, die jeder mit einem anderen Button versehen werden sollten. -
<html>
<head>
<title>Beispiel</title>
<style type="text/css">
<!--
/*Link allgemein, (Farbe) Angaben, die für ALLE Links gelten sollen*/
a:link{
background-color:#000000;
color:#FFFFFF
background-repeat: no-repeat;
}a:visited{
background-color:#333333;
color:#cccccc
background-repeat: no-repeat;
}a:hover{
background-color:#FF0000;
color:#00FFFF
background-repeat: no-repeat;
}/*Buttons (jeder Button bekommt eine eigene Klasse
/* der Punkt zeigt eine Klasse (letztlich ein <tag> )
in dem sich der Link befindet */
.button1 a:link{
background-image: url(../img/Rechteck1h.png);
}.button1 a:visited{
background-image: url(../img/Rechteck1v.png);
}.button1 a:hover{
background-image: url(../img/Rechteck1h.png);
}
a:hover{
background-color:#FF0000;
color:#00FFFF
background-repeat: no-repeat;
}/*Buttons*/
.button2 a:link{
background-image: url(../img/Rechteck2h.png);
}.button2 a:visited{
background-image: url(../img/Rechteck2v.png);
}.button2 a:hover{
background-image: url(../img/Rechteck2h.png);
}
-->
</style>
</head>
<body>
<div class="button1"><a href="../index.html">Inhalt</a></div>
<div class="button2"><a href="../index.html">Inhalt</a></div>
</body>
</html>Ob du die Links jetzt in einem <div> oder in einem <span> oder in einem <li> oder in einem <p>-Tag verschachtelst bleibt dir überlassen.
Natürlich kannst du auch nur den a:link a:visited mit dem gleichen Bild hinterlegen, und für a:hover allen Buttons das gleiche Bild hinterlegen oder aber nur die Schrift, den Rahmen oder sonst was ändern. Aber es sollten alle drei Formen a:link, a:visited und a:hover in genau der Reihenfolge auftauchen. Zur Not alle mit den gleichen Angaben. Dann hat man die wenigsten Probleme mit den verschiedenen Browsern.
Ich hoffe das hilft dir weiter.
-
-
-