| Autor |
Nachricht |
-
nicoeinsidler
|
 05.09.2007 um 11:40 (UTC)
Titel: Iceblue: rechte Navi - Hovereffekt? |
|
|
hi,
leider steht in dem thread(http://www.homepage-baukasten.de/forum/viewtopic.php?t=52362) nicht drinnen wie man einen hovereffekt auch bei den buttons erzeugen kann.
ausserdem würde ich das gerne mit css rgeln(--->deswegen auch im CSS-Forum). geht das?
lg nico
Zuletzt bearbeitet von nicoeinsidler am 05.09.2007, 19:56, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
 |
-
emi-home
|
05.09.2007 um 11:51 (UTC)
Titel: |
|
|
Ersteinmal: Nein! mit CSS kann man das nicht Regeln aber mit HTML wäre es mäglich!
Es ist sehr aufwendig, weil Du für die rechte Seite ja alle Buttons beschriftet und hochladen hochladen.
Auch die Hover-Buttons müsstest Du erstellen und beschriften.
Wenn man 4 Buttons in der rechten Box hat, muss man also 4 Hover-Buttons erstellen,
und diese auch beschriften und hochladen.
Dafür gibt es auch einen Generator!
Hover-Generator:
http://scripte.aaj.de/mouseovergenerator.html
Ich hoffe ich konnte dir Helfen
Emi |
|
|
↑
|
|
|
-
physiklabs
|
05.09.2007 um 12:05 (UTC)
Titel: |
|
|
oh, ja!
hast mir sehr geholfen!
danke
lg nico
PS: schade...und ich dachte immer css kann alles 
EDIT: damit sich keiner wundert: ich bin nicoeinsidler.de.tl!
Zuletzt bearbeitet von physiklabs am 05.09.2007, 13:06, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
andybabe27
|
05.09.2007 um 18:21 (UTC)
Titel: |
|
|
Sorry emi-home, aber deine Aussage ist falsch. Natürlich kann man mit CSS einen Hover Effekt erzeugen. Du musst der Grafik nur eine Klasse zu weisen und dann CSS anwenden 
Zitat: <td class="bild"><img src="BILD URL" /></td>
<style type="text/css">
<!--
td.bild{Anweisung}
td.bild:hover{Hover Anweisung}
-->
</style> ______________ LG André
GMMTS.de |
|
|
↑
|
|
|
-
nicoeinsidler
|
05.09.2007 um 18:34 (UTC)
Titel: |
|
|
 ...css kann also doch alles!
danke!
lg nico |
|
|
↑
|
|
|
-
nicoeinsidler
|
05.09.2007 um 18:56 (UTC)
Titel: |
|
|
hi,
habs jetzt mit dem code ausprobiert:
Zitat: <td class="designpic"><img src="http://img.webme.com/pic/n/nicoeinsidler/buttonedb_des.png" /></td>
<td class="beispielepic"><img src="http://img.webme.com/pic/n/nicoeinsidler/buttonedb_bei.png" /></td>
<td class="kontaktpic"><img src="http://img.webme.com/pic/n/nicoeinsidler/buttonedb_kon.png" /></td>
<style type="text/css">
<!--
td.designpic{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedb_des.png;}
td.designpic:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedbh_des.png;}
td.beispielepi{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedb_bei.png;}
td.beispielepi:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedbh_bei.png;}
td.kontaktpic{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedb_kon.png;}
td.kontaktpic:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedbh_kon.png;}
-->
</style>
leider geht der ned (die buttons haben keinen hover)
woran leigt das?
auserdem: wie kann ich die buttons untereinnander auflisten(in einer rechten box) gibts da einen code oder muss ich die buttons absolut positionieren(also mit position:absolute;left:px;top:px;)
lg nico |
|
|
↑
|
|
|
-
andybabe27
|
05.09.2007 um 19:09 (UTC)
Titel: |
|
|
Zitat: <table width="333" height="222"><td class="designpic"><img src="http://img.webme.com/pic/n/nicoeinsidler/buttonedb_des.png" /></td></table>
<table width="333" height="222"><td class="beispielepic"><img src="http://img.webme.com/pic/n/nicoeinsidler/buttonedb_bei.png" /></td></table>
<table width="333" height="222"><td class="kontaktpic"><img src="http://img.webme.com/pic/n/nicoeinsidler/buttonedb_kon.png" /></td></table>
<style type="text/css">
<!--
td.designpic{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedb_des.png;}
td.designpic:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedbh_des.png;}
td.beispielepic{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedb_bei.png;}
td.beispielepic:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedbh_bei.png;}
td.kontaktpic{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedb_kon.png;}
td.kontaktpic:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/buttonedbh_kon.png;}
-->
</style>
Ich habe jetzt mal ein table tag drumherum gelegt. Jetzt sollte es gehen. Als Inhalt der Tabelle ist das eine Bild mit dem img Tag. ______________ LG André
GMMTS.de |
|
|
↑
|
|
|
-
whgneuwied
Wohnort: Kettig
|
05.09.2007 um 19:31 (UTC)
Titel: |
|
|
Zitat: <center>
<table width="160">
<tr><td class="nav_rb"><a href="/Links.htm" class="menu"><B>Links</B></a></td></tr>
<tr><td class="nav_rb"><a href="/Links.htm" class="menu"><B>Links</B></a></td></tr>
</table>
</center>
So habe ich es gemacht.
Dann habe ich im CSS Code noch die Backgrod-image:url eingetragen.
Siehe meine 1. Box. ______________ [img:851cbd7359]http://whgneuwied.de.tl/sig.png[/img:851cbd7359] |
|
|
↑
|
|
|
-
nicoeinsidler
|
06.09.2007 um 18:07 (UTC)
Titel: |
|
|
hi,
ich hab jetzt mal alle 2 codes ausprobiert(einmal in der box einmal obern design,...)! ich hab sogar die anweisung "shouty" aus meinem css-design-code gelöscht, aber nach wie vor kann ich in keine der 5 boxen etwas einfügen(schon nur wirds nicht angezeigt).
jetzt 2 fragen :
--wo genau muss ich welchen code hineinschreiben
--und: stimmen meine codes(passt der rechte navi code zum "hauptcode"):
das ist das "haupt-haupt-design" (habe es überm design platziert)
Zitat: <style type="text/css">
td.idcp{visibility:hidden;}
td.headline{visibility: hidden;}
td{color:#FFFFFF;}
a{color:#FFFFFF;font-size:11px;}
a:visited{color: #FFFFFF ;font-size:11px;}
a:hover{color: #890020 ;font-size:11px;}
body{background-image:url(http://img.webme.com/pic/p/physiklabs/hintergrundtest2.jpg);background-repeat:no-repeat;}
td.nav{background-image:url(http://img.webme.com/pic/p/physiklabs/testeinsidlebutton.png);}
td.nav:hover{background-image:url(http://img.webme.com/pic/p/physiklabs/testeinsidlebuttonhover.png);}
td.nav_heading{background-image:url(http://img.webme.com/pic/p/physiklabs/testeinsidleoben2.png);}
td.nav a{color:#FFFFFF;}
td.edit_below_nav{visibility:hidden;}
td.edit_header_full{background-image:url();}
td.headline2{background-image:url();}
td.headline{background-image:url();}
div{color:#000000;width:100%;}
td#nav_abstand1{visibility:hidden;height:5px;}
td.edit_content{background-image:url(http://img.webme.com/pic/p/physiklabs/hintergrundtext.png);}
td.edit_content_top{background-image:url(http://img.webme.com/pic/p/physiklabs/hintergrund_t_oben.png);}
td.edit_content_bottom{background-image:url(http://img.webme.com/pic/p/physiklabs/hintergrundtext.png);}
td.edit_content_bottom2{background-image:url(http://img.webme.com/pic/p/physiklabs/hintergrundtext.png);}
td.edit_rechts_sbg{background-image:url();}
td.edit_navi_headbg{background-image:url();}
td.edit_rechts_cbg{background-image:url();}
td.edit_rb_footer{background-image:url();}
td.shouty{background-image:url();background-color:transparent; width: 500px; }
td.shouty2{background-image:url();background-color:transparent;}
td.shouty3{background-image:url();background-color:transparent;}
td.shouty4{background-image:url();background-color:transparent;}
td.shouty5{background-image:url();background-color:transparent;}
td.edit_rechts_bottom{background-image:url();}
td.sidebar_heading{background-image:url();}
--></style>
und den:
Zitat: <style type="text/css">
td.idcp{visibility:hidden;}
td.headline{visibility: hidden;}
td{color:#FFFFFF;}
a{color:#FFFFFF;font-size:11px;}
a:visited{color: #FFFFFF ;font-size:11px;}
a:hover{color: #000000 ;font-size:11px;}
body{background-image:url(http://www.elyps.de/wallpaper/gras.jpg);background-repeat:no-repeat;}
td.nav{background-image:url(http://img.webme.com/pic/p/physiklabs/design_grau_text.png);}
td.nav:hover{background-image:url(http://img.webme.com/pic/n/nicoeinsidler/einsidlerdesignbutton.png);}
td.nav_heading{background-image:url(http://img.webme.com/pic/p/physiklabs/design_grau_unten.png);}
td.nav a{color:#FFFFFF;}
td.edit_below_nav{visibility:hidden;}
td.edit_header_full{background-image:url();}
td.headline2{background-image:url();}
td.headline{background-image:url();}
div{color:#000000;width:100%;}
td.edit_content{background-image:url(http://img.webme.com/pic/p/physiklabs/design_grau_text.png);}
td.edit_content_top{background-image:url(http://img.webme.com/pic/p/physiklabs/design_grau_unten.png);}
td.edit_content_bottom{background-image:url(http://img.webme.com/pic/p/physiklabs/design_grau_text.png);}
td.edit_content_bottom2{visibility:hidden;}
td.edit_rechts_sbg{background-image:url();}
td.edit_navi_headbg{background-image:url();}
td.edit_rechts_cbg{background-image:url();}
td.edit_rb_footer{background-image:url();}
td.shouty{background-image:url();background-color:transparent; width: 500px; }
td.shouty2{background-image:url();background-color:transparent;}
td.shouty3{background-image:url();background-color:transparent;}
td.shouty4{background-image:url();background-color:transparent;}
td.shouty5{background-image:url();background-color:transparent;}
td.edit_rechts_bottom{background-image:url();}
td.sidebar_heading{background-image:url();}
--></style>
ich hoffe ihr könnt mir weiterhelfen!
lg nico |
|
|
↑
|
|
|
-
whgneuwied
Wohnort: Kettig
|
06.09.2007 um 19:05 (UTC)
Titel: |
|
|
Zitat: <center>
<table width="160">
<tr><td class=" nav_rb"><a href="/ Links.htm" class="menu"><B> Links</B></a></td></tr>
<tr><td class=" nav_rb"><a href="/ Links.htm" class="menu"><B> Links</B></a></td></tr>
</table>
</center>
Das kommt in die entsprechende Box
Zitat: <style tyle="text/css">
<!--
td.nav_rb{background-image:url(Hintergrundbild);}
td.nav_rb a{color: #xxxxxx;}
td.nav_rb:hover{background-image:url(Hintergrundbildhover);}
td.nav_rb a:hover{color: #xxxxxx;}
-->
</style>
Text über dem Design Den rest kannst du lassen so wie du es vorher hattest. ______________ [img:851cbd7359]http://whgneuwied.de.tl/sig.png[/img:851cbd7359]
Zuletzt bearbeitet von whgneuwied am 06.09.2007, 20:06, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
...css kann also doch alles!
