zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem: Positioniertes DIV bei Link HOVER

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.08.2005, 00:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2005
Beiträge: 4
Sefiroth befindet sich auf einem aufstrebenden Ast
Standard 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 ). 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.08.2005, 01:02
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.08.2005, 20:16
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.08.2005, 01:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2005
Beiträge: 4
Sefiroth befindet sich auf einem aufstrebenden Ast
Standard

Danke schonmal für die schnellen Antworten.

@E|H:
zu 1.) Danke, gut zu wissen

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... 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

---

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!!!
Mit Zitat antworten
  #5 (permalink)  
Alt 08.08.2005, 07:54
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 10.08.2005, 17:16
Neuer Benutzer
neuer user
 
Registriert seit: 26.11.2004
Beiträge: 2
adler1860 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Link Problem mit dem Attribut Hover Faven CSS 4 14.10.2010 16:50
link hover soll weitere definierte links hovern Andreas1977 CSS 17 07.10.2009 23:03
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 18:25
inneres div soll äußeres div nach untern überlagern (Problem im Internet Explorer) Waldgeist CSS 6 14.02.2007 20:19
DIV / Hover -> Menü Problem snatch CSS 6 07.02.2007 16:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:45 Uhr.