Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag04.07.2012 um 15:43 (UTC)    
Titel: hover buttons

huhu leute
wie ihr seht sind es eigl. 4 verschieden buttons die einzel auf meiner webseite auch funktionieren aber wenn ich alle 4 buttons auf einer web seite dann leider alle gleich ausehen

http://twardygrosz.de.tl/test.htm

was mache ich falsch
thx im vorraus

hier erstmal ein buttons:
Code:
<style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum1.jpg);
  width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum2.jpg);
  width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/Forum/index.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a>



alle 4 hover buttons funktionenen auch!!!!
aber wenn ich alle auf eine webseite stelle dann macht er alle buttons gleich:
wie kann das sein:

hier mal mein quellcode:
<div style="text-align: center">&nbsp;</div>
<table border="0" cellspacing="1" cellpadding="1" width="200" align="center">
<tbody>
<tr>
<td>
<div><span style="font-size: larger"><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/startseite1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/startseite2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/Herzlich-Willkommen.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></div>
</td>
<td>
<div><span style="font-size: larger"><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/sendeplan1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/sendeplan2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/WWR-Not-Sende-Plan.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></div>
</td>
<td>
<div><span style="font-size: larger"><span><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/wunschbox1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/wunschbox2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/WWR-Not-Wuschbox.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></span></div>
</td>
<td>
<div><span style="font-size: larger"><style type="text/css">
img.einbild {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum1.jpg);
width:399px;height:70px; }
img.einbild:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum2.jpg);
width:399px;height:70px; }</style><a target="_blank" href="http://twardygrosz.de.tl/Forum/index.htm"><img class="einbild" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span></div>
</td>
</tr>
</tbody>
</table>


Zuletzt bearbeitet von twardygrosz am 04.07.2012, 16:45, insgesamt einmal bearbeitet
Beitrag04.07.2012 um 15:49 (UTC)    
Titel:

Hey,

Du darfst eine "class" nicht mehrfach verwenden.
So ist immer die unterste (im code) am stärksten.

Das ganze sollte gelöst werden in dem du diese einfach verschieden nennst.
aslo:

img.einbild1
img.einbild2
img.einbild3
...

Und das machst dann auch bei "img.einbild1:hover"
und "<img class="einbild1" alt="Ein Bild"..."

Hoffe es ist so halbwegs verständlich beschrieben.

lg Solvee
Beitrag04.07.2012 um 15:54 (UTC)    
Titel:

thx dir

oh habs nicht wirklich verstanden. wenn ich 4 webseiten hab und mache jeden hover button auf eine webseite funktionieren die.

alles aber auf einer seite funktionieren leider nicht bzw die funktionen stimmen wie zb. links aber die bilder stimmen nicht. er setzt alle bilder dann gleich. das heißt ich hab 4 gleiche hoverbuttons

thx dir


Zuletzt bearbeitet von twardygrosz am 04.07.2012, 16:56, insgesamt 2-mal bearbeitet
Beitrag04.07.2012 um 16:25 (UTC)    
Titel:

Ja...

du benutzt die Klasse " img.einbild " auf einer Website mehrmals und dies geht nicht.!
Denn du musst dir vorstellen, der gesamte Quellcode wird vom Browser erst einmal durchgelesen und dann ausgegeben.
Bin mir da auch nicht so 100% sicher aber ich denke er sortiert dann quasi CSS und HTML Code. Dann wird der ganze CSS-Code der sich auf deiner Seite befindet aneinandergereiht.


Und bei dir wird dann 4mal
img.einbild {... }
img.einbild {... }
img.einbild {... }
img.einbild {... }

aneinander gehängt und wird erst einmal unabhängig vom HTML-Code gelesen. Und wie Soll der Browser nun wissen welches "img.einbild" zu
welchem Button gehört (?), wenn alle gleich heißen.

So verweist er eben allen das gleiche zu und zwar das welches weiter unten im Code steht. Also
img.einbild {...*wird Ignoriert* }
img.einbild {... *wird Ignoriert*}
img.einbild {...*wird Ignoriert* }
img.einbild {...*Dies hier wird auf alle übertragen* }



Deshalb musst du jede Klasse einen eigenen Namen geben und diesen der einzelnen Button zu ordnen.



So hoffe konnte dir dies nun noch einmal etwas verständlicher erklären.
Und deine "Verwirrungen" somit mildern.


Solvee


Zuletzt bearbeitet von solee am 04.07.2012, 17:27, insgesamt 2-mal bearbeitet
Beitrag04.07.2012 um 16:30 (UTC)    
Titel:

thx
kannst du mir vl auch zeigen wo ich welche sachen ändern muss
wäre echt nett
Beitrag04.07.2012 um 16:45 (UTC)    
Titel:

Hab den Obigen Code verbessert.
So sollte es klappen.

Zitat:

<div><span style="font-size: larger">

<style type="text/css">
img.einbild1 {background-image: url(http://img.webme.com/pic/t/twardygrosz/startseite1.jpg);
width:399px;height:70px; }
img.einbild1:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/startseite2.jpg);
width:399px;height:70px; }</style>

<a target="_blank" href="http://twardygrosz.de.tl/Herzlich-Willkommen.htm"><img class="einbild1" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a>
</span>
</div>
</td><td>

<div><span style="font-size: larger">
<style type="text/css">
img.einbild2 {background-image: url(http://img.webme.com/pic/t/twardygrosz/sendeplan1.jpg);
width:399px;height:70px; }
img.einbild2:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/sendeplan2.jpg);
width:399px;height:70px; }</style>

<a target="_blank" href="http://twardygrosz.de.tl/WWR-Not-Sende-Plan.htm"><img class="einbild2" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a>
</span>
</div>
</td><td>

<div><span style="font-size: larger">

<style type="text/css">
img.einbild3 {background-image: url(http://img.webme.com/pic/t/twardygrosz/wunschbox1.jpg);
width:399px;height:70px; }
img.einbild3:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/wunschbox2.jpg);
width:399px;height:70px; }</style>

<a target="_blank" href="http://twardygrosz.de.tl/WWR-Not-Wuschbox.htm"><img class="einbild3" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a></span>
</div>
</td><td>

<div><span style="font-size: larger">
<style type="text/css">
img.einbild4 {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum1.jpg);
width:399px;height:70px; }
img.einbild4:hover {background-image: url(http://img.webme.com/pic/t/twardygrosz/forum2.jpg);
width:399px;height:70px; }</style>

<a target="_blank" href="http://twardygrosz.de.tl/Forum/index.htm"><img class="einbild4" alt="Ein Bild" style="border-bottom: medium none; border-left: medium none; width: 185px; height: 49px; border-top: medium none; border-right: medium none" src="http://img.webme.com/pic/t/twardygrosz/qqq.gif" /></a>
</span></div>

</td>
</tr>
</tbody>
</table>


Mit Rot habe ich die Veränderungen markiert. Wink

Gruß Solee


Zuletzt bearbeitet von solee am 04.07.2012, 17:48, insgesamt 3-mal bearbeitet
Beitrag04.07.2012 um 17:14 (UTC)    
Titel:

thx hat geklappt.
jetzt noch nee frage dazu.

wieso kann ich jetzt die zeilen unter den buttons nicht wegmachen
hab mal auf der seite für dich ein h hinter gemacht damit du sihst was ich meine denn es sind leerzeichen.
wenn ich die lösche sind auch die bilder weg

http://twardygrosz.de.tl/test.htm
Beitrag04.12.2014 um 19:09 (UTC)    
Titel: Wie lautet der Code, wenn ein Button größer werden soll?

Ich möchte, dass ein Button sich beim Hover vergrößert, bekomme das allerdings mit diesen Codes und meinen Kenntnissen allein nicht hin.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de