Ich mach gerade ein paar Homepages zum über da ich diese sprachen noch nicht sehr lange beherrsche. Also wollt ich nen hover effekt rechts von meiner vertikalen navi machen. Wie muss ich das angehen? Ich wei� zwar wie ich das ganze mache das der Link sich färbt aber sonst weis ich nichts =(.
Es gibt sicher welche hier im Forum die sich damit auskennen!!

Hover Effect
-
-
-
Meinst du nen Link Hover oder nen Drop Down bzw Side Drop Menu?
Link Hover geht per Stylesheet a:hover bzw a hover.
Dropdown
http://www.google.de/search?hl…menu+css&btnG=Suche&meta= -
nein kein drop down menü, es soll einfach ein logo das ich bereits habe neben dem link erscheinen sobald ich mit der maus drüberfahr.
-
-
Nein, dass ist es auch nicht, hab hier mal ein Bild hochgeladen damit ihr euch das ungefähr vorstellen könnt.
Der Kreis neben Menü soll sich bewegen, je nach dem, wo man mit der Maus drüber fährtEDIT: Ich habs schonmal so hingebracht, das der Punkt unter dem Text ist, ich brauch also nur mehr wissen wie ich den Punkt neben den Text hinbekomme. Hab den "margin" Befehl schon versucht aber iergendwie will dass nicht gehen.
-
ne ungarische pizza?
http://www.nationalflaggen.de/…atalog/images/italien.gifMachs doch so mach n neues pic für die images...
Das is das einfachste denke ich... -
aja, gar nicht aufgefallen, muss ich gleich in italien ändern, *peinlich*
-
Cross Browser kompatibel ist per css nen hover effect allein zu machen nicht.
Der Internet Explorer ignoriert CSS befehle ala "element:hover" ...etc...
Du solltest für den hover effect auch javascript ala "<img onhover="javascript:alert(1);" verwenden. -
Ich mach den Hover bisher immer mit Java Script:
[HTML]<script language="JavaScript">
<!--
function na_change_img_src(name, nsdoc, rpath, preload)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '')
return;
if (img) {
img.altsrc = img.src;
img.src = rpath;
}
}function na_preload_img()
{
var img_list = na_preload_img.arguments;
if (document.preloadlist == null)
document.preloadlist = new Array();
var top = document.preloadlist.length;
for (var i=0; i < img_list.length-1; i++) {
document.preloadlist[top+i] = new Image;
document.preloadlist[top+i].src = img_list[i+1];
}
}function na_restore_img_src(name, nsdoc)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '')
return;
if (img && img.altsrc) {
img.src = img.altsrc;
img.altsrc = null;
}
}// -->
</script>
<a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'sig1.png', true)"><img src="sig2.png" width="390" height="84" border="0" name="image1"></a>[/HTML] -
Ich brauch nur mehr wissen wie man den Punkt jetzt positioniert. Hab schon margin und padding versucht aber iergendwie geht das nicht. Der Punkt ist links etwas nach unten versetzt, ich will ihn aber rechts ovn der Schrift und etwas in die höhe versetzten. Wie mach ich das?
-
Oh man...was seid ihr für? 1. Lassen wir javascript mal ganz aus dem spiel 2. geht es mit CSS in allen Browsern. Mach das ganze einfach mit einem a-tag dann klappt das immer du kannst dem a-tag einfach eine klasse gegben.
Dann CSS
So das wars...natürlich solltest du vorher noch dein link mit (jenachdem wie gro� das bild ist) padding-left:10px; versehen dann klappt das....und falls du es als block level element brauchst machst du bei der klasse link halt noch ein display:block; dazu und kannst dann die höhe und breite angeben...
EDIT: // Ich sehe gerade du willst die grafiken rechts haben dannn machste einfach background-position:right 3px; und halt das padding nach rechts....
Mfg
-
Stimmt Pseudoklassen werden von ie<6 ja akzeptiert nur in a Tags...ok hab ich nich mit gedacht.
@ Threadersteller
Beispielcode...dieser ist SEO technisch gesehen besser als nur reine links.
Code- <div id="nav">
- <ul>
- <li><a href="test1.php">1</a></li>
- <li><a href="test2.php">2</a></li>
- <li><a href="test3.php">3</a></li>
- <li><a href="test4.php">4</a></li>
- <li><a href="test5.php">5</a></li>
- </ul>
- </div>
- CSS:
- #nav {
- border: solid #3b4d5e;
- border-width: 0 1px 0 1px;
- }
- #nav ul {
- margin: 0 0 0 20px;
- padding: 0;
- list-style-type: none;
- }
- #nav li {
- display: inline;
- padding: 0 5px;
- font-size: 1.25em;
- }
- #nav a {
- text-decoration: none;
- font-weight: bolder;
- }
- #nav a:hover {
- background-color:#EDEDED;
- background-image:url(/images/menuebild2-nur-mit-punkt.gif);
- }
-
Die Methode von [N.e.0] hat wunderbar funktioniert. DANK!!! Hab noch ein wenig an der position was machen müssen aber das wars auch schon.
Aufjedenfall ein groÃ?es DANKESCHÃ?N!!! -
1 problem hab ich noch. Es geht jetzt zwar das wenn ich mit der Maus über die Links fahr das ein Bild daneben erscheint, aber wenn ich auf die links klicke soll dort das Bild aber bleiben. Momentan wenn ich draufklicke ist dann neben dem Link kein Bild zu sehen.
Wisst ihr was ich meine?