selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

CSS Mouseover 3 Grafiken (des Linkpunktes) verändern

Autor: chris938621
Datum: 04.11.2011 05:51:00

Guten Tag!
Ich beschäftige mich seit kurzem mit CSS und möchte im HTML durch eine Liste eine Navigation anlegen. Die Menüpunkte sollen dann angezeigt werden. Jeder Punkt soll einen "Kasten" darstellen, der beim mouseover den Hintergrund verändert. Da die Ecken spezielle Abrundungen haben, möchte ich für einen Menüpunkt beim mousover 3 Grafiken einblenden.
-liker Bereich (Ecken)
- mittlerer Bereich ("Normalteil", wird wiederholt bis zum rechten Bereich)
- rechter Bereich(Ecken rechts)

Meine bisherige Umsetzung sieht so aus:

HTML
<div id="add">
<div id="navi">
<ul id="s1">
<li><a href="#"  >Aktuell</a> </li>
<li><a href="#" >Kontakt</a> </li>
<li><a href="#">Info </a> </li>
</ul>
</div>

CSS

#navi {
  
    padding:10px;
  
    background-color: #eee;
  
}
  #navi li{
  list-style:none;
display:inline;
  
}
  #navi a{
text-decoration: none; font-weight: bold;
    color: maroon; background-color: #ccc;
margin:10px;
margin-left:0px;
  padding:5px;
}

#add{
width:500px;
height:80px;
float: right;
background:red;
}

Ich möchte im Prinzip, dass beim Mousover von Aktuell es so aussieht
#Grafik 1 Aktuell #Grafik2
          #Grafik 3 repeat (zwischen #1 und #2

und die anderen Punkte normal.

Beim Mouseover von Info entsprechend anders rum.

Der Link soll hervorgehoben werden, und eine schöne abgerundete Grafik, die ich vorher in Photoshop erstellt habe, dahinter.

Danke für Eure Antworten :-)

Grüße,
chris

Re: CSS Mouseover 3 Grafiken (des Linkpunktes) verändern

Autor: gaby
Datum: 04.11.2011 06:14:12

> Da die Ecken spezielle Abrundungen
> haben, möchte ich für einen Menüpunkt beim
> mousover 3 Grafiken einblenden.


Moin moin,

Dann zeige doch auch bitte diese Grafiken.

Beachte auch bitte den Hinweis im obersten Kasten des HTML-Forums (Bild, s.o.)


Grüße
gaby

Re: CSS Mouseover 3 Grafiken (des Linkpunktes) verändern

Autor: chris938621
Datum: 04.11.2011 20:44:57

Ich habe ein Beispiel vorbereitet

http://chris938621.lima-city.de/

ist der aktuelle stand.

Die Grafik

http://chris938621.lima-city.de/linkhg.png

soll für die Links als Hintergrund, anstelle dem weißen Kasten.

Jedoch soll die Größe automatisch angepasst werden. Demnach müsste das Stück in der Mitte in Abhängigkeit der Linkbreite wiederholt werden?

Danke ;-)

[OT] Multiposting (was: CSS Mouseover 3 Grafiken (des Linkpunktes) verändern

Autor: gaby
Datum: 06.11.2011 09:55:37

> Ich habe ein Beispiel vorbereitet
>
> http://chris938621.lima-city.de/
>
> ist der aktuelle stand.
>
> Die Grafik
>
> http://chris938621.lima-city.de/linkhg.png
>
> soll für die Links als Hintergrund, anstelle dem
> weißen Kasten.
>
> Jedoch soll die Größe automatisch angepasst
> werden. Demnach müsste das Stück in der Mitte in
> Abhängigkeit der Linkbreite wiederholt werden?


Meinst du nicht, daß es angebracht wäre, hier Bescheid zu sagen, daß du schon im XHTML-Forum die Lösung bekommen hast, bevor sich einer der User von selfhtml.de die mittlerweile überflüssige(!) Mühe macht, sich mit deinem Problem zu beschäftigen!?!

(siehe: http://xhtmlforum.de/66106-links-beim-mouseover-mehrere-grafiken-des.html#post505144 )

Extra für diejenigen, die nichts dabei finden, wenn sie durch Multipostings die Hilfsbereitschaft anderer User mißbrauchen, geben wir beim Erstellen eines neuen Threads nochmal den rot unterlegten Hinweis, daß Multipostings - übrigens nicht nur hier(!) -  unerwünscht sind (Screenshot, s.o.)
Sich darüber hinwegzusetzen, ist schon ziemliche frech.


Gaby