Vollständige Version anzeigen : [CSS] Rollover Navigation Problem


sarah.lady
17.07.2013, 15:06

Hallo zusammen,

versuche mich grade in der Erstellung einer Webseite. :)
So nun zum eigentlichen Problem: Ich möchte in der Navigation 3 bilder anordnen mit jeweils einem Rolloverbild. Leider funktioniert es nicht ganz wie ich es will :(
entweder es wird die Navi richtig angeordnet aber sind dann nicht klickbar oder aber die Links sind klickbar aber die hintergrund bilder werden nicht angezeit...

So langsam verzweifel ich da...

Index;html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1;0 Transitional//EN" ";;;w3~org/TR/xhtml1/DTD/xhtml1-transitional;dtd">
<html xmlns=";;;w3~org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DropshippingFront</title>
<link href="css;css" rel="stylesheet" type="text/css" />
</head>

<body>
<div style="width:994px;margin:0px auto;">
<div id="header">
<div id="logo"><a href="#"><img src="logo;png" width="285" height="40" alt="Webseite" /></a></div>
<div id="navigation">
<ul id="navmenu">
<li id="link1"><a href="#" target="_self"></a></li>
<li id="link2"><a href="#" target="_self"></a></li>
<li id="link3"><a href="#" target="_self"></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>


Css

;charset "utf-8";
/* CSS Document */

* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(bg;png);
background-repeat: repeat-x;
background-color: #fafafa;
}
#logo {
float: left;
width: 285px;
height: 40px;
padding-top: 15px;
}
#navigation {
float: right;
width: 709px;
height: 40px;
padding-top: 15px;
}
;clr { clear: both; }

#navmenu li
{
list-style-type: none;
float: left;
padding-right: 10px;
padding-left: 10px;
height: 17px;
}
#navmenu li a
{
/* höhe der verwendeten bilder */
display: block;
height: 17px;
}

#link1
{
/* hintergrundbild des links 1 */
background: url(link;png) no-repeat;
width: 47px;
}

#link1:hover
{
/* hintergrundbild des links 1 beim mouse over*/
background: url(link2;png) no-repeat;
width: 47px;
}

#link2
{
/* hintergrundbild des links 2 */
background: url(lieferanten;png) no-repeat;
width: 119px;
}

#link2:hover
{
/* hintergrundbild des links 2 beim mouse over*/
background: url(lieferanten;png) no-repeat;
width: 119px;
}

#link3
{
/* hintergrundbild des links 3 */
background: url(registrieren;png) no-repeat;
width: 106px;
}

#link3:hover
{
/* hintergrundbild des links 3 beim mouse over*/
background: url(registrieren;png) no-repeat;
width: 106px;
}


Kann mir da jemand helfen und schauen was da falsch läuft?! Da es auch mein erstes CSS Layout ist bin ich für jede Art von verbesserung offen :)

LG
Sarah

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
DerEntscheider
17.07.2013, 15:22

Edit fiddle - JSFiddle (;jsfiddle~net/GQEz3/)

Der letzte Link sollte funktionieren wie du es willst.


#link3:hover a
{
[/Code]


Ähnliche Themen zu [CSS] Rollover Navigation Problem
  • Sound bei Rollover
    moin, also ich hab hier erstma zur hilfe nen quelltext von nem Rollover per HTML gemacht, bzw PHP <body onload="MM_preloadImages('images/Button_home_rot;png','images/Button_tuts_rot;png','images/Button_faq_rot;png','images/Button_gaestebuch_rot;png')">ja... mag jetzt net zensieren, des mit den im [...]

  • [JavaScript] Rollover
    Hallo Leute, ich brauche nochmals eure Hilfe. Ich habe hier ein Rollover code der aber meiner Ansicht nach noch nicht ganz komplett ist (ich meine es fehlt noch die Überprüfung "if (document;image)" damit der Explorer wenn Bild nicht vorhanden ist keine Fehlermeldung ausspuckt). Könnt ihr mir d [...]

  • [CSS] Navigation-Hover Problem
    hallo RR, habe ein Problem, zum Anfang mal die html und css datei: No File | xup~in (;;;xup~in/dl,71220451/index;html/) No File | xup~in (;;;xup~in/dl,61784293/style;css/) Ggf. runterladen und öffnen um zu sehen wie ich es meine: beim überfahren des Links01 ,,blobbt'' quasi die Subnavigation [...]

  • hilfe bei publizieren (rollover problem)
    hi an alle. hoffe ich habe den richtigen threat gewählt.... habe folgendes problem: muss für die Schule ne hp erstellen. soweit schon alles fertig... habe sie mit dem Prog. nof 8 hergestellt. heute wollte mein lehrer dass ich ihm sie auf cd brenne. gesagt, getan. nun ist beim publiziere [...]



raid-rush.ws | Imprint & Contact pr