Linkbuttons via CSS3 definieren und einbinden

[manfred_hst]

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]

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]

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:
http://www.ralfschepp.de/css3/index.html

[manfred_hst]

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

[simonpicos]

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:

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

[Ranger1281]

ist das denn noch nötig??

Ich habe den CSS-Code von ADcosmos übernommen und bei mir angepasst.
In diesen Code habe ich die gradients eingebunden.

Versteh mich bitte nicht falsch, das wirklich ernstgemeinte Fragen.
Ich habe das so verstanden, dass ich den Code einbinde und unter "background" die gradients einbinde.
Jeweils 1x für die Standardansicht und 1x für der Hovereffekt.

Damit sind meine angelegten Klassen ".menubutton1" und ".menubutton2" doch eigentlich überflüssig. Die sind nur noch im Code, da ich zur Zeit ja noch rumbastel und deshalb nicht alles sofort lösche. Solange die Klassen vom HTML-Code nicht angesprochen werden, stören die ja nicht.... oder liege ich da falsch?

Also zum Verständnis:

das ist der relevante Bereich meiner "menu.css"

#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  //das habe ich nur zum testen auskommentiert
        {
        left: 0px;
        top:  0px;
        }

ul #navleft a .menubutton2
        {
        left: 0px;
        top:  0px;
        } */     // bis hierher -- mit diesen definitionen hat es auch nicht geklappt...

und dies der betrefende HTML- Code:

 <div id="menuleft"></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>

#menuleft definiert die große Box des Menuhintergrundes
auf dieser erscheinen die Linkeinträge, die ab "ul" angesprochen werden.
#bhome positioniert den Eintrag "Starseite"
#bbla positioniert den Eintrag "2. Seite"
#navleft ist der von ADcosmos übernommene, angepasste CSS-Code.

Oder ist das jetzt alles zu viel für einen Oldie wie mich und ich habe schon ein Brett vorm Kopf??

Edit: Wenn ich die "Class="menubutton1" einbinde, erscheint zwar der Button, jedoch ohne den Hovereffekt (ausser dem Text, der funzt ja beim hovern...)

Ach so, der Effekt soll den Farbverlauf invertieren, also Dunkel oben und Hell unten, sowie den Schatten entfernen...

[simonpicos]

Hmm, wollt ich dich grad mal bitten, es nur mal testweise mit den Klassen zu versuchen..

Der hover-effekt funzt da warscheinlich nicht, weil du noch kein hover für die class erstellt hast

Ich sehe grad auch den Fehler noch nicht, lass es am besten dann erst mal mit den Klassen, hat ja keine Nachteile..

Ich schau aber nochmal drüber, vlt finde ich den Fehler ja

edit: Also ich hab schonmal einen Fehler gefunden:

ul #navleft a

lösch mal das leerzeichen nach dem "ul" raus.. weil die #navleft ist ja kein kind von der ul.. die ul heißt navleft

probier mal obs jetzt geht

[Ranger1281]

Edit:
Das war auf jeden Fall schon mal ein kleiner Schritt in die richtige Richtung!
Ich habe jetzt einen Hover, wenn auch nur mit den Grundfarben für die "alten Browser", also ohne Farbverlauf, sondern mit einem Wechsel zwischen dunkel und Hell.
----------
Aber für heute ist es erstmal genug, vieleicht sehe ich morgen was da falsch ist.

Für heute war es auf jeden Fall sehr lehrreich für mich und ich möchte mich bei Euch allen für Eure rege Unterstützung bedanken.

Und wenn ich mal ein paar Tage nicht reagieren sollte, ist dies kein Desinteresse, sondern mein Job als Servicemonteur...

Vielen Dank nochmal, ich bleibe am Ball!!

[simonpicos]

nur, dass dus nicht übersiehst: hast du meinen tipp im edit des letzt posts ausprobiert?

[Ranger1281]

Zitat von simonpicos

nur, dass dus nicht übersiehst: hast du meinen tipp im edit des letzt posts ausprobiert?

Jepp, hab ich, siehe mein Edit....

Edit:
Einen Hinweis hab ich noch:
Im Safari funktioniert es jetzt! Also liegt es an den Browserspezifischen definitionen. Da greife ich morgen an...

[ADcosmos]

Hi,

Lösche die Kommentare, die mit // beginnen (bzw. ersetze diese durch /* Kommentar */
Safari scheint darüber zu gehen, Firefox nicht.

MFg ADcosmos

[Myhar]

Dann verhält sich Safari aber nicht standardkonform. Im CSS sind nur Kommentare mti dem Aufbau /* .... */ gültig.
Das Löschen/Ersetzen der Kommentare, welche mit // beginnen, sollte also eine Lösung sein.

[Ranger1281]

Sooo, Hallo alle zusammen,

Er waren offensichtlich die Kommentarzeilen an meinem oder mittlerweile unserem Problem beteiligt. Nach ich die "//" entfernt, bzw. gegen "/* blabla*/" getauscht habe, werden meine Farbverläufe angezeigt und invertieren auch brav beim hovern...

Das ist so schon mal super!!

Was mir jetzt noch fehlt, ist der Effekt, dass beim hovern auch der Schatten verschwindet. Um dies zu erreichen, hatte ich die Schattendefinition beim "gehoverten" Farbverlaub entfernt.

Ich habe auch mittlerweile den CSS- Code aufgeräumt und alles überflüssige vom Experimentieren entfernt. Dazu gehören auch die, mittlerweile überflüssigen, Klassendefinitionen für die Farbverläufe.

Auch im HTML- Code werden diese Klassen nicht mehr angesprochen.

Trotzdem werden die Schatten beim hovern weiterhin angezeigt.
Ich teste zur Zeit mit Safari und Firefox, jeweils die aktuellste Version...
Der IE9 zickt rum und zeigt mir zur Zeit gar nichts an, soll heißen, wirklich nur eine weiße Seite... Da finde ich auch noch den Grund. Noch ist die Site ja nicht offiziell online....

Zurück zu den Schatten...

also als nächstes werde ich, direkt nach diesem Posting, erstmal die aktuelle Version hochladen, damit alle den aktuellen Stand sehen können...

Edit:
Der IE9 zeigt doch etwas an...
eine total falsch positionierte Site. Ich denke, ich werde die "festen" Elemente mal komplett "fixed" positionieren, dann sehen wir weiter...

[simonpicos]

Setz mal bei hover den box-shadow auf none.. Dann sollte es funktionieren.

[Ranger1281]

Zitat von simonpicos

Setz mal bei hover den box-shadow auf none.. Dann sollte es funktionieren.

Yiiihaa!!

Das war's!!!!
Auch nicht schlecht, keinen Schatten definieren hilft nicht, Schatten definieren und sagen KEINEN SCHATTEN geht... versteh mir einer die Browser...

Das Update der Site ist gleich im Netz...

Edit:
Neue Info zu IE9...
Er kann den HTML5 doctype nicht!!!
Nachdem ich folgendes eingefügt habe, gings, naja, mehr oder weniger...
zumindest wird eine lesbare Site angezeigt....

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">