Problem bei Navigation

Sebbo

Hallo zusammen,

Ich bastel gerade eine Seite für eine bekannte. Bei grafischen der Umsetzung der Wünsche hatte ich soweit keine Probleme, jetzt habe ich begonnen das Projekt in Code umzusetzen und stoße bei der Navigation auf ein Problem.

Hier mal ein Link zu der Grafik mit der ich das Problem beschreiben will:

http://www.ecy-design.de/prew.jpg

Auf dem Bild sieht man ein Teil der Navigation. Die habe ich als Liste deklariert und um die versetzten Positionen zu realisieren habe ich jedem List Item <li> ne eigene ID vergeben und sie dann per CSS Positioniert(margin).

Jtzt zum eigentlichen Problem. Auf dem Bild seht ihr bei "Über Uns" den Mouseover Status der besteht aus einem Unterstrich des Navigations Elements und dem Logo rechts neber diesem.

Der Unterstrich lässt sich einfach lösen per CSS jedoch hab ich es nicht hinbekommen das Logo dort bei Mouseover einzublenden.

Ich hoffe ihr könnt mir bei diesem Problem weiterhelfen! Ich habe gesucht und gesucht und nix gefunden.

Freue mich auf Antwort.

Liebe Grüße

Sebbo

DerBaer

du kannst bei elementen ein Event OnMouseOver angeben. Darin schreibst du dann JS-Code:
document.getElementById('idBild').style.display='block';
Beim Event OnMouseOut dann:
document.getElementById('idBild').style.display='none';
Entweder erstellst du für jedes Element ein Bild, oder du musst sie halt noch richtig positionieren.

Das wäre so eine Möglichkeit, die ich meistens verwende.

Vllt kann man die Eigenschaft auch in CSS bei hover einstellen(bild hat z.b. noch einen durchsichtigen bereich, der über dem Link liegt und das Ereignis triggert...

Sebbo

Hey danke für die schnelle Antwort. Das werd ich jetzt gleich mal probieren.
Gibs ne möglichkeit ohne Javascript?

PRIEST

würde es mit css machen aber das is wieder religion und support fragerei

Shade Of Mine

Sebbo schrieb:

Gibs ne möglichkeit ohne Javascript?

background-image
das lässt sich im :hover definieren.

Lupo4u2

Leicht OT:

Sebbo schrieb:

http://www.ecy-design.de/prew.jpg

Auf dem Bild sieht man ein Teil der Navigation. Die habe ich als Liste deklariert und um die versetzten Positionen zu realisieren habe ich jedem List Item <li> ne eigene ID vergeben und sie dann per CSS Positioniert(margin).

Meinst du, die Variante mit dem margin ist die beste lösung?
Gerade wenn du viele Browsertypen ausprobierst kann es da zu unschönen Nebeneffekten kommen...
Warum hast du nicht einfach gleichgroße Rechtecke gesliced und dann einfach eine Liste erstellt?
(Das Navi Menü an sich muss doch sowieso so groß wie: 1. pixel ganz links -> letzter pixel ganz rechts sein damit alles reinpasst... Also warum noch unnötig platzieren?)

Sebbo

Ich dachte am Anfang das ich das alles ganz easy mit CSS hin bekomme.
Die Navigation wollte ich mit einer Textliste erstellen, die ich dann mit CSS formatiere und Positioniere.
Das slicen wäre ne Möglichkeit da müssten aber dann unnötig (unnötig bezieht sich jetzt auf den Gedanke das es andere Lösungen gibt*g*) viele Grafiken ins Spiel gebracht werden.

Ich dachte da einfach an eine Textnavigation die als hover Effekt eine Unterstreichung des links bekommt und rechts neben dem Link eine Grafik geladen wird.

mit css könnt ich mir eine Lösung von Background Image vorstellen die im normal zustand die Hintergrund Farbe der Seite hat und bei mouseover den a:hover Effekt bekommt eine andere Hintergrundgrafik zu laden (eben die mit dem Logo)
da ich aber für diese Variante quasi für jeden Menüpunkt eine Grafik erstellen muss die unterschiedlich lang ist (damit das Logo hinter dem Text erscheint) hielt ich diese für unschön und wollte hier zur Diskussion schönerer Lösungen anregen bzw. fragen wie ihr es machen würdet.

Das ist erst meine 2te Webseite die ich erstelle und bin daher für jeden Vorschlag und jeden Tipp dankbar und offen.

Danke euch schon mal vielmals für die bisherigen antworten!!!

Shade Of Mine

Sebbo schrieb:

mit css könnt ich mir eine Lösung von Background Image vorstellen die im normal zustand die Hintergrund Farbe der Seite hat und bei mouseover den a:hover Effekt bekommt eine andere Hintergrundgrafik zu laden (eben die mit dem Logo)
da ich aber für diese Variante quasi für jeden Menüpunkt eine Grafik erstellen muss die unterschiedlich lang ist (damit das Logo hinter dem Text erscheint) hielt ich diese für unschön und wollte hier zur Diskussion schönerer Lösungen anregen bzw. fragen wie ihr es machen würdet.

du kannst per background-position:right; die Position des Bildes nach rechts schieben.
Dann noch background-repeat:no-repeat; setzen und es sollte passen.

ps, so in etwa:

<html>
<head>
<style type="text/css">
a {
	display:block;
	background-color:lightgray;
	color:black;
}
a:hover {
	background-image:url('ball.png');
	background-position:right;
	background-repeat:no-repeat;
}
a#foo1 {
	width: 150px;
}
a#foo2 {
	width: 250px;
}
</style>
</head>
<body>
<a href="#" id="foo1">test1</a>
<br>
<a href="#" id="foo2">test2</a>
</body>
</html>

Sebbo

Yeah, das ist genau die Lösung die ich gesucht hab. Perfekt! Danke dir vielmals! Und dem Rest natürlich auch die Javascript Variante werde ich mir auch mal näher Betrachten!

Ihr Seit super !!!!