zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mit Maus auf einen Link dann soll Layer verschwinden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.08.2006, 23:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 6
itss befindet sich auf einem aufstrebenden Ast
Standard Mit Maus auf einen Link dann soll Layer verschwinden

Hallo,

folgendes Problem:

Ich sobald die Maus auf einen bestimmten Link kommt, das ein Layer eingeblendet ist. Und wenn ich den Link mit der Maus wieder verlasse, will ich das der Layer wieder ausgeblendet wird.


Geht das überhaupt mit CSS?


Danke für Antworten

Gruß Sascha
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.08.2006, 23:16
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Klar, im Link-Text befindet sich weiterer Text in einem <span>-Tag (natürlich alles innerhalb von <a></a>), der im Link-"Normalzustand" per display: none; nicht zu sehen ist. Bei Hovern mit der Maus bekommt a:hover span ein display: block; mit allen weiteren Angaben und wird absolut positioniert angezeigt, wo es Dir paßt Es muß natürlich kein Text enthalten sein, sondern kann z.B. auch eine Hintergrundgrafik enthalten (evtl. preloaden, per position: absolute; "im Nirvana").

Wenn Du in Mozilla & Co soweit bist, wird der IE evtl. noch Schwierigkeiten machen, aber das ist dann auch leicht behoben (wohlgemerkt alles komplett ohne JS).

EDIT: Das funktioniert übrigens wirklich "überall", sogar im IE 5.0, kann also wirklich ohne Weiteres eingesetzt werden, ohne daß manchen Nutzern Inhalte bzw. Effekte vorenthalten bleiben.

Geändert von heiko_rs (02.08.2006 um 23:36 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2006, 00:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 6
itss befindet sich auf einem aufstrebenden Ast
Standard

schon mal danke, nur leider verstehe ich das nicht so richtig. Bin leider eher so der anfänger
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2006, 00:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Mal komplett auf's Grundlegende reduziert: Du hast das Markup

Code:
<a href="#">Hier mit der Maus drüberfahren <span>dann erscheint dieser Text.</span></a>
Den ersten Teil des Textes sieht man immer (als normalen Link-Text). Der zweite Teil wird per CSS "unsichtbar" gemacht:

Code:
a span {
	display: none;
	}
Wenn Du dann mit der Maus über den Link fährst, kommt die Pseudoklasse "hover" ins Spiel; dann wird der Zusatztext so angezeigt, wie nachfolgend per CSS festgelegt:

Code:
a:hover span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	}
Diese CSS-Regel bewirkt Folgendes: Sobald Du mit der Maus über den Link-Text fährst, erscheint der Zusatztext ganz oben links im Browserfenster. Position und Aussehen des Zusatztextes kannst Du mit unzähligen weiteren Eigenschaften beliebig bestimmen.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.08.2006, 11:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 6
itss befindet sich auf einem aufstrebenden Ast
Standard

ahhh danke jetzt habe ich verstanden.

Danke Schön
Mit Zitat antworten
  #6 (permalink)  
Alt 03.08.2006, 11:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 6
itss befindet sich auf einem aufstrebenden Ast
Standard

leide habe ich gerade festgestellt das das bei mir nicht im Internet Explorer geht das ist mein Quellcode:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
a span {
	display: none;
	}
a:hover span {
	display: block;
	position: absolute;
	/*left: 0;
	top: 0;*/
	}
-->
</style>
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="6%" bgcolor="#074B46"><a href="#">Menu1<span>
    <div id="Layer1" style="position:relativ; width:200px; height:115px; z-index:1"><table width="196" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#074B46">
    <td width="196">Test123</td>
  </tr>
  <tr bgcolor="#074B46">
    <td>est123</td>
  </tr>
  <tr bgcolor="#074B46">
    <td>test123</td>
  </tr>
  <tr bgcolor="#074B46">
    <td>test123</td>
  </tr>
</table></div></span></a></td>
    <td width="51%" bgcolor="#074B46">kjg</td>
    <td width="11%" bgcolor="#074B46">kjgkhg</td>
    <td width="11%" bgcolor="#074B46">kjgkhg</td>
    <td width="10%" bgcolor="#074B46">kjgkjg</td>
    <td width="11%" bgcolor="#074B46">kjgkhg</td>
  </tr>
</table>
</body>
</html>
gibt es eine möglichkeit das zum laufen zu bringen
Mit Zitat antworten
  #7 (permalink)  
Alt 03.08.2006, 12:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von itss
gibt es eine möglichkeit das zum laufen zu bringen
Da muss ich hart sagen: Nein, das wirst du neu schreiben müssen.

Ich weiss, es ist als Anfänger schwer, aber bevor du solche CSS-Hover-Spielereien machst musst du dich zuerst mit den Grundlagen von HTML beschäftigen. Dazu gehört, das du lernen musst, wie HTML aufgebaut wird. Unter anderem darf ein Inline-Element (a, span) nämlich keine Block-Elemente (div, table, etc.) enthalten.

Offensichtlich willst du ein Menü erstellen. Schau Dir dazu folgendes an: http://htmldog.com/articles/suckerfish/dropdowns/

Aber wie gesagt ohne Basiswissen wird das schwer. Da solltest du Dir ein Tutorial durcharbeiten, z.B. http://htmldog.com/guides/ oder, wenn nicht auch nicht so gut, aber in Deutsch: http://de.selfhtml.org/

Robin
Mit Zitat antworten
  #8 (permalink)  
Alt 03.08.2006, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 6
itss befindet sich auf einem aufstrebenden Ast
Standard

aber im Firefox geht das doch auch
Mit Zitat antworten
  #9 (permalink)  
Alt 03.08.2006, 13:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von itss
aber im Firefox geht das doch auch
Das liegt daran, dass der FF zufällig richtig "rät" was du mit einem falschen Code willst.

Robin
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.08.2006, 13:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 6
itss befindet sich auf einem aufstrebenden Ast
Standard

Ok danke

ich habe mir jetzt mal das Menü von Sucherfish angeguckt. Und ich habe bei den Hauptpunkten die Breitweggenonnen, da ich manche langen name habe und wenn ich alle auf diese breite setze dann passt das nicht auf die Seite, aber wie kann ich den Abstand zwischen den einzelnen Menü Punkten machen?
Mit Zitat antworten
Sponsored Links
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
clearen im 21 Jhr. Muamicus CSS 23 14.12.2010 20:50
ul richtig zentrieren Muamicus CSS 23 14.12.2010 19:28
Definitionsliste in einer Floatumgebung *pi CSS 11 07.01.2009 19:34
Ständig wechselnde Bilder, Werbung Vybsi (X)HTML 17 25.01.2008 00:00
CSS Navigationsproblem thesecretboy CSS 0 12.04.2007 09:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:27 Uhr.