mein css buttonscript (bitte anschauen) - Paules-PC-Forum.de

Chrk · 19.12.2006, 19:33

Moin

hab vollgendes problem

und zwar sollen die Buttons sich als Hover verändern (nicht die schrift)
also die schrift auch nur das ganze soll halt als button fungieren und nicht durch die schrift aktiviert werden

ich Poste mal mein script, hoffentlich kann mir wer sagen was da falsch ist

danke

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
content="text/css; charset=ISO-8859-1" http-equiv="content-type"><title>Button
Test</title><style type="text/css">
li {
margin: 2px
padding: 2px
}
.Menue {
border-left: 5px solid #ff6600;
background-color: #cccccc;
width: 100px;
position: absolute;
padding-left: 20px;
}
#Button1 {
border-style: ridge ridge ridge solid;
border-width: 1px 1px 1px 5px;
border-left: 5px solid #ffff00;
border-right: 1px ridge #ff6600;
border-bottom: 1px ridge #990000;
background-color: #33ccff;
font-size: 12px;
text-align: left;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
}
#button1 a {
border-left: 3px double #ff6600;
border-right: 3px double #ff6600;
font-family: Avery Deluxe;
background-color: #33ccff;
}
#button1 a:hover {
border-left: 3px double #ff6600;
border-right: 3px double #ff6600;
width: 100px;
font-family: Avery Deluxe;
background-color: #3366ff;
}
</style></head>
<body>
<ul><div class="Menue"><li
id="Button1">Button1
<li id="Button1">Button2
<li id="Button1">Button3
<li id="Button1">Button4</div>[/list]</body></html>

Zwirni · 19.12.2006, 21:31

Und wo ist der Link? Wieso nutzt du mehrmals eine ID? Eine ID darf nur 1 Mal genutzt werden - verwende in diesem Fall "class"!

Würde btw. es so machen (ungetestet, nur Andeutung)

Code:

.button1 a { display: block; width: 100%;background-color: #33ccff;  }
.button1 a { background-color: #3366ff; }

Also den Link auf die gesamte Breite des li-Listenpunktes verbreitern und bei diesem die Hintergrundfarbe ändern bei Mouseover. So wird es als würde der Listenpunkt sich ändern, ist aber eigentlich der Link.

Chrk · 20.12.2006, 13:51

ok hab jezt classes verteielt
und es mal hochgeladen,
hier also ein link:

http://www.gwebspace.de/chrks-productions/EpN.html

Zwirni · 20.12.2006, 21:50

Und wo sind die Links

Chrk · 21.12.2006, 15:28

ja genau

also es geht mir um keinen Link
mir gehts nur um einen Hover effekt auf den Button (nich auf die schrift)
da wollt ich a bissl Hilfe ausm Forum hamn

danke sehr

Zwirni · 21.12.2006, 21:25

Diesen hover-Effekt bekommst du aber nur mit einem Link hin. Der Internet Explorer unterstützt keinen Hover-Effekt bei[*] - nur bei <a>! Firefox könnte es aber. Aber bringt ja wenig wenn man sowas beschränkt

Also setz den Link rein, hast schließlich schon das CSS dazu

25.01.2007, 09:14

Und dann kannst du ja auch noch sagen, dass die Links nicht unterstrichen sein sollen, dass sie immer schwarz sind usw. so sieht es dann so aus, als ob du einen Button hättest! ^^

19.12.2006, 19:33	#1 (Direktlink)
Chrk Stammuser Registriert seit: 24.03.2003 Ort: Finowfurt Beiträge: 378	mein css buttonscript (bitte anschauen) Moin hab vollgendes problem und zwar sollen die Buttons sich als Hover verändern (nicht die schrift) also die schrift auch nur das ganze soll halt als button fungieren und nicht durch die schrift aktiviert werden ich Poste mal mein script, hoffentlich kann mir wer sagen was da falsch ist danke <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/css; charset=ISO-8859-1" http-equiv="content-type"><title>Button Test</title><style type="text/css"> li { margin: 2px padding: 2px } .Menue { border-left: 5px solid #ff6600; background-color: #cccccc; width: 100px; position: absolute; padding-left: 20px; } #Button1 { border-style: ridge ridge ridge solid; border-width: 1px 1px 1px 5px; border-left: 5px solid #ffff00; border-right: 1px ridge #ff6600; border-bottom: 1px ridge #990000; background-color: #33ccff; font-size: 12px; text-align: left; font-family: Arial,Helvetica,sans-serif; font-weight: bold; } #button1 a { border-left: 3px double #ff6600; border-right: 3px double #ff6600; font-family: Avery Deluxe; background-color: #33ccff; } #button1 a:hover { border-left: 3px double #ff6600; border-right: 3px double #ff6600; width: 100px; font-family: Avery Deluxe; background-color: #3366ff; } </style></head> <body> <ul><div class="Menue"><li id="Button1">Button1 <li id="Button1">Button2 <li id="Button1">Button3 <li id="Button1">Button4</div>[/list]</body></html> __________________ http://www.chrks-productions-online.de.vu

19.12.2006, 21:31	#2 (Direktlink)
Zwirni Dauergast Registriert seit: 04.07.2004 Ort: Leipzig Beiträge: 1.085	Und wo ist der Link? Wieso nutzt du mehrmals eine ID? Eine ID darf nur 1 Mal genutzt werden - verwende in diesem Fall "class"! Würde btw. es so machen (ungetestet, nur Andeutung) Code: .button1 a { display: block; width: 100%;background-color: #33ccff; } .button1 a { background-color: #3366ff; } Also den Link auf die gesamte Breite des li-Listenpunktes verbreitern und bei diesem die Hintergrundfarbe ändern bei Mouseover. So wird es als würde der Listenpunkt sich ändern, ist aber eigentlich der Link.

20.12.2006, 13:51	#3 (Direktlink)
Chrk Stammuser Registriert seit: 24.03.2003 Ort: Finowfurt Beiträge: 378	ok hab jezt classes verteielt und es mal hochgeladen, hier also ein link: http://www.gwebspace.de/chrks-productions/EpN.html __________________ http://www.chrks-productions-online.de.vu

21.12.2006, 15:28	#5 (Direktlink)
Chrk Stammuser Registriert seit: 24.03.2003 Ort: Finowfurt Beiträge: 378	ja genau also es geht mir um keinen Link mir gehts nur um einen Hover effekt auf den Button (nich auf die schrift) da wollt ich a bissl Hilfe ausm Forum hamn danke sehr __________________ http://www.chrks-productions-online.de.vu

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

20.12.2006, 21:50	#4 (Direktlink)
Zwirni Dauergast Registriert seit: 04.07.2004 Ort: Leipzig Beiträge: 1.085	Und wo sind die Links

21.12.2006, 21:25	#6 (Direktlink)
Zwirni Dauergast Registriert seit: 04.07.2004 Ort: Leipzig Beiträge: 1.085	Diesen hover-Effekt bekommst du aber nur mit einem Link hin. Der Internet Explorer unterstützt keinen Hover-Effekt bei[*] - nur bei <a>! Firefox könnte es aber. Aber bringt ja wenig wenn man sowas beschränkt Also setz den Link rein, hast schließlich schon das CSS dazu

25.01.2007, 09:14	#7 (Direktlink)
Megger Gast Beiträge: n/a	Und dann kannst du ja auch noch sagen, dass die Links nicht unterstrichen sein sollen, dass sie immer schwarz sind usw. so sieht es dann so aus, als ob du einen Button hättest! ^^