[Gelöst] [CSS] Problem mit Hover-Box

Chr!s · 27.06.2005, 12:11

Hallo,
folgendes Problem:
Derzeit programmiere ich an dem Profil-System für meine neue Community. In diesem steht ein Link mit der Beschreibung "Bild anzeigen". Wenn man mit der Maus drüberfährt (oder klickt, onclick=...) soll also das Bild erscheinen, sobald man mit der Maus von dem Link geht soll es wieder verschwinden.

Das klappt auch, nur leider nicht nach meinen Wünschen. Wenn sich das Bild "aufklappt", wird der Inhalt (welcher links von dem Bild in einer Tabelle steht) nach unten verschoben.

Code:

#container a {
  color: #000;
  text-decoration: none;
}
#container a .box {
  display: none;
}
#container a:hover .box {
  width: 200px;
  display: inline;
  border: 0;
}

Und der HTML-Code:

Code:

   <div id="container">
    <a href="#">Bild anzeigen
     <span class="box">[img]<?=$pic?>[/img]record['username']?>" /></span></a>
  </div>

Beispiel hab ich leider keins, dafür 2 Screenshots:
http://sag-ich-dir.net/v4/01.jpg
http://sag-ich-dir.net/v4/02.jpg

Wie kann ich diesen "Fehler" beheben?

27.06.2005, 12:14

Wie hast Du das denn gemacht? Wie sieht die CSS aus?

Chr!s · 27.06.2005, 12:18

Oben steht die CSS.. Hatte sie nur vergessen, hab das ganze derweilen schon bearbeitet gehabt..

27.06.2005, 12:20

hmm, poste mal den ganzen html-code vom profil.
so können wir auch nur raten...

Chr!s · 27.06.2005, 12:24

Okay.. Dann hier mal der ganze HTML-Code (ist ein bisschen lang, habe aber nur die betreffende Stelle kopiert..)

Code:

<style type="text/css">
#container {
}
#container a {
  color: #000;
  text-decoration: none;
}
#container a .box {
  display: none;
}
#container a:hover .box {
  display: inline;
  border: 0;
  width: <?=$size['0']?>px;
  height: <?=$size['1']?>px;
}
</style>
<table style="width: 100%; border: 0; empty-cells:show; float:left; vertical-align:top; " align="center">
 <tr>
  <td style="width: 50%; text-align:left">

   <table style="width:100%; border: 0; empty-cells:show" align="left">

    <tr>
     <td style="width: 50%; font-weight:bold">Username:</td>
     <td style="width: 50%;"><?=$mysql->record['username']?></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold">Geburtstag:</td>
     <td style="width: 50%;"><?=$mysql->record['bdayday'].'.'.$mysql->record['bdaymonth'].'.'.$mysql->record['bdayyear']?></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold">Alter:</td>
     <td style="width: 50%;"><?=$age?></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold">Geschlecht:</td>
     <td style="width: 50%;"><?=$gender?></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold">Beziehung:</td>
     <td style="width: 50%;"><?=$family?></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold"></td>
     <td style="width: 50%;"></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold">Dabei seit:</td>
     <td style="width: 50%;"><?=date("d.m.Y", $mysql->record['signup']) ?></td>
    </tr>

    <tr>
     <td style="width: 50%; font-weight:bold">Der User ...</td>
     <td style="width: 50%;"><?php echo ($mysql->record['online'] == TRUE) ? 'ist online.' : 'war zuletzt am '.date("d.m.Y \u\m H:i \U\h\\r", $mysql->record['lastaction']).' online.'?></td>
    </tr>
<!--
    <tr>
     <td style="width: 50%; font-weight:bold">Geworben von:</td>
     <td style="width: 50%;"><?=$ref?></td>
    </tr>
-->
   </table>

  </td>
  <td style="width: 50%; text-align:right; vertical-align:top">

   <div id="container">
    <a href="#">Bild anzeigen
     <span class="box">[img]<?=$pic?>[/img]record['username']?>" /></span></a>
  </div>
   <?php
   if($is_owner == TRUE) echo '
[Bild hochladen]';
   ?>
  </td>
 </tr>
</table>

27.06.2005, 12:24

Guck Dir das hier mal an, das funktioniert ganz prima, da kannst Du Grafiken einbinden und Dich so richtig austoben, alles kein Problem.

Chr!s · 27.06.2005, 12:26

Aah.. z-index ist glaub ich das ich bruach.. Hatte ich ganz vergessen.. Danke PaterNoster, werd ich dann gleich mal probieren..

Chr!s · 27.06.2005, 12:44

Okay, habs nun gelöst. Nur eine kleine Fragen noch (wegen dem IE

):

Code:

<style type="text/css">
<!--
#box a {
     color: #000;
}

#box a:hover {
     background: #fff;
}

#box a span {
     display:none;
}

#box a:hover span {
     position:absolute; top:100px; right:100px; z-index:3;
     display:block;
     width: <?=$size['0']?>px;
     height: <?=$size['1']?>px;
}
-->
</style>

Ist jetzt meine CSS.. Klappt auch alles wie ich es haben. will. Nur:
Lass ich

Code:

#box a:hover {
     background: #fff;
}

weg, oder ersetze das backgronud: #fff; durch z.b. color: #fff, oder irgend einen anderen Wert, geht das ganze CSS im IE nicht mehr, d.h. beim Hover erscheint die Box nicht mehr..

An was könnte das denn liegen?

27.06.2005, 12:47

UI, kann ich so nicht sagen, habe hier grade keinen IE zur Verfügung, kann das also nicht nachvollziehen...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Timestamp problem	phrain	PHP Tipps 2008	2	04.04.2008 09:41
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
[CSS] div-Layer Problem	Juuro	HTML, Usability und Barrierefreiheit	1	03.04.2006 11:18
[CSS] Problem mit float	I-Spy	HTML, Usability und Barrierefreiheit	3	31.03.2006 17:08
[CSS] Anchor Problem beim validieren	baba_der_grosse	HTML, Usability und Barrierefreiheit	5	21.02.2006 16:43
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
[Erledigt] linktext - hover Problem		HTML, Usability und Barrierefreiheit	1	18.10.2005 03:46
[CSS] Problem mit Dashed Borders !	nsane	HTML, Usability und Barrierefreiheit	9	28.01.2005 21:53
[CSS] Table und :hover ???		HTML, Usability und Barrierefreiheit	16	21.01.2005 15:17
[Erledigt] Problem bei Massenmails versenden mit der Funktion mail		PHP-Fortgeschrittene	3	19.01.2005 13:36
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

27.06.2005, 12:11
Chr!s Erfahrener Benutzer Registriert seit: 27.10.2004 Beiträge: 1.093 PHP-Kenntnisse: Fortgeschritten	[Gelöst] [CSS] Problem mit Hover-Box Hallo, folgendes Problem: Derzeit programmiere ich an dem Profil-System für meine neue Community. In diesem steht ein Link mit der Beschreibung "Bild anzeigen". Wenn man mit der Maus drüberfährt (oder klickt, onclick=...) soll also das Bild erscheinen, sobald man mit der Maus von dem Link geht soll es wieder verschwinden. Das klappt auch, nur leider nicht nach meinen Wünschen. Wenn sich das Bild "aufklappt", wird der Inhalt (welcher links von dem Bild in einer Tabelle steht) nach unten verschoben. Code: #container a { color: #000; text-decoration: none; } #container a .box { display: none; } #container a:hover .box { width: 200px; display: inline; border: 0; } Und der HTML-Code: Code: <div id="container"> <a href="#">Bild anzeigen <span class="box">[img]<?=$pic?>[/img]record['username']?>" /></span></a> </div> Beispiel hab ich leider keins, dafür 2 Screenshots: http://sag-ich-dir.net/v4/01.jpg http://sag-ich-dir.net/v4/02.jpg Wie kann ich diesen "Fehler" beheben?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.06.2005, 12:14
Gast Beiträge: n/a	Wie hast Du das denn gemacht? Wie sieht die CSS aus?

27.06.2005, 12:18
Chr!s Erfahrener Benutzer Registriert seit: 27.10.2004 Beiträge: 1.093 PHP-Kenntnisse: Fortgeschritten	Oben steht die CSS.. Hatte sie nur vergessen, hab das ganze derweilen schon bearbeitet gehabt..

27.06.2005, 12:20
Gast Beiträge: n/a	hmm, poste mal den ganzen html-code vom profil. so können wir auch nur raten...

27.06.2005, 12:24
Gast Beiträge: n/a	Guck Dir das hier mal an, das funktioniert ganz prima, da kannst Du Grafiken einbinden und Dich so richtig austoben, alles kein Problem.

27.06.2005, 12:26
Chr!s Erfahrener Benutzer Registriert seit: 27.10.2004 Beiträge: 1.093 PHP-Kenntnisse: Fortgeschritten	Aah.. z-index ist glaub ich das ich bruach.. Hatte ich ganz vergessen.. Danke PaterNoster, werd ich dann gleich mal probieren..

27.06.2005, 12:44
Chr!s Erfahrener Benutzer Registriert seit: 27.10.2004 Beiträge: 1.093 PHP-Kenntnisse: Fortgeschritten	Okay, habs nun gelöst. Nur eine kleine Fragen noch (wegen dem IE ): Code: <style type="text/css"> <!-- #box a { color: #000; } #box a:hover { background: #fff; } #box a span { display:none; } #box a:hover span { position:absolute; top:100px; right:100px; z-index:3; display:block; width: <?=$size['0']?>px; height: <?=$size['1']?>px; } --> </style> Ist jetzt meine CSS.. Klappt auch alles wie ich es haben. will. Nur: Lass ich Code: #box a:hover { background: #fff; } weg, oder ersetze das backgronud: #fff; durch z.b. color: #fff, oder irgend einen anderen Wert, geht das ganze CSS im IE nicht mehr, d.h. beim Hover erscheint die Box nicht mehr.. An was könnte das denn liegen?

27.06.2005, 12:47
Gast Beiträge: n/a	UI, kann ich so nicht sagen, habe hier grade keinen IE zur Verfügung, kann das also nicht nachvollziehen...