css background an falscher position - Paules-PC-Forum.de

25.08.2010, 18:53

heya hab grad folgenden code für nen feedbackbutton erstellt. Jedoch ist der background des buttons total verschobe und ich finden einfach nicht den fehler.

Code:

<html>
<head>
<title>feeback tst</title>
<style type="text/css">
.feedback{
margin-top: 300px;
margin-left: -10px;
height: 150px;
width: 46px;
}

.feedback a:link{background: url(http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png);}
.feedback a:visited{background: url(http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png);}
.feedback a:active{background: url(http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png);}
.feedback a:hover{background: url(http://www5.pic-upload.de/25.08.10/2dv6zb7zrsg.png);}
</style>

</head>
<body>
<div class="feedback"><a href="feedback.de"><img src="http://www5.pic-upload.de/25.08.10/cbkyl27dekft.png" border="0" alt="feedback"></a></div>
</body>
</html>

vielen dank für eure hilfe
olli

ruNN0r · 26.08.2010, 12:04

Ich würde es lieber mit Javascript machen als mit CCS. Also so:

HTML-Code:

<html>
<head>
<title>feeback tst</title>
<style type="text/css">
.feedback{
margin-top: 300px;
margin-left: -10px;
height: 150px;
width: 46px;
}
</style>

<script language='javascript'>
  function setimg(image){
    document.getElementById('img').src=image;
  }
</script>
</head>
<body>
<div class="feedback"><a href="feedback.de"><img id='img' onMouseOver="javascript: setimg('http://www5.pic-upload.de/25.08.10/2dv6zb7zrsg.png')" onMouseOut="javascript: setimg('http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png')" src="http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png" border="0" alt="feedback"></a></div>
</body>
</html>

Wenn du fragen hast frag einfach.

26.08.2010, 13:55

Danke, aber geht das nicht auch mit CSS? Ich versteh einfach nicht warum mein code weder im FF noch in Chrome oder Opera läuft. Im IE geht er übrgigens komischerweise.

26.08.2010, 16:56

Achso und dein code funzt bei mir leider auch nicht.

ruNN0r · 29.08.2010, 15:19

Alle Browser interpretieren CSS und HTML anders. im IE funktionieren die meisten sachen jedoch FF setzt es am besten um (finde ich) Chrome... naja sage ich nicht viel zu... aber diesen Browser würde ich schnell wieder Löschen! Also mit CSS habe ich es auch nicht hin bekommen (unter FF) aber habe es auch nicht groß probiert. Ich würde es mit Javascript machen damit hast du weniger Probleme denn fast alle Browser interpretieren es gut.

Um es dir mal zu zeigen:
empty-cells: Leere Tabellenzellen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Diese seite zeigt dir sehr viele CSS befehle und wo sie funktionieren... z.B. der gezeigt Befehl funktioniert nicht unter IE also musst man leere Zellen immer mit einer Leerschritt ausfüllen damit man sie sehen kann.

MarcusSch · 29.08.2010, 16:22

Hi,

per Javascript ist hier eigentlich nicht empfehlenswert.
CSS wurde genau für solche und natürlich auch anderes entwickelt.

Sehe ich es richtig das Du im Head-Bereich nur die 2 (title und style) hast?
Als kein Dokumententype keine language etc. eingetragen ist, also in etwa so.
<!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="de" lang="de">

scaexp · 29.08.2010, 21:36

füge mal ein "float:left" ein. Siehe folg. Code

.feedback a:link{
background: url (http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png);
float:left;
}

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE7: Position der Adressleiste verändern	Paule	c.) Browser	0	28.10.2008 01:03
Text an falscher Position - Wie ändern ??	Kuhmilchtrinker	Homepagegestaltung	10	25.11.2007 00:26
background	Jamie82	Homepagegestaltung	0	18.04.2007 22:21
zweites background bild	Scue	Homepagegestaltung	5	13.02.2007 21:22
swf als background	simon_dd	Homepagegestaltung	9	03.03.2006 16:00

26.08.2010, 13:55	#3 (Direktlink)
XY Un"registriert" Gast Beiträge: n/a	Danke, aber geht das nicht auch mit CSS? Ich versteh einfach nicht warum mein code weder im FF noch in Chrome oder Opera läuft. Im IE geht er übrgigens komischerweise.

26.08.2010, 16:56	#4 (Direktlink)
Unregistriert Gast Beiträge: n/a	Achso und dein code funzt bei mir leider auch nicht.

29.08.2010, 15:19	#5 (Direktlink)
ruNN0r Weiß worum´s geht Registriert seit: 30.07.2010 Ort: An der Nordseeküste... ^^ Beiträge: 132	Alle Browser interpretieren CSS und HTML anders. im IE funktionieren die meisten sachen jedoch FF setzt es am besten um (finde ich) Chrome... naja sage ich nicht viel zu... aber diesen Browser würde ich schnell wieder Löschen! Also mit CSS habe ich es auch nicht hin bekommen (unter FF) aber habe es auch nicht groß probiert. Ich würde es mit Javascript machen damit hast du weniger Probleme denn fast alle Browser interpretieren es gut. Um es dir mal zu zeigen: empty-cells: Leere Tabellenzellen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets Diese seite zeigt dir sehr viele CSS befehle und wo sie funktionieren... z.B. der gezeigt Befehl funktioniert nicht unter IE also musst man leere Zellen immer mit einer Leerschritt ausfüllen damit man sie sehen kann.

29.08.2010, 16:22	#6 (Direktlink)
MarcusSch gesperrt Registriert seit: 10.08.2010 Beiträge: 319	Hi, per Javascript ist hier eigentlich nicht empfehlenswert. CSS wurde genau für solche und natürlich auch anderes entwickelt. Sehe ich es richtig das Du im Head-Bereich nur die 2 (title und style) hast? Als kein Dokumententype keine language etc. eingetragen ist, also in etwa so. <!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="de" lang="de">

29.08.2010, 21:36	#7 (Direktlink)
scaexp Erfolgreich angemeldet Registriert seit: 02.04.2007 Beiträge: 2	füge mal ein "float:left" ein. Siehe folg. Code .feedback a:link{ background: url (http://www5.pic-upload.de/25.08.10/3qz93i829wtl.png); float:left; }