Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Mouseover Button mit CSS funzt nicht :(“

J000S

Noch nicht viel geschrieben

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:
 

afr0kalypse

Allwissendes Karmameerschweinchen!

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

undefined

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.
 
Zuletzt bearbeitet:

terrapack

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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

undefined

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
smile.gif
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 ;)
 
Zuletzt bearbeitet:

J000S

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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 ;(
 
Zuletzt bearbeitet:

cebito

undefined

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.
 

sokie

Mod | Web

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 ;(
dafür nimmst du dein Bildbearbeitungsprogramm und bereitest deine Buttongrafiken so vor, dass die Grösse stimmt.
 

J000S

Noch nicht viel geschrieben

AW: Mouseover Button mit CSS funzt nicht :(

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

Mod | Web

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

J000S

Noch nicht viel geschrieben

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

Hat es drauf

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

Mod | Web

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 :(
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.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben