Problem: Positioniertes DIV bei Link HOVER
Hi.
Ich versuche gerade meine Website zu modernisieren und fuchse mich da gerade in CSS ein, brauche jetzt aber Hilfe von jemanden mit Erfahrung... Auf der Page soll links oben ein Logo sein - Abmaße 320x70px. Daneben kommen die Links. Man kann sich das schonmal unter http://labor.dark-sun.de ansehen (Am Link-Aussehen arbeite ich noch :oops: ). Wenn man jetzt über einen Link fährt, soll anstelle des Logos ein Info-Fenster erscheinen, das einen beliebigen Text enthält. Da ich von JAVA nicht die Bohne Ahnung habe, würde ich es gerne mit CSS realisieren. Die Idee habe ich von hier: http://www.css4you.de/trickkiste/tr00022.html Bisher stehe ich an diesem Punkt: CSS Code: Code:
A .Info Fährt man mit der Maus auf den Link, wird direkt daneben der Text "Freeware Tools & Fun Stuff" eingeblendet. Ich will den DIV Container aber an der absoluten Position: Top: 0px; Left: 0px; mit weißem Hintergrund haben. Aber wenn ich das Stylesheet so abändere, passiert garnix mehr: Code:
A .Info |
1. visibility brauchst du hier eigentlich nicht, display genügt.
2. Innerhalb eines a-Tags darf kein div-Tag stehen, dafür solltest du ein span verwenden. Die eingeblendete Info ist dann Bestandteil des Links, nicht vergessen. Kann man sich das online ansehen (das was du gemacht hast, nicht das von css4you)? Oder zumindest den ganzen Code der Seite? EDIT: Uiha! Das Beispiel von css4you ist ja interessant. aber die haben auch spans verwendet... EDIT2: DIe haben das mit visibility gemacht, dafür ohne display. Geht zumindest in deren Fall auch. |
ed: (@Sefiroth
Dein Beispiel funktioniert im Firefox, aber nicht im IE6, oder funktioniert er in beiden Browsern nicht? Wenn es bloß nicht im IE6 funktioniert, schreib doch bitte mal zusätzlich Code:
a:hover {background-position: 0 0} Nun anders? ) ed: stopp. Ich sehe mir gerade deine Seite an. Wenn du diese "modernisieren" möchtest, wäre es dann nich heute ein guter Tag, um auf Frames, Tabellen und Spacer.gif's zu verzichten? Wenn du mit CSS anfängst, könntest du ein horizontales Menü hier im Tutorial 4 mal Bisen für Bissen durchkauen: http://css.maxdesign.com.au/listutorial/index.htm und wenn alles klar ist, hat diese Seite eine Menge an schönen horizontalen Menüs, die auf diese Techniken aufbauen. |
Danke schonmal für die schnellen Antworten.
@E|H: zu 1.) Danke, gut zu wissen :D zu 2.) Aber im Tutorial steht oben drüber, das man SPANs oder DIVs nehmen kann. Habe es auch schon mit DIVs ausprobiert und keinen Unterschied festgestellt... Werde aber -Dir zuliebe- SPANs verwenden. zum Rest) Ich kann den gesamten Code der Seite schlecht hier posten, da ich Das Menü mit PHP erzeuge (daher könnte der HTML Quelltext auch etwas hingeklatscht aussehen) und dann in die Main.php mit include einfüge. Dazu kommt noch ein seperates Stylesheet... Ich werde aber gleich noch ein vereinfachtes Beispiel unter diesen Beitrag packen. -- @IChao: Danke für den Tip. Mit dieser zusätzlichen Zeile im Stylesheet funzt es !!! Kannst Du mir sagen, warum man diese seltsame Einstellung benötigt? Das Ergebnis ist jedenfalls (zumindest in nächster Zeit) unter http://labor.dark-sun.de/ zu bewundern. Das Layouten mit Tabellen war mir schon immer ein Greuel... Aber man wusste es früher ja nicht besser... :cry: Die neue Seite (http://labor.dark-sun.de) wird jedenfalls durch drei DIV Container aufgebaut. Ist wirklich wesentlich einfacher. Sobald ich die Seite fertig habe, mache ich das alte www.dark-sun.de platt... Frames verwende ich schon lange nicht mehr für's Layout. Allerings nehme ich gerne eine Frameseite als index.php (bzw .html) und gebe Ihr als einziges Frame meine Hauptseite. Dadurch bleibt in der Adressleiste des Browsers immer schön http://www.dark-sun.de stehen und nicht etwa http://www.dark-sun.de/Downloads/Ver...upertools.html :D --- Zurück zum eigentlichen Thema: Es funzt jetzt und damit die Nachwelt auch was davon hat, hier einmal eine vereinfachte Form der Problematik samt Lösung: Die folgende HTML Seite enthält einen Link. Fährt man mit der Maus darüber, erscheint an einer festgelegten Position ein farblich hinterlegter Bereich mit einem beliebigem Text drin - ganz ohne Java. Code:
<html><head> Ich danke Euch für die schnelle Hilfe!!! |
Zitat:
http://www.satzansatz.de/cssd/pseudocss.html#hoverdesc Mit background-position erzwinge ich beim IE ein Neuzeichnen des Bereiches. IE weiß nun, dass beim hovern was passiert. Erst jetzt guckt sich IE die Regeln an, die den "gehoverten" Zustand zugehören. zwischen a {...} und a:hover .info {} fehlt dem IE einfach ein klarer Gedanke. Grüße |
Neue Links in Info-Box
Hallo,
Ich hätte auch noch eine Frage zu dem ganzen. Wie kann ich denn in der erscheinenden Box neue Links einsetzen? Geht das überhaupt? Ich frage deshalb, weil ich das ganze dann als Navigation verwenden möchte. Z.B. ein Link Sonstiges und bei hover erscheint darunter die Info-Box mit den Links auf Impressum und Kontakt oder so. Ist das so überhaupt zu realisieren? Vielen Dank im Voraus Johannes |
Alle Zeitangaben in WEZ +2. Es ist jetzt 15:37 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023