Komplexes Script mit CSS (Möglich ?)

Hallo ,

Ich arbeite gerade an einer Neuartigen Style idee ^^ (ich sage nix)
bei der idee will ich alle Menüs als Dropdown menu aufbaun das ganze wollte ich so Lösen :

Menu Unten : bild A
Menu unten Hover : Bild A_Hover
Menu Oben : Bild C
menu Oben Hober : Bild C_Hover

mit Javascritp währe es zu realisieren ganz einfach aber ich währe nett Dadie wenn ich nett den Dümmsten weg versuchen will ^^


So das Problem ist ich weiss 2 dinge nicht :

1,Funtz die sache nicht mit

background-image: url(./normal.png);

das bild wird nicht dargestellt -.- wenn ich es in den A CSS tag einbaue

2,Wie lasse ich Div Objekte mit CSS verschwinden also das sie nur sichtbar sind wenn Class X Link activ ist.

Ich hoffe hier kann mir jemanden helfen und wie gesagt kein Javascript ich will es in CSS Lösen !!

Möglich ist es da bin ich mir sicher nur wie weiss ich nett -.-'

Mfg Dadie

Zu 1.: Ich hab da sowas im Hinterkopf dass Inline-Elemente keine Hintergrundbilder haben können (bin mir aber nicht sicher). Versuch mal dem <a>-Element ein display:block; zu geben (wahrscheinlich isses das aber net)
Zu 2.: Das geht nur wenn du es so anordnest dass das auslösende Element immer ein Vorfahre des anzuzeigenden Elements ist, also:

Code:

---

<div id="ausloeser">
<div id="daswasangezeigtwird">
Text
</div>
</div>

---

Dann musst du dem Element das normalerweise unsichtbar ist ein display:none; geben und wenn das Elternelement gehovert wird musst dus per display:block; (oder display:inline;, je nachdem) anzeigen, also:

Code:

---

#daswasangezeigtwird {
display:none;
}

#ausloeser:hover #daswasangezeigtwird {
display:block;
}

---

thx du hast mich auf ne tolle idee gebracht ^^

Ich Probier es gleich mal aus ^^

Edit: >.< misst eine unlösbares Problem :

Ich habe folgenden Code :


im head

HTML-Code:

---

#pulldown1
{
border:0px solid black;
width:21px;
height:21px;
display:block;
}

#pulldown1 A{text-decoration: none; color: #0000C0;background-image: url(./Normal_.png);}

#pulldown1 A:hover{text-decoration: none; color: #0000C0;background-image: url(./Hover_.png);}

#pulldown1 A:visited{text-decoration: none; color: #0000C0;background-image: url(./Normal_.png);}

#pulldown1 A:active{text-decoration: none; color: #0000C0;background-image: url(./Neu_Normal.png);}

---

#pulldown1 A:active #pulldown1 A:hover {text-decoration: none; color: #0000C0;background-image: url(./Neu_Normal_Hover.png);}[/HTML]

Und folgendes im Body :

HTML-Code:

---

<div id="pulldown1" ><a href="#p1" id="pulldown1" >&nbsp;</a></div>

---

Das Problem ist folgendes :

Den "#pulldown1 A:active #pulldown1 A:hover" befehlt fürt er nicht aus ERGO habe ich müll gecoded -.-'

Und wenn ich nun auf einen X billibigen Punkt auf der Seite klicke ist der Link wieder auf Visitet obwohl ich ihn geklick habe -.-'

Ist logisch. SObald du den Link einmal besucht hast und er in deiner History/Verlauf drinsteht, wird er immer als visited angezeigt. Ich würde eine Angabe für visited einfach weglassen, sodass kein Unterschied zwischen besucht und nicht besucht besteht...

Btw: Ich dachte immer, dass man die Angaben bei url() ind '' setzten müsste, also background: url('dasbild.gif');

Zitat:

---

Zitat von Manni_the_Dark

Ich würde eine Angabe für visited einfach weglassen, sodass kein Unterschied zwischen besucht und nicht besucht besteht...

---

Dann wird aber afaik die Defaultformatierung für besuchte Links verwendet.

Zitat:

---

Btw: Ich dachte immer, dass man die Angaben bei url() ind '' setzten müsste, also background: url('dasbild.gif');

---

Nein, das braucht man in dem Fall net (schaden tuts aber auch net), man brauchts nur wenn mehrere Angaben möglich sind und diese Leerzeichen enthalten (z.B. bei Schriftarten)

Zitat:

---

Zitat von Geiu

Dann wird aber afaik die Defaultformatierung für besuchte Links verwendet.

---

Afaik wird da die normale Linkformatierung genommen (also ohne irgendein Attribut)
Es ändert sich also nichts, wenn der Link schon mal besucht wurde...

Da er darüber schon das A-Element allgemein formatiert hat, wird die Formatierung für besuchte Links benutzt.

@Problem: Öhm, kann ich nicht gucken oder hast du zwei Mal die ID "pulldown1" verwendet??

Also es bestehn weiterhin 2 Probleme zudenen sich ein dritter gesellt -.- :

1,wen ich eben irgentwo anderrs hin klicken ist wieder das Alte bild da und der weggemacht Menuteil auch >.<

2,Wenn es an ist und ich drauf Hover misachtet er den
#pulldown1 A:hover #pulldown1 A:active {text-decoration: none; color: #0000C0;background-image: url(./img/Luna/4_Normal_Hover.png);}
Und benutz den Normalen hover für #pulldown1

3.Mozilla ignoriert vom Prinzip das wegseln des bildes sonst klappt alles bei Mozilla richtig o.O

Edit:

Hier der Aktuele Code

HTML-Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS-Layout 1</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--

A {text-decoration: none; color: #0000C0;}

A:visited{text-decoration: none; color: #0000C0;}

A:active{text-decoration: none; color: #0000C0;}

A:hover{text-decoration: underline; color: #0000C0;}




body
{
color :#000000 ;
background-color:#f0f0f0;
font-family : verdana, helvetica, sans-serif;
font-size : 13px;
margin : 0px;
padding:0px;
}

.box3{font-size:10px;padding:0px;border:0px solid black;width:170px;margin:0px;position:absolute; left:5px; top:10px;text-align:center;}
.box4{font-size:10px;padding:0px;margin:0px 0px 0px 0px;border:1px solid black;position:absolute; left:185px; right:185px; top:10px;text-align:center;}
.box5{font-size:10px;padding:0px;border:1px solid black;width:170px;margin:0px;position:absolute; right:5px; top:10px;text-align:center;}

.Menu1
{
font-size:1px;
padding:0px;
border:0px solid black;
width:3px;
margin:0px;
text-align:center;
height:30px;
background-image: url(./Menu01.png);
}

.Menu2
{
font-size:1px;
padding:0px;
border:0px solid black;
width:21px;
margin:0px;
text-align:center;
height:30px;
background-image: url(./Menu02.png);
}

.Menu3
{
font-size:20px;
padding:0px;
padding-left:5px;
border:0px solid black;
margin:0px;
text-align:left;
height:30px;
color:#ffffff;
background-image: url(./Menu03.png);
}

.Menu4
{
font-size:10px;
padding:0px;
border:0px solid black;
width:30px;
margin:0px;
text-align:right;
height:30px;
background-image: url(./Menu04.png);
}

.Menu5
{
font-size:1px;
padding:0px;
border:0px solid black;
width:4px;
margin:0px;
text-align:right;
height:30px;
background-image: url(./Menu05.png);
}

#pulldown1
{
border:0px solid black;
width:21px;
height:21px;
display:block;
}

#pulldown1 A:hover #pulldown1 A:active {text-decoration: none; color: #0000C0;background-image: url(./4_Normal_Hover.png);}

#pulldown1 A:active{text-decoration: none; color: #0000C0;background-image: url(./4_Normal.png);}

#pulldown1 A{text-decoration: none; color: #0000C0;background-image: url(./Normal_.png);}

A:active {text-decoration: none; color: #0000C0;background-image: url(./Normal_.png);}

#pulldown1 A:hover{text-decoration: none; color: #0000C0;background-image: url(./Hover_.png);}





-->
</style>


</head>

<body>
        <div class="box3">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
      <td class="Menu1" >&nbsp;</td>
      <td class="Menu2" ><img src="./img/logo/Mozilla.png" height="16" width="16" alt="Mozilla Logo" title="Mozilla Logo" /></td>
      <td class="Menu3" >Home</td>
      <td class="Menu4" ><div id="pulldown1" ><a href="#p1" id="pulldown1" >&nbsp;</a></div></td>
          <td class="Menu5" >&nbsp;</td>
</tr>
</table>

        </div>
       
        <div class="box4">
       
                <div style="width:100%;" >
               
                </div>
               
                </div>
               
        </div>
        <div class="box5">

        </div>
</body>
</html>

---