Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag05.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
Beitrag05.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
Beitrag05.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 Sad

EDIT: damit sich keiner wundert: ich bin nicoeinsidler.de.tl!


Zuletzt bearbeitet von physiklabs am 05.09.2007, 13:06, insgesamt einmal bearbeitet
Beitrag05.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 Wink

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
Beitrag05.09.2007 um 18:34 (UTC)    
Titel:

Cool ...css kann also doch alles!

danke!

lg nico
Beitrag05.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 Sad (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
Beitrag05.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
Beitrag05.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]
Beitrag06.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
Beitrag06.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
Beiträge der letzten Zeit anzeigen:   


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