XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem: Positioniertes DIV bei Link HOVER (http://xhtmlforum.de/showthread.php?t=36395)

Sefiroth 06.08.2005 00:04

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
{
  visibility: hidden;
  display: none;
}

A:HOVER .Info
{
  visibility: visible;
  display: block;
}

HTML Code:
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
{
  visibility: hidden;
  display: none;
}

A:HOVER .Info
{
  visibility: visible;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 70px;
  background-color: white;
}

Kann mir jemand vielleicht weiterhelfen? Das wäre echt super!

E|H 06.08.2005 01:02

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.

IChao 06.08.2005 20:16

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}
zu deinen bisherigen Regeln dazu.

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.

Sefiroth 08.08.2005 01:18

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>
<title>Links mit zusätzlichen Informationen</title>

<style type="text/css">

a .info
{
        display: none;
}

a:hover {background-position: 0 0}

a:hover .info
{
        display: block;
        position: absolute;
        top: 250px;
        left: 250px;
        width: 320px;
        height: 75px;
        background-color: red;
        text-decoration: none;
        color: black;
}

</style>

</head>
<body>
<div>
Link<span class="info">Infotext</span>
</div>

</body>
</html>

Ich lasse das Beispiel noch eine Weile unter http://labor.dark-sun.de/Test.html online stehen.

Ich danke Euch für die schnelle Hilfe!!!

IChao 08.08.2005 07:54

Zitat:

Zitat von Sefiroth
Kannst Du mir sagen, warum man diese seltsame Einstellung benötigt?

IE6/Win hat eine völlig desolate Implementierung von Pseudo-Elementen und Pseudo-Klassen.
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

adler1860 10.08.2005 17:16

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