Problem mit CSS Hover

[Mark]

Ich versuche grade ein simples CSS Hover auf die Reihe zu kriegen, aber irgenwie funktioniert es nicht

siehe hier:
http://80779.webtest.goneo.de/skyworxx.com/

Sieht ja auf den ersten Blick ganz gut aus, aber scheinbar ist auch der Bereich rechts von Photography "hover-bar".



Wens interessiert, so soll die Website am Ende aussehen:
http://mark-schramm.com/gallery/big_thumbs/big_webdesign_sketch%20for%20new%20design.jpg

[darph]

<a id="photography" href="#">
<div id="photography"> </div>
</a>

Also das ist so definitiv nicht erlaubt und zwar schon aus zwei Gründen:


Ein Inline-Element darf keine Block-Elemente beinhalten
Eine id muß innerhalb des gesamten Dokuments eindeutig sein



Und drittens hat dein div ein Problem mit der Ausrichtung:

http://picdump.darph.net/wp-content/uploads/2009/09/Bild-11.png



#photography {

position: absolute;
top:0px;
left: 96px;
width: 132px;
height: 39px;
}

genau 96 Pixel sind es zum linken Rand des Reiters.

[Blade II]

Schau dir mal die Beispiele auf http://www.yaml.de/ an. Dessen Lösungen sind -ja- perfekt ;)

[Mark]

Danke, habe die Navigationsleiste jetzt hinbekommen.

Doch nun tut sich schon das nächste Problem auf:

http://www.mark-schramm.de/upload/images/kUUSCJE37p4Hujo7Untitled-6.jpg (http://www.skyworxx.com/)


@huha
Welches Programm nutzt du denn um das im Quelltext ausgewählte Element in der Seite hervorzuheben?

[Blade II]

Das kommt durch die benutzten floats. Du könntest versuchen display: block zu verwenden, vllt. hilft das.
Btw: Ich würde an deiner Stelle nicht per "position" die Elemente positionieren, die Lösung ist doch recht... nunja, dreckig :(

Ich würde dir trotzdem empfehlen das Layout auf Basis von YAML neu zu schreiben. Das geht rucki zucki, wenn du dich erstmal eingearbeitet hast und du musst dich nicht mit 10000 Layoutproblem rum ärgern.

[Mark]

display:block; hat leider nicht geholfen. Ich habe es testweise in allen drei content-Divs probiert, hat sich leider nichts geändert. :(


Wie würdest du denn die Elemente positionieren? Wie geht es besser?

[DanMan]

Dass es unten raushängt liegt daran, dass der Bereich auf "float" steht, und der Rest drum rum nicht mindestens genauso hoch ist. Das kann man auf verschiedene Wege lösen. :tongue:

[darph]

@huha :|
Welches Programm nutzt du denn um das im Quelltext ausgewählte Element in der Seite hervorzuheben?Safari 4

[Mark]

Ups, sorry, hätte wetten können huha hätte das geschrieben X-D