Linkbuttons via CSS3 definieren und einbinden

Ranger1281 · 17.05.2012

Hallo Allerseits,

ich bin seit geraumer Zeit dabei mir eine kleine Website zu erstellen. Bei diesem Projekt geht es mir darum, die Site "zu Fuß" also ohne CMS, WYSIWYG- Editoren oder ähnliches zu realisieren. Als mein erster Anlauf so langsam begann Formen anzunehmen, kam dann HTML5 und CSS3. Also hab ich komplett neu begonnen, da ich beim ersten Anlauf vieles mit Grafiken gelöst hatte, was jetzt mit CSS3 möglich ist.

Zunächst aber die beiden Links zur ersten und zweiten Version. Die erste ist Layoutmäßig schon weiter fortgeschritten, so das Ihr besser sehen könnt, in welche Richtung ich ungefähr gehen möchte...

"alte Version":
"CSS3- Version":

Akruell arbeite ich gerade an den Menubuttons.
Diese sollen als hover-effekt den Farbverlauf und die Textfarbe ändern.
Ursprünglich hatte ich mir den jeweiligen Button, inkl. Text, als Grafik erstellt und diese mittels eines (heruntergeladenen) Javascripts (Menu links), bzw. eines CSS-Hovers (Menu oben, auch heruntergeladen) wechseln lassen.

Bei der neuen Site würde ich mir ja nun mittels CSS3 die jeweilige Box mit dem entsprechenden Farbverlauf erstellen und diese dann wechseln lassen.

Nun kommt meine eigentliche Frage:

die Boxes kann ich doch für sich als Klasse definieren, da sich die Buttons ja mehrfach wiederholen. Für die Position müsste ich das ganze dann z.B. in einen Div- Container einbinden und diesen mittels ID exakt und einmalig ansprechen. Also vom Grundsatz her:

HTML:

<div id="button1">
 <class="menubutton1"></class>
</div>

in den den div.Container würde ich dann auch den Hover-Effekt mit einbinden.

Ist das soweit richtig??

Als zweites hätte ich den Text, der ja als Hover-Effekt von Schwarz nach Weiß wechseln soll...

Und jetzt stehe ich auf dem Schlauch!
Wie kombiniere ich das Ganze so, dass es auch im Qelltext, bzw. in der CSS einingermassen sinnvoll und übersichtlich wird und vor allem funktioniert??

Wenn Ihr die Qellcodes, bzw. css- Dateien hier im Thread benötigt, lasst es mich bitte wissen. Ich mir das einfügen verkniffen, da es sich um 11 Dateien handelt.

Bleibt mir nur noch, wie immer
vielen Dank im Voraus zu sagen...

P.S.:
Darf ich in diesem Thread meine eigenen Fortschritte dokumentieren, damit sich für spätere Fragen ein Zusammenhang ergibt oder ist so etwas bei Euch nicht gewünscht. Ich frage lieber vorher, nicht dass das als Spam gewertet wird.

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Also eine Standardstruktur für ein Menü sieht etwa so aus:

HTML:

<ul id="nav">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
    <li><a href="">Link 4</a></li>
</ul>

Die "a"s kannst du dann in deiner CSS beliebig stylen (z.B. mit dem Farbverlauf)

Außerdem brauchst du für deine ganzen Menüpunkte keine einzelnen divs. Es reicht, wenn du das so wie ich oben in eine Liste schachtelst.

Wenn du noch mehr fragen hast, sag einfach bescheid

p.s.: klar darfts du das

Ranger1281 · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Hi simonpicos,

die menustrktur in HTML ist soweit klar, wobei ich die Listenform in meinem Fall nicht so vorteilhaft halte. Im Hintergrund habe ich ja die Boxes, auf denen die Texte platziert werden müssen. Deshalb bin ich für die einzelnen Buttons auf den div- Container gekommen. Der Button an sich wird über eine Klasse definiert und die Position mit Linktext ist einmalig und kann somit über den div definiert werden.
Zur Verdeutlichung sieh Dir bitte die "alte Version" an.

Mein Problem ist jedoch, dass ich keine Idee habe, wie ich den Code aufbauen soll. Was geht über CSS und was muß in HTML geschrieben werden, bzw. wie baue ich dies überhaupt auf.

hier mal ein schnipsel von der alten Version:

HTML:

<div id="button2">
   <a href="home.html"
     onmouseover="homeb1.src='img/homeb2_224x24.png';" width="224"height="24"
     onmouseout="homeb1.src='img/homeb1_224x24.png';"  width="224"height="24"
     target="main">
    <img src="img/homeb1_224x24.png" border="0" width="224"height="24" name="homeb1">
   </a>
  </div>

Code:

#button2
 { position: fixed;
left: 50%;
margin-left: -565px;
top: 330px;
z-index: 3;}

Code:

  <script language="JavaScript">
<!--
button100= new Image();
button100.src = "img/homeb2_224x24.png"
button1= new Image();
button1.src = "img/homeb2_224x24.png"
button2= new Image();
button2.src = "img/gartenb1_224x24.png"
button3= new Image();
button3.src = "img/tierb1_224x24.png"
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
  </script>

Hier habe ich im link-Tag, über die Attribute onmouserover und onmouseout, die Bilder angegeben, in der CSS die Posistion definiert, der Rest lief über ein Javascript.
Jetz ist dies alles mittels CSS3 realisierbar, ich schnall nur nicht wie....:uhm:

ADcosmos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Hi,

1. Es hat Sinn mit Listen zu arbeiten. Wenn jemand deine Seite ohne CSS lädt, erkennt er leichter die Navigation, und deren einzelne Items.

2. Aufbau (für die Navigation, auf Basis von simonpicos)

Code:

<ul id="nav">
    <li><a href="xyz.html" id="btn1">Link 1</a></li>
    <li><a href="xyz.html" id="btn2">Link 2</a></li>
    <li><a href="xyz.html" id="btn3">Link 3</a></li>
    <li><a href="xyz.html" id="btn4">Link 4</a></li>
</ul>

Deine CSS-Datei (bzw. ein Auszug davon)

Code:

ul#nav{
	list-style: none;
	position: relative;
}

ul#nav a{
	text-decoration: none;
	display: block
	position: relative; //oder absolute
	width: 100px;
	height: 50px;
	background: red; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOut"
	color: white;
}

ul#nav a:hover{
	background: green;//deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOver"
	color: black;
}

ul#nav a#btn1{
	left: 0;
	top: 0;
}

ul#nav a#btn2{
	left: 100px;
	top: 200px;
}

MFG ADcosmos

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Jep, ne Navigation macht man normalerweise als Liste.

ADcosmos hats nochmal ein bisschen ausfühtlicher gemacht

Ranger1281 · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Ok, ich bin ja lernfähig....

also eine Liste machen.

in der CSS, bei background gebe ich farbe oder Bild an, auch klar...
Da meine Buttons mit gradients gestaltet sind, wäre das jedesmal die komplette definition für alle erdenklichen Browser. Wenn das so sein muss... -ok.
Aber hier frage ich mich, ob es nicht möglich ist, das ganze je 1x zu definieren und dann eben über einen Klassennamen einzubinden??

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Ja klar, geb allen deinen Buttons die selbe Klasse und weise der Klasse dann deinen background zu

Kleiner Tipp, damit du die gradients nicht für jeden Browser beschreiben musst:

ein kleines Script, was die prefixe automatisch generiert. Wies funktioniert steht auf der site

Ranger1281 · 17.05.2012

simonpicos schrieb:
Ja klar, geb allen deinen Buttons die selbe Klasse und weise der Klasse dann deinen background zu

Das hab ich bereits gemacht, ich bräuchte Hilfe, wie ich die Klasse dann in den Link, bzw. die Liste einbinde....

Das war grad ein bisschen blöd und kurz formuliert, sorry.

Also... die beiden Versionen meines Buttons habe ich angelegt, sie haben die Klassennamen "menubutton1" für die Standardansicht und "menubutton2" für den Hover-Effekt.
Diese bilden nach dem Vorschlag von ADcosmos meine beiden Backgrounds.
Was ich nicht weiss, ist wie ich diese richtig in der CSS definiere, bzw. angebe...
eine Bild-URL ist klar, eine Farbe auch... aber wie gebe ich an dieser Stelle meine Klasse an:

Code:

...
ul#nav a{     text-decoration: none;     display: block     position: relative; //oder absolute     width: 100px;     height: 50px;
        [COLOR=Red]/* Diese Stelle meine ich!!!*/
        background: red; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOut"[/COLOR]     
        color: white;
...

Ich muss leider feststellen, dass ich mich in dieser Form noch niemals mit Listen oder dem einbinden von Klassen beschäftigt habe. Da stehe ich völlig armselig da...

ADcosmos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Hi,

Mit Klassen müsstest Du eventuell nicht arbeiten. Das hängt aber davon ab, wo Di diesen background-Stil überall einsetzen möchtest.
Möchtest Du nämlich nur die a-tags in der Navi mit deinem Gradient stylen, reicht meine oben genannte Variante.

Code:

<ul id="nav">
    <li><a href="xyz.html" id="btn1" [COLOR="red"]class="menubutton1"[/COLOR]>Link 1</a></li>
    <li><a href="xyz.html" id="btn2" class="menubutton1">Link 2</a></li>
    <li><a href="xyz.html" id="btn3" class="menubutton1">Link 3</a></li>
    <li><a href="xyz.html" id="btn4" class="menubutton1">Link 4</a></li>
</ul>

Die Id brauchst Du nur, wenn Du die einzelnen a-Tags noch jeweils positionieren möchtest.

Deine CSS- würde dann so aussehen:

Code:

ul#nav{
	list-style: none;
	position: relative;
}

ul#nav a{
	text-decoration: none;
	display: block;
	position: relative; //oder absolute
	width: 100px;
	height: 50px;
}

[COLOR="Red"]a.menubutton1{ //Hier wird allen a-Tags, die die Klasse menubutton1 haben folgere Stil zugewiesen
	background: red; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOut", für IE8 und darunter als normale farbe
	background-image: linear-gradient(top, rgb(117,150,248) 0%, rgb(5,68,214) 100%);//Hier dein Verlauf
	color: white;
}

//Anstatt menubutton2 kommt das:
a.menubutton1:hover{//Hier wird allen a-Tags, die die Klasse menubutton1 haben folgere Stil zugewiesen, wenn die Mau über ihnen ist
	background: green;//deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOver"
	background-image: linear-gradient(top, rgb(117,150,248) 0%, rgb(5,68,214) 100%);//Hier dein Verlauf
	color: black;
}[/COLOR]

ul#nav a#btn1{
	left: 0;
	top: 0;
}

ul#nav a#btn2{
	left: 100px;
	top: 200px;
}

MFG ADcosmos

manfred_hst · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

hallo ranger 1281,
schreibe doch einfach:

#buttons a {
background: url(button1);
text-decoration: none;
color: #ffffff;
}

#buttons a:hover{
background: url(button2);
text-decoration: none;
color: #ff0000;
}

gruß Manfred

Ranger1281 · 17.05.2012

Jetzt kommen wir der Sache näher....

Also, wenn ich das richtig verstanden habe, ist es doch so, dass ich die definitionen für die Buttons, bzw. gradients in Deinen Vorschlag schreibe.

Ich hatte gehofft, dies, der Übersicht wegen, an anderer Stelle machen zu können und das halt als Klasse hier einbinden zu können.
Nachdem ich mich heute hier intensiv durchgewühlt habe, komme ich zu der Erkenntnis, das ich dies ja auch hier nur einmal machen müsste... also ran ans Werk.
Eine Frage habe ich hier aber noch:

Kann ich das direkt so einbinden oder würde sich an diesem Aufbau etwas ändern?

Code:

        /*Menubutton1 - Standardansicht*/
.menubutton1
        {
        /*Box- Definition*/
        width:        180px;
        height:        25px;
        /*Farb- Definintion*/
        /* Alte Browser: */
        background: #fcfff4;

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 30%, #5a5a5a 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#fcfff4), color-stop(30%,#dfe5d7), color-stop(100%,#5a5a5a));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* W3C: */
        background: linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#5a5a5a',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     5px;
        -moz-border-radius-topright:    5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft:  5px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border-radius:         6px 6px 6px 6px;

        /*Schatten- Definintion*/
        -webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;
        }

        /*Menubutton2 - Hoveransicht*/
.menubutton2
        {
        /*Box- Definition*/
        width:        180px;
        height:        25px;
        /*Farb- Definintion*/
        /* Alte Browser: */
        background: #fcfff4;

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #5a5a5a 0%, #dfe5d7 70%, #fcfff4 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#5a5a5a), color-stop(70%,#dfe5d7), color-stop(100%,#fcfff4));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* W3C: */
        background: linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#fcfff4',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     5px;
        -moz-border-radius-topright:    5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft:  5px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border-radius:         6px 6px 6px 6px;

        /*Schatten- Definintion - entfällt bei menubutton2!!!*/
        /*-webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;  */
        }

die Klassennamen verschwinden natürlich...

ups, das hat sich überschnitten...

manfred_hst schrieb:
hallo ranger 1281,
schreibe doch einfach:
#buttons a {
background: url(button1);
text-decoration: none;
color: #ffffff;
}

#buttons a:hover{
background: url(button2);
text-decoration: none;
color: #ff0000;
}
gruß Manfred

wie? mit URL kann ich die Klassen ansprechen, bzw. einbinden??
genau das habe ich gesucht....

Ranger1281 schrieb:
ups, das hat sich überschnitten...
-------------
Zitat von manfred_hst
hallo ranger 1281,
schreibe doch einfach:
#buttons a {
background: url(button1);
text-decoration: none;
color: #ffffff;
}

#buttons a:hover{
background: url(button2);
text-decoration: none;
color: #ff0000;
}
gruß Manfred
----------

wie? mit URL kann ich die Klassen ansprechen, bzw. einbinden??
genau das habe ich gesucht....

das funktioniert leider nicht. Auch nicht, wenn ich aus der Klasse (.menubutton1) eine ID (#menubutton1) mache.... Schade, trotzdem vielen Dank, ich versuche jetzt die Variante von ADcosmos.

edit: nächstes mal bitte die äußerst praktische Editier-Funktion nutzen.

manfred_hst · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

was funktioniert denn nicht?

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Ok

Also: mit der pseudoklasse ":hover" legst du die Eigenschaften für den mouseover zustand fest. Du brauchst keine zwei klassen für ein Element..

Und achte doch bitte drauf, dass du keine doppel/dreifachposts machst, das schadet nur der übersichtlichkeit. Es gibt rechts unten den bearbeiten-button..

Ranger1281 · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

ich habe nach Deinem Beispiel:

Code:

background: url(.menubutton1);

und nachdem dies nicht ging auch

Code:

background: url(#menubutton1);

eingebunden.
Natürlich habe ich auch oben in der CSS beim 2. Versuch die Klasse, gegen die ID geändert.
Leider wird der Button nicht angezeigt.

Allerdings kämpfe ich gerade auch genau so mit ADcosmos Vorschlag...
auch wenn ich direkt im UL die gradients definiere kommt nichts...

irgendwo ist ein Fehler....

am besten setzte ich doch mal die beiden Codes ein:

HTML:

<!--<?xml version="1.0" encoding="iso-8859-1"?> -->
<!DOCTYPE html>

<html>
 <head>
  <title>Familie Schepp</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Ralf Schepp" />
  <meta name="robots" content="index, follow" />
  <meta name="language" content="de" />
  <meta name="DC.rights" content="Ralf Schepp" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="css/global.css" type="text/css" />
  <link rel="stylesheet" href="css/header.css" type="text/css" />
  <link rel="stylesheet" href="css/menu.css" type="text/css" />
  <meta http-equiv="date" content="17.05.2012" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="content-style-type" content="text/css; charset=iso-8859-1" />
  <meta http-equiv="content-script-type" content="text/javascript; charset=iso-8859-1" />

 </head>
 <body>
  <!-- Body -->
  <div id="body"></div>

  <!-- Header -->
  <div id="topbox"></div>
   <!-- Bilder im Header -->
  <div id="head_pic1">
   <img src="img/Ralf360x360.jpg" alt="Ralf" border="0" width="120" height="120" />
  </div>

  <div id="head_pic2">
   <img src="img/Katja360x360.jpg" alt="Katja" border="0" width="120" height="120" />
  </div>

  <div id="head_pic3">
   <img src="img/Page360x360.jpg" alt="Page" border="0" width="120" height="120" />
  </div>

  <div id="head_pic4">
   <img src="img/Pimpsi120x120.jpg" alt="Pimpsi" border="0" width="120" height="120" />
  </div>

  <div id="head_pic5">
   <img src="img/Leon360x360.jpg" alt="Leon" border="0" width="120" height="120" />
  </div>

  <div id="head_pic6">
   <img src="img/Jonas360x360.jpg" alt="Jonas" border="0" width="120" height="120" />
  </div>

  <div id="head_pic7">
   <img src="img/Maray360x360.jpg" alt="Maray" border="0" width="120" height="120" />
  </div>

  <div id="head_pic8">
   <img src="img/Ponys120x120.jpg" alt="Bonito & Maya" border="0" width="120" height="120" />
  </div>

  <!-- Textlogo im Header -->
  <div id="tlogo">Familie Schepp</div>

  <!-- Menu links -->
  <div id="menuleft"></div>

  <!--<div id="bhome">
   <div class="menubutton1">
    <a href="index.html">Startseite</a>
   </div>
  </div> -->

  <!-- Versuch -->
  <ul id="navleft">
    <li><a href="index.html" id="bhome">Startseite</a></li>
    <li><a href="index.html" id="bbla">2. Seite</a></li>
  </ul>


  <!-- Menu oben -->
  <div id="menutop"></div>

 </body>
</html>

Code:

/*------------ Menu oben ------------*/
#menutop
{
        /*Box- Definition*/
        position: fixed;
        left:           50%;
        margin-left: -600px;
        top:          230px;
        width:       1200px;
        height:        30px;

        /*Farb- Definintion*/
        /* Alte Browser: */
        background: #fcfff4;

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 30%, #5a5a5a 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#fcfff4), color-stop(30%,#dfe5d7), color-stop(100%,#5a5a5a));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* W3C: */
        background: linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#5a5a5a',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     7px;
        -moz-border-radius-topright:    7px;
        -moz-border-radius-bottomright: 7px;
        -moz-border-radius-bottomleft:  7px;
        -webkit-border-radius: 8px 8px 8px 8px;
        border-radius:         8px 8px 8px 8px;

        /*Schatten- Definintion*/
        -webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;
        }

/*------------ Menu links -----------*/
#menuleft
       {
        /*Box- Definition*/
        position: fixed;
        left:           50%;
        margin-left: -600px;
        top:          280px;
        width:        200px;
        height:       400px;
        z-index: 2;

        /*Farb- Definintion*/
        /* Alte Browser: */
        background: #fcfff4;

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 30%, #5a5a5a 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#fcfff4), color-stop(30%,#dfe5d7), color-stop(100%,#5a5a5a));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* W3C: */
        background: linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#5a5a5a',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     14px;
        -moz-border-radius-topright:    14px;
        -moz-border-radius-bottomright: 14px;
        -moz-border-radius-bottomleft:  14px;
        -webkit-border-radius: 16px 16px 16px 16px;
        border-radius:         16px 16px 16px 16px;

        /*Schatten- Definintion*/
        -webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;
        }
        /*------------ Menubuttons-----------*/

        /*Menubutton1 - Standardansicht*/
.menubutton1
        {
        /*Box- Definition*/
        width:        180px;
        height:        25px;
        /*Farb- Definintion*/
        /* Alte Browser: */
        background: #fcfff4;

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 30%, #5a5a5a 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#fcfff4), color-stop(30%,#dfe5d7), color-stop(100%,#5a5a5a));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* W3C: */
        background: linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#5a5a5a',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     5px;
        -moz-border-radius-topright:    5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft:  5px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border-radius:         6px 6px 6px 6px;

        /*Schatten- Definintion*/
        -webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;
        }

        /*Menubutton2 - Hoveransicht*/
.menubutton2
        {
        /*Box- Definition*/
        width:        180px;
        height:        25px;
        /*Farb- Definintion*/
        /* Alte Browser: */
        background: #5a5a5a;

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #5a5a5a 0%, #dfe5d7 70%, #fcfff4 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#5a5a5a), color-stop(70%,#dfe5d7), color-stop(100%,#fcfff4));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* W3C: */
        background: linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#fcfff4',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     5px;
        -moz-border-radius-topright:    5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft:  5px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border-radius:         6px 6px 6px 6px;

        /*Schatten- Definintion*/
        /*-webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;  */
        }

        /*Position Home-Button*/
#bhome
        {
        position: fixed;
        left:           50%;
        margin-left: -590px;
        top:          330px;
        width:        180px;
        height:        30px;
        z-index: 3;


        font-family:'Comic Sans MS';
        src:local('Comic Sans MS') url(fonts/comic.ttf) format(TrueType);
        font-size:10pt,12pt,14pt,16pt,18pt,20pt,24pt;
        text-align: center;
        }

                /*Position 2.Button*/
#bbla
        {
        position: fixed;
        left:           50%;
        margin-left: -590px;
        top:          365px;
        width:        180px;
        height:        30px;
        z-index: 3;


        font-family:'Comic Sans MS';
        src:local('Comic Sans MS') url(fonts/comic.ttf) format(TrueType);
        font-size:10pt,12pt,14pt,16pt,18pt,20pt,24pt;
        text-align: center;
        }

        /*Navigation Menu links*/
ul #navleft
        {

        list-style: none;
        position: relative;
        z-index: 3;
        }

ul #navleft a
        {
        text-decoration: none;
        display: block
        position: relative; //oder absolute
        width: 100px;
        height: 30px;
        z-index: 4;
        /*ALte Browser*/
        background: #5a5a5a; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOut"

        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 30%, #5a5a5a 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#fcfff4), color-stop(30%,#dfe5d7), color-stop(100%,#5a5a5a));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* W3C: */
        background: linear-gradient(top,  #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#5a5a5a',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     5px;
        -moz-border-radius-topright:    5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft:  5px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border-radius:         6px 6px 6px 6px;

        /*Schatten- Definintion*/
        -webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;

        }

ul #navleft a:hover
        {
        z-index: 4;
        /*Alte Browser*/
        background: #fcfff4;  //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOver"
        /* FireFox 3.6+: */
        background: -moz-linear-gradient(top,  #5a5a5a 0%, #dfe5d7 70%, #fcfff4 100%);

        /* Chrome,Safari4+: */
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#5a5a5a), color-stop(70%,#dfe5d7), color-stop(100%,#fcfff4));

        /* Chrome10+,Safari5.1+: */
        background: -webkit-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* Opera 11.10+: */
        background: -o-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* IE10+: */
        background: -ms-linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* W3C: */
        background: linear-gradient(top,  #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);

        /* IE6-9: */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#fcfff4',GradientType=0 );


        /*Radien- Definition*/
        -moz-border-radius-topleft:     5px;
        -moz-border-radius-topright:    5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft:  5px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border-radius:         6px 6px 6px 6px;

        /*Schatten- Definintion*/
        /*-webkit-box-shadow:  2px 2px 2px 2px #666;
        -moz-box-shadow:     2px 2px 2px 2px #666;
         box-shadow:         2px 2px 2px 2px #666;  */

        }

/*ul #navleft a .menubutton1
        {
        left: 0px;
        top:  0px;
        }

ul #navleft a .menubutton2
        {
        left: 0px;
        top:  0px;
        } */

...ich bin mitten im basteln, soll heissen die KLassen für die Buttons sind noch genauso drin, wie gerade die unteren beiden ul #navleft a .menubutton.....- definitionen auskommentiert sind.....

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

background: url(.menubutton1);

Sowas kann gar nicht gehen.. als Hintergrund musst du entweder ein Bild per url() oder einen gradient oder ne Farbe einbiunden.. Du kannst keine Klasse oder ID als Hintergrundbild einbinden.

Kleinen Moment, ich bastel dir mal eben schnell ein live-beispiel, damit dus verstehst

manfred_hst · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

hallo ralf,
Du musst in der url() den genauen pfad zu deinen buttons eintragen,z.B.
url(../images/menubutton1.jpg), also der ort, wo deine buttons gespeichert sind (bei mir ist das immer der ordner images, bei dir kann er ganz anders heissen) und der genaue Dateiname. die vorangestellten punkte und der slash weisen darauf hin, daß der ordner eine ebene höher liegt, falls das so nicht geht einfach punkte und slash löschen und ein wenig probieren.
gruß
Manfred

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Bitteschön: http://dabblet.com/gist/2720454

@manfred: Hast du eigentlich gemerkt, dass es dem TE gar nicht um die Einbindung des Hintergundes als Bild geht? Er möchte das ganze Mit CSS machen..

Ranger1281 · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

Hallo Simonpicos,
soweit bin ich ja schon, den CSS- Code habe ich bereits so eingebunden. Der Code selbst stammt von http://www.colorzilla.com/gradient-editor/, welcher hier in der Linkliste, bzw. vom CSS3- Generator aus verlinkt ist.

Dieser Code hat mir die ganzen Browserversionen mitgegeben. Alle Farbverläufe auf der Site sind hiermit erstellt worden und funktionieren auch.

Mittlerweile habe ich ja den Vorschlag von ADcosmos aufgegriffen, welcher soweit auch funktioniert, nur eben die Farbverläufe (Buttons) werden nicht dargestellt.

btw: Mein Browser ist der Firefox 12.0.

Ich habe den Stand der Dinge gerade mal hochgeladen:

manfred_hst · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

dann guck dir mal dein Beispiel im IE9 oder im safari an.

simonpicos · 17.05.2012

AW: Linkbuttons via CSS3 definieren und einbinden

dann guck dir mal dein Beispiel im IE9 oder im safari an.

Auch da wirds nicht funktionieren.. *kopfschüttel*

Das Problem ist, dass du deinen Links gar nicht die Klasse .menubutton zugewiesen hast..

Das müsste dann so aussehen:

HTML:

<ul id="navleft">
    <li><a href="index.html" id="bhome" class="menubutton1">Startseite</a></li>
    <li><a href="index.html" id="bbla" class="menubutton1">2. Seite</a></li>
  </ul>