Problem mit Link-Button

[blizzart88]

Guten abend allerseits,

ich soll einem Kumpel einen Button auf eine Internetseite setzen, der auf ein pdf-File verlinkt. Soweit so gut. Nur gelingt mir das ganze nur, wenn ich das Image des Button in den a-Tag schreibe, also der Link ein Image ist. Gibt es da eine CSS-Lösung, da ich noch ein hover-Image habe, das geladen werden soll.

Ich habe zwar schon ein wenig rumprobiert und gegoogled, aber nichts brauchbares zu Tage gebracht.

Vielleicht kann mir hier jemand helfen.

Link der aktuellen Lösung: http://www.krausgmbh.eu/pages/videotechnik/index2.php

Meine vermurksten Versuche: http://www.krausgmbh.eu/pages/videotechnik/index1.php

und meine missglückten CSS-Versuche:

a.buttonflyer    {width: 304px;
                height: 154px;
                background-image:url(../../images/buttonflyer.png);
                line-height: 154px;
                text-indent: -9999px;}
                
a.buttonflyer:hover    {width: 304px;
                    height: 154px;
                    background-image:url(../../images/buttonflyer-hover.png);
                    line-height: 154px;
                    text-indent: -9999px;}
                     
#buttonflyer li {float: left;}  
               
#buttonflyer     {margin-left: 50%;
                 padding: 0;
                 list-style-type: none;
                }              
                
#buttonflyer a.buttonflyer    {
                    width: 304x;
                    height: 154px;
                    display: block;
                    color: #fff;
                    background-image: url(../../images/buttonflyer.jpg);
                    background-color: #BA1414;
                    text-align: center;
                    line-height: 154px;
                    border: none;
                    text-indent: -9999px;
                    }
                                                                 

#buttonflyer a.buttonflyer:hover     {background-color: #33f;
                        background-image: url(../../images/buttonflyer-hover.jpg);}

Wäre schön, wenn mir jemand auf die Schnelle helfen könnte. Danke schonmal im Voraus!


PS: der konfuse Quellcode der Website mit DIV-Boxen im Tabellenlayout ist nicht von mir.

[simonpicos]

Ich verstehe das Problem nicht wirklich. Ich probiers einfach mal:

Du kannst deinen Button stylen wie du willst. Dann weist du ihm ein Hintergrundbild zu.
Für den hover-effekt änderst du dann das hintergrundbild in dein gewünschtes.

bla{
    background-image: bild.jpg;
}

bla:hover{
     background-image: bildhover.jpg;
}

Schicker wärs natürlich das ganze mit css sprites. Wenn du nicht weißt was das ist, kann ich das als kleine Lektüre empfehlen: http://css-tricks.com/css-sprites/

Und am allerschicksten wäre natürlich eine reine CSS-Variante, was bei dem button eigentlich gar kein Problem darstellen sollte. (Hierbei helfe ich besonders gerne )


Andere Frage: Ist das der Button, über dessen Vergütung hier diskutiert wurde?

[blizzart88]

Hi,
ja, eine reine CSS-Variante wäre natürlich am besten und auch das, was ich mit meinen Versuchen anstreben wollte. Es sollte allerdings CSS 2.1 sein, wenn möglich.

Und nein, es geht nicht um die Geschichte mit der Vergütung. Es handelt sich hier um einen Button, den ich für einen guten Fraund gemacht habe und einbetten soll.

[DerOtto]

Der Fehler liegt in der url zu deiner Button-Grafik. Lösche mal das doppelte ../
Dann müsste es auch wie gewollt funktionieren.

bla {
    background-image: url(../images/button.jpg);
}

bla:hover {
    background-image: url(../images/button_hover.jpg);
}

Wenn es noch etwas weniger Code sein darf schreib es um in:

bla {
    background: #ba1414 url(../images/button.jpg); 
}

bla:hover { 
    background: #33f url(../images/button_hover.jpg); 
}

Grüße Patrick

[blizzart88]

Hat sich erledigt. Ich habe jetzt mit diesem (http://www.ohne-css.gehts-gar.net/0022.php) Tutorial rumgetrickst und es funktioniert.

Ich bin natürlich gerne offen für bessere Lösungen.

[samtron]

wann du Zeit hast,guck mal rein
http://www.html-seminar.de/video-kurs-html-tutorial.htm
http://de.html.net/
MfG
Samtron

[simonpicos]

Zitat von samtron

wann du Zeit hast,guck mal rein
http://www.html-seminar.de/video-kurs-html-tutorial.htm
http://de.html.net/
MfG
Samtron

Ich glaube grundlegende kenntnisse sind dem te bekannt. Er fragte nach weiteren möglichkeiten den button umzusetzen, und nicht nach einem html lehrgang..

[samtron]

hi ich meinte damit css :-)

[simonpicos]

Zitat von samtron

hi ich meinte damit css :-)

Auch grundlegende CSS-kenntnisse dürften vorhanden sein, aber darum solls ja njetzt mal nicht gehen.

@blizzart88:
Ist deine jetzige Lösung die in der index2.html? Wie gesagt, sowas ließe sich auch relativ simpel mit css realisieren. Jedoch müsste man dann zum Beispiel für die abgerundeten Ecken auf CSS3-techniken zurückgreifen. Ob das dir/deinem Auftraggeber recht ist, müsst ihr entscheiden.

[DerOtto]

Zitat von simonpicos

die abgerundeten Ecken auf CSS3-techniken zurückgreifen.

Das war eines meiner persönliches Highlights bis jetzt. Klar ist das nur Kleinkram zu dem rest der mit CSS3 möglich ist, aber ich finde es so geil das ich nicht mehr unnötig Corner-Divs verschachteln muss Dann noch fein mit shadow zusammen basteln, herrlich.

Zurück zum Thema. Gestaltungen sollte eigentlich immer über CSS laufen, dafür ist CSS ja auch gedacht. Halt das formatieren / gestalten der eigentlichen Inhalte. Ich gehe in der Regel auch hin und schreibe erst alles fertig in HTML und arbeite dann mit CSS step-by-step das Layout aus.

Auch noch ein kleiner Tipp von mir. Bei der Namensvergabe von Klassen und ID nicht elend lange verwenden. Alles direkt von Anfang bis Ende überlegt aufbauen. Spart am Ende viel Zeit und Nerven wenn etwas nicht so klappt wie es soll. Auch das umschreiben geht leichter von der Hand.

Grüße Patrick