Mouseover Button mit CSS funzt nicht :(

J000S · 09.05.2011

Hallo alle zusammen...

habe versucht selber (nur so zum Spaß) eine Navigationsleiste zu erstellen, mit SCHÖNEN Buttons.
Eine einfache Lösung hatte ich schnell zusammen:

HTML:

<table border="0" cellpadding="1" cellspacing="0">
    <tr>
        <td><a href="index.html"><input type="image" src="buttons/home_on.png" width="150" height="50" alt="Button"></a></td>
        <td><a href="#"><input type="image" src="buttons/page2_off.png" width="150" height="50" alt="Button" onmouseover=""></a></td>
    </tr>

(jaja ich weiß ist mit ner Tabelle. Ist aber einfach

)

Das Problem ist jetzt: Ich möchte gerne, dass die Buttons sich verändern, wenn man mit der Maus drüber fährt oder drauf klickt. In den o.g. <input...> Teil einfach "onmouseover" reinzunehmen, hab ich nicht hinbekommen (wenn es damit überhaupt gehen sollte ^^)
Also habe ich folgendes probiert:

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button Testseite</title>
<link type="text/css" href="style.css" />
</head>

<body>
    <div class="home">
        <a class="home" href="#">Home</a>
    </div>
</body>
</html>

und das passende CSS:

HTML:

@charset "utf-8";
/* CSS Document */

a.home { background-image:url(buttons/home_on.png); display:block; }
a.home:hover { background-image: url(buttons/home_on_over.png); }
a.home:link { background-image:url(buttons/home_on.png); }
a.home:visited { background-image:url(buttons/home_on.png); }
a.home:active { background-image:url(buttons/home_klick.png); }

ich muss zugeben, ich hab mir das zusammen geguttenbergt

aber auf selfhtml scheint es ja zu funktionieren. Warum also nicht bei mir? :'(Ich sehe immer nur ein blaues, unterstrichendes "Home" :schmoll:

magicsepp · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

.home a:hover .....

J000S · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

ändert leider nichts...

afr0kalypse · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

- ist deine style.css im gleichen ordner wie die html datei?
- sind die bilder auch wirklich im unterverzeichnis buttons?
- sind alle namen der dateien die du benutzt richtig geschrieben?
- sind die berechtigungen für die unterverzeichnisse so gesetzt, dass man die dateien darin auch aufrufen kann? (wenn du das lokal testest sollte es egal sein...)
generell schreibt man erst die klasse und dann den link im css

also
home a { foo=bla; }
home a:hover { foo=blub; }

cebito · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

Stimmen denn die Pfade? Schreib mal ne Anweisung für bspw. color oder border oder was weiß ich rein, wenn diese Styles dann angezeigt werden, stimmen die Pfade zu den Bilddateien nicht.

... und mach deine Navi mit ner unordered List (ul)

Edith - ach ja... http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.

terrapack · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

Lass mal die Zeile

HTML:

a.home:link { background-image:url(buttons/home_on.png); }

weg, dann funzts ;-)

J000S · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

mein CSS Moped sieht jetzt so aus:

HTML:

@charset "utf-8";
/* CSS Document */

home a{ display:block; }
home a:hover { background-image: url(buttons/home_on_over.png); width:150px; height:50px; }
home a:visited { background-image:url(buttons/home_on.png); width:150px; height:50px; }
home a:active { background-image:url(buttons/home_klick.png);width:150px; height:50px; }

aber es klappt trotzdem nicht ;( Pfade stimmen 100%ig.

cebito · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

Lies dir mal die Grundlagen durch, eine Klasse wird mit einem "." angesprochen. So, wie es jetzt dort steht, wird es auch nur funktionieren, weil der umgebende div auch die Klasse hat. Da kannst die Klasse für a auch gleich weglassen.

CSS 4 You - The Finest in Stylesheets da kannste mal reinschauen.

@afr0calypse

generell schreibt man erst die klasse und dann den link im css

HTML:

<!doctype html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
<style>
a.home{color:red;}
/* .home a{color:red;} */
</style>
</head>

<body>
<ul class="home"><li><a href="#" class="home">home</a></li><li><a href="#">home</a></li></ul>
</body>
</html>

Schau es dir an, dann aktiviere das zweite Style und kommentiere das erste aus - welchen Unterschied siehst du? Alles eine Selektorfrage

J000S · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

Ah ok. Hab mir die Seite und das von dir nochmal angeschaut... Das mit dem .home oder a.home habe ich jetzt verstanden.

Bei mir läuft es jetzt auch... naja so halb auf jeden Fall.

HTML:

a.home {
 background-position: right;
 background-image:url(buttons/home_on.png);
 background-repeat:no-repeat;
 padding-right:150px;
 padding-left:50px;
}

Der Button ist im Original 1500x500px. Ich will ihn aber mit nur 150x50px anzeigen. Also 10%. Aber alles was ich versuche, verursacht entweder, dass der Button wieder verschwindet, oder, dass es nicht das Bild in 10% Größe ist...
padding scheint schonmal der falsche Ansatz zu sein. Background-Size auch

J000S · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

nein jeder Link muss eine andere Grafik haben...

EDIT:

da mit dem Background-Image geht. Aber da kommt auch nicht der Button in der gewünschten Größe ;(

cebito · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

Ääääh Kinners, wenn ihr schon helfen wollt, dann bitte richtig, hab diese Posts mit den mal eben so dahingeschluderten "so müsste es gehen" - Codes mal gelöscht, bevor hier noch einer versucht das nachzubauen und dann noch seitenlang weiter diskutiert wird, warum was nicht funktioniert.

J000S · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

OK jetzt bin ich mal richtig verwirrt <_<

sokie · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

J000S schrieb:
nein jeder Link muss eine andere Grafik haben...

EDIT:

da mit dem Background-Image geht. Aber da kommt auch nicht der Button in der gewünschten Größe ;(

dafür nimmst du dein Bildbearbeitungsprogramm und bereitest deine Buttongrafiken so vor, dass die Grösse stimmt.

J000S · 09.05.2011

AW: Mouseover Button mit CSS funzt nicht

ja schön wärs. Das Bild ist so Groß wie der Text. Da bringt mir das verkleinern reichlich wenig.
Dann wäre noch das Problem:
Wenn der Text weg ist, ist ja auch keine Hintergrundgrafik da. Aber der Button sieht so aus:

sokie · 10.05.2011

AW: Mouseover Button mit CSS funzt nicht

verstehe ich ganz und gar nicht. egal ob in dr Buttongrafik nun ein Text ist oder nicht - verkleinern lässt sich das doch mit einem Bildbearbeitungsprogramm (ich wüsste keinen Anwendungszweck, wo man einen 1500px breiten Button bräuchte...)

cebito · 10.05.2011

AW: Mouseover Button mit CSS funzt nicht

sokie schrieb:
(ich wüsste keinen Anwendungszweck, wo man einen 1500px breiten Button bräuchte...)

Auf einer "Enter"-Seite?! Ich versteh hier auch nur noch Bahnhof :rolleyes:

Keine Ahnung, wo das wirkliche Problem liegt, oder was der TE uns hier mitteilen/fragen will.

J000S · 11.05.2011

AW: Mouseover Button mit CSS funzt nicht

Das Problem: Egal wie groß der Button ist; ob 1500x500px, 150x50px oder sonstwas, in der Größe, wie ich den Button gespeichert habe, sehe ich ihn nicht

Er ist nur so groß wie der Text darüber...

Myhar · 11.05.2011

AW: Mouseover Button mit CSS funzt nicht

Das ist so, weil sich das Element dem Inhalt anpasst, also es nur so groß ist wie der Bereich, den der Text einnimmt + die definierten Abstände. Das Hintergrundbild füllt den Bereich so weit es geht aus, der überstehende Bereich ist nicht sichtbar. Möchtest du die Größe ändern, dann schau dir die css-Befehle / an (vielleicht in Verbindung mit )

Ich hoffe ich habe dein Problem richtig verstanden

sokie · 12.05.2011

AW: Mouseover Button mit CSS funzt nicht

J000S schrieb:
Ah ok. Hab mir die Seite und das von dir nochmal angeschaut... Das mit dem .home oder a.home habe ich jetzt verstanden.

Bei mir läuft es jetzt auch... naja so halb auf jeden Fall.

HTML:

a.home { background-position: right; background-image:url(buttons/home_on.png); background-repeat:no-repeat; padding-right:150px; padding-left:50px; }

Der Button ist im Original 1500x500px. Ich will ihn aber mit nur 150x50px anzeigen. Also 10%. Aber alles was ich versuche, verursacht entweder, dass der Button wieder verschwindet, oder, dass es nicht das Bild in 10% Größe ist...
padding scheint schonmal der falsche Ansatz zu sein. Background-Size auch

padding ist natürlich nicht der geeignete Ansatz um dem <a> - Element eine höhe und Breite zu geben; statt padding wären height und width die richtigen eigenschaften. um height und width auf ein <a> anzuwenden, muss dieses Element als block dargestellt werden (display: block).

Code:

[kontext!] a{
  display: block;
  width: 150px;
  height: 50px;
}
[kontext!] a.home{
  background: url(hintergrund_fuer_home.png) right top no-repeat;
}

für die Grösse der Hintergrundgrafiken ist die Bildbearbeitung nötig.

[kontext!]: für die notierung im css bei solchen formatierungen wichtig, dass man die Auswahl der <a> Element deutlich einschränkt, damit nicht alle <a> - elemente der Seite so formatiert werden.