Zeigen und verstecken

Magerquark · 12.09.2007, 18:05

Folgendes möchte ich machen: Eine Reihe/Liste mit Bildern, die untereinander stehen. Zum einen sollen die Bilder Links sein und - das ist mein Problem - beim Überfahren mit der Maus soll neben dem Bild ein erklärender Text erscheinen.

Dabei gilt es mehrere Dinge zu beachten. Erstes Problem ist die Struktur. Ich hatte zuerst mit einer Definition-List gearbeitet, wobei ein Bild der Definition-Title war und der erklärende Text die Definition-Description. Das geht aber nicht, wenn man mit Hilfe von CSS und der Pseudoklasse :hover arbeiten möchte. Ich hatte mich nämlich zuerst mit JavaScript (genauer: Mootools) gequält, dort aber nichts gescheites gefunden.

Also bin ich zurück zu CSS gekommen und hier beim guten Eric Meyer gelandet. Er arbeitet mit SPANs. Gefällt mir nicht so recht. Deswegen bin ich auf DIVs ausgewichen, in denen das Bild ist (mit float: left; ) und der Text als Paragraphen, der display: none; hat und erst beim mit der Maus-Rüberrollen angezeigt wird.

Theoretisch klappt es, ist sogar valide

, aber aus mir nicht genauen Gründen gibt es beim Überfahren mit der Maus einen Monsterabstand unter dem Bild. Das mit der Farbe ist nur zu Anschauungszwecken. Und eigentlich sollte noch ein Abstand zwischen den Bildern sein...

Wo liegt der Fehler (s. Anhang - HTML mit integriertem CSS und einem Bild)? Bzw. wie könnte man das Anliegen sonst realisieren? Doch irgend wie mit JavaScript?

Danke im voraus
M

Adromir · 12.09.2007, 18:08

Versuch mal, daß du dem Paragraphen ein display:inline gibst..

Magerquark · 12.09.2007, 19:23

Boah, ich habe die falsche HTML-Datei angehängt. Wie peinlich... Hier mal die eigentliche Datei (Bild kann aus dem Anhang benutzt werden) - mit Deiner Inline-Idee, die leider nicht hilft...

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>Hhuh</title>
 <style type="text/css">
  div {
   margin-bottom: 10px;
   width: 500px;
   background-color: #9CFFE4;
  }
  hr{
   clear: left;
   background-color: #fff;
   height: 1px;
   color: #fff;
   border: none;
  }
  div img{
   float: left;
   margin-right: 10px;
  }
  div a p {display: none;}
  div a:hover p {
   display: inline;
   position: relative;
   background-color: #ccc; 
   top: -220px; 
   left: 300px; 
   width: 200px;
   padding: 0;
   margin: 0; 
   z-index: 100;
   color: #333; 
   font: small Verdana, sans-serif;
   text-decoration: none;
  }
 </style>

 </head>
 <body>

  <div>
   <a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="lego me" />
   <p>Lego<br />
   Selbstportr&auml;t<br />
   auf einer Seite generiert
   </p>
   </a>
  </div>
  <hr />
  <div>
   <a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="lego me" />
   <p>Lego (2)<br />
   Selbstportr&auml;t<br />
   auf einer Seite generiert
   </p>
   </a>
  </div>

</body>
</html>

Magerquark · 13.09.2007, 00:00

So, das Problem mit den Monsterabständen ist geklärt. Mir fiel auf, dass der Abstand, der unter den Bildern erzeugt wird, wenn man mit der Maus über ein Bild geht, ungefähr so hoch war, wie der des dann angezeigten Paragraphen. Also habe ich dem Paragraphen eine Höhe von 0 (Null) gegeben. Damit kommt es nun nicht mehr zu diesen "Hüpfern":

HTML-Code:

div a p {display: none;}

div a:hover p {
 display: block;
 position: relative;
 background-color: #ccc; 
 top: -210px; 
 left: 300px; 
 width: 200px;
 padding: 0;
 margin: 0; 
 z-index: 100;
 color: #333; 
 font: small Verdana, sans-serif;
 text-decoration: none;
 height: 0;
}

Bleiben zwei Probleme! 1.) Die Paragraphen erscheinen nicht in IE6 und kleiner. IE7 macht es *wunder*. Und 2.) Der Text im Paragraphen ist in Safari doch noch unterstrichen - was er aber gar nicht sein soll.

Am wichtigsten ist aber erst einmal Problem 1 - Wie bringe ich den blöden IEs bei, was ich will? Jemand eine schlaue Idee?

Adromir · 13.09.2007, 08:24

Ich glaube für den IE ist die Reihenfolge der Pseudoformate wichtig. Vieleicht schnallt er die Verschachtelung nicht korrekt.

Versuch es mal mit

Code:

a:link p, a:visited p {...}
a:hover p {...}

Es kann natürlich sein, daß der IE hier mal zufälligerweise fehlerintoleranter ist als der FF,
da die Verschachtelung <a><p></p></a> eigentlich nicht erlaubt ist, da hier ein Block- Element innerhalb eines Inlinelementes steht..

Magerquark · 13.09.2007, 12:42

Das kommt davon, wenn man mehrere Versionen vorliegen hat. Nicht nur, dass ich wie im ersten Post die falsche HTML angehängt habe, ich habe auch die falsche validiert.

Hast recht - ein Block- in einem Inline-Element ist nicht gut...

Hier mal die neue Syntax mit der CSS soweit. IE7 zeigt beim Überrollen des ersten Bildes nichts, beim zweiten den Text vom zweiten Bild, aber neben dem ersten und zu weit rechts...

IE6 ist tot und macht gar nichts...

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Hide and seek</title>
<style type="text/css">
 div {
  margin-bottom: 10px;
  width: 500px;
  background-color: #9CFFE4;
  border: 1px solid green;
  }
 hr{
  clear: left;
  background-color: #fff;
  height: 1px;
  color: #fff;
  border: none;
  }
 div img{
  float: left;
  margin-right: 10px;
  border: none;
  }
div p{
  margin: 0;
  padding: 0;
  }
div p a:link span {display: none;}
div p a:hover span {
  display: block;
  position: relative;
  background-color: #ccc; 
  top: -210px; 
  left: 300px; 
  width: 200px;
  padding: 0;
  margin: 0; 
  z-index: 100;
  color: #333; 
  font: small Verdana, sans-serif;
  text-decoration: none;
  height: 0;
  }
</style>
</head>
<body>

<div>
 <p>
  <a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="legomann" />
  <span>Legomann<br />
  Portr&auml;t<br />
  auf einer Seite generiert
  </span>
  </a>
 </p>
 <hr />
</div>
	
<div>
 <p>
  <a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="legomann" />
  <span>Legomann (2)<br />
  Portr&auml;t<br />
  auf einer Seite generiert
  </span>
  </a>
 </p>
 <hr />
</div>

</body>
</html>

Magerquark · 13.09.2007, 13:00

Okay. Habe beim img das float raus genommen. Jetzt klappt es in IE7. Aber IE6 bleibt weiterhin mucksch und zeigt nichts an. *argh*

HTML-Code:

div img{
 margin-right: 10px;
 border: none;
}

Adromir · 13.09.2007, 14:48

Die Verschachtelung beim CSS muss sein
div p a img

Wobei ich den Paragraphen bzw. den Div rausnehmen würde und da es ja eine Liste sein soll eben auch mit einer solchen arbeiten..

Magerquark · 13.09.2007, 20:18

Zitat:

Zitat von Adromir

Die Verschachtelung beim CSS muss sein
div p a img

Hö?

Das mit den DIVs und Ps habe ich tatsächlich noch einmal geändert. Wie gesagt, ich kam von einer DL und bin dann hin- und hergewechselt. Wollte (warum auch immer?) die SPANs nicht einbauen. Nun sind sie drin, jetzt kann man auch eine echte Liste draus machen. Klappen tut es im IE6 (und kleiner) aber immer noch nicht. Was ich nicht verstehe. Im Beispiel von Meyer klappt es doch auch!?

Hatte mal ein Bild durch ein transparentes Bild ersetzt, um zu sehen, ob mein SPAN unter dem Bild angezeigt wird - negativ. Es bleibt dabei, der HOVER erscheint nicht!

Hier der aktuelle Stand:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Hide and Seek</title>
<style type="text/css">
 #liste {
  margin: 0;
  width: 500px;
  background-color: #9CFFE4;
  border: 1px solid green;
  list-style: none;
  padding: 0;
  }
 #liste li{
  margin-bottom: 10px;
  background-color: #FFFE2B;
  }
 #liste li img{
  margin-right: 10px;
  width: 290px;
  height: 220px;
  border: none;
  }
 #liste li a span {display: none;}
 #liste li a:hover span {
  display: block;
  position: relative;
  background-color: #ccc; 
  top: -220px; 
  left: 300px; 
  width: 200px;
  padding: 0;
  margin: 0; 
  z-index: 100;
  color: #333; 
  font: small Verdana, sans-serif;
  text-decoration: none;
  height: 0;
  }
</style>
</head>
<body>

<ul id="liste">
 <li><a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="lego me" />
  <span>Lego<br />
  Selbstportr&auml;t<br />
  auf einer Seite generiert<br />
  </span></a></li>
  <li><a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="lego me" />
  <span>Lego (2)<br />
  Selbstportr&auml;t<br />
  auf einer Seite generiert
  </span></a></li>
</ul>
		
</body>
</html>

Seltsam alles... *hmm*

Magerquark · 14.09.2007, 14:13

Die Lösung ist da! - Vorweg: Ich habe noch einmal einiges über den Haufen geworfen.

Erster Lösungshinweis ist, dass der Blöd-IE 6 und kleiner einen "Anstoß" braucht, um den HOVER zu kapieren. Soll heißen, ein

HTML-Code:

#selector a:hover span {color: #ccc;}

klappt im Blöd-IE nicht. Der Junge stört sich an dem SPAN hinter dem HOVER. Ist eben ein wenig blöd, der Kleine... Deswegen muss man ihm eine kleine Starthilfe geben:

HTML-Code:

#selector a:hover {color: #ccc;}
#selector a:hover span {color: #ccc;}

Also erst einmal die HOVER-Anweisung ohne das SPAN. Dann klappt es!

Was allerdings Probleme aufwirft, das ist die Aktion mit dem display: none;. Da kommen wieder diese Monstersprünge beim Überfahren mit der Maus. Trotz meines height: 0; für das SPAN.

Doch dann fiel mir ein, dass ein Text/ ein Element, das man mit display: none; ausblendet, auch nicht für z.B. Screenreader erfassbar ist. Für die ist der Text schlicht nicht vorhanden.

Deshalb habe ich den Weg gewählt, den Text auch im Nicht-HOVER-Zustand anzuzeigen, aber die Farbe der Hintergrundfarbe anzugleichen. Das geht natürlich nur, wenn man den Platz hat und das Design keine komplizierten Muster aufweist! So ist der Text aber immer vorhanden, wenn auch im Nicht-HOVER-Zustand für uns Augen-Menschen nicht sichtbar.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Hide and Seek - Colour</title>
<style type="text/css">
 #liste {
  margin: 0;
  width: 500px;
  background-color: #FFF;
  border: 1px solid green;
  list-style: none;
  padding: 0;
  }
 #liste li{
  margin-bottom: 10px;
 }
 #liste li img{
  margin-right: 10px;
  width: 290px;
  height: 220px;
  border: none;
 }
 #liste li a span {
  display: block;
  position: relative;
  top: -220px; 
  left: 300px; 
  width: 200px;
  padding: 0;
  margin: 0; 
  z-index: 100;
  color: #FFF; 
  font: small Verdana, sans-serif;
  text-decoration: none;
  height: 0;
 }
 #liste a:hover {color: #333;} /*Starthilfe fuer den Bloed-IE*/
 #liste a:hover span{ color: #333;}
</style>

</head>
<body>

 <ul id="liste">
  <li><a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="lego me" />
  <span>Lego<br />
  Selbstportr&auml;tr<br />
  auf einer Seite generiert<br />
  </span></a></li>
  <li><a href="huh.html"><img src="lego.jpg" width="290" height="220" alt="lego me" />
  <span>Lego (2)<br />
  Selbstportr&auml;t<br />
  auf einer Seite generiert
  </span></a></li>
 </ul>
		
</body>
</html>

Hoffe, das hilft...