Tabel óver plaatje; achtergrondkleur valt weg - Softwareontwikkeling

zaterdag 26 maart 2005 16:16

Acties:

Topicstarter

Hallo,

ik probeer een website te maken, waarop een plaatje staat, en als je over bepaalde delen van het plaatje gaat met je muis, dan moet er in een 'popup' informatie over komen te staan. Die popup bestaat uit een div die 'onmouseover' zichtbaar wordt en 'onmouseout' weer onzichtbaar. In die div staat een table met de informatie

Het probleem is dat de tekst in de table wel over het plaatje heen komt, maar de achtergrondkleur achter het plaatje. Daardoor is de tekst niet goed leesbaar; er staat immers een plaatje achter.

Weet iemand een manier om deze tekst op een witte of egaal gekleurde ondergrond te laten verschijnen? Bijvoorbeeld door de bgcolor eroverheen te laten komen, of een wit plaatje achter de tekst te laten verschijnen of iets dergelijks?

Op deze site vind je een voorbeeld waar duidelijk te zien is hoe de tekst vóór, maar de achtergrondkleur áchter het plaatje verschijnt.

Alvast bedankt,
Diederik

zaterdag 26 maart 2005 16:19

Acties:

André

Analytics dude

Zet de z-index van de popup hoger

zaterdag 26 maart 2005 16:55

Acties:

diederik77

Topicstarter

André schreef op zaterdag 26 maart 2005 @ 16:19:
Zet de z-index van de popup hoger

Goeie tip, ik had nog nooit van z-index gehoord. Ik heb ff een uitleg erover gelezen, en het toegepast met een text/css in de head. De img heb ik in een div gezet met z-index -10, en de popup-div heb ik z-index 5 gegeven.

Maar helaas werkt het nog niet

Doe ik het goed met z-index? Of werkt het gewoon niet voor de bgcolor?

zaterdag 26 maart 2005 17:05

Acties:

Willem

Misschien helpt het als je wat sourcecode neerplempt hier.

Motor onderhoud bijhouden

zaterdag 26 maart 2005 17:13

Acties:

Sendy

En is zie aan je voorbeeld helemaal niet wat er nu mis is. Misschien komt dat omdat ik een goede browser gebruik. Misschien kan je een plaatje tekenen dat aangeeft wat je nu eigenlijk wilt?

zaterdag 26 maart 2005 17:17

Acties:

André

Analytics dude

willem169 schreef op zaterdag 26 maart 2005 @ 17:05:
Misschien helpt het als je wat sourcecode neerplempt hier.

Er staat een link in de TS

En voor de TS, wat dacht je hier van:

code:

<html>
<head>
  <title>TEST</title>
  <style type="text/css">
    #d1 {
      width: 250px;
      height: 150px;
      position: absolute;
      border: 5px solid #00FF00;
      font-weight: bold;
      vertical-align: middle;
      z-index: 15;
      top: 60px;
      left: 10px;
      background: white;
    }

    #d2 {
      width: 250px;
      height: 150px;
      position: absolute;
      border: 5px solid #00FF00;
      font-weight: bold;
      vertical-align: middle;
      z-index: 15;
      background: white;
    }

    #d3 {
      z-index: 1;
    }
  </style>

  <script type="text/javascript">
    function openNu(nummer)
    {
      document.getElementById(nummer).style.visibility = "visible";
    }

    function sluit(nummer)
    {
      document.getElementById(nummer).style.visibility = "hidden";
    }
  </script>

</head>
<body>
  <p><a onmouseover="openNu('d1')" onmouseout="sluit('d1')">Kom hier om 1 te openen</a></p>
  <p><a onmouseover="openNu('d2')" onmouseout="sluit('d2')">Kom hier om 2 te openen</a></p>

  <div id="d3">[img]"test.jpg"[/img]</div>

  <div id="d1" style="visibility: visible; margin:300 0 0 100;"> 
    <p><a onclick="sluit('d1')">Sluit vanzelf wel</a></p><p>Dit is venster 1</p>
  </div>

  <div id="d2" style="visibility: hidden; margin:-150 0 0 100;">
    <p><a onclick="sluit('d2')">Sluit vanzelf wel</a></p><p>Dit is venster 2</p>
  </div>

</body>
</html>

[ Voor 19% gewijzigd door André op 26-03-2005 17:40 ]

zaterdag 26 maart 2005 17:28

Acties:

crisp

Devver

Pixelated

diederik88 schreef op zaterdag 26 maart 2005 @ 16:55:
[...]

Goeie tip, ik had nog nooit van z-index gehoord. Ik heb ff een uitleg erover gelezen, en het toegepast met een text/css in de head. De img heb ik in een div gezet met z-index -10, en de popup-div heb ik z-index 5 gegeven.

Maar helaas werkt het nog niet
Doe ik het goed met z-index? Of werkt het gewoon niet voor de bgcolor?

Ik weet het niet helemaal zeker, maar volgens mij staat z-index alleen positieve integers toe.

Intentionally left blank

zaterdag 26 maart 2005 17:54

Acties:

diederik77

Topicstarter

Sendy schreef op zaterdag 26 maart 2005 @ 17:13:
En is zie aan je voorbeeld helemaal niet wat er nu mis is. Misschien komt dat omdat ik een goede browser gebruik. Misschien kan je een plaatje tekenen dat aangeeft wat je nu eigenlijk wilt?

Ik was vergeten het ook nog even in internet explorer te testen, en daar doet'ie het nu wel zie ik!

Dus nu moet ik dit nog voor andere browsers voor elkaar krijgen (ik gebruik zelf firefox). Maar dit is in elk geval al een stap vooruit

Ik zal hier nog ff een screenshot neerzetten van de foute situatie

crisp schreef op zaterdag 26 maart 2005 @ 17:28:
[...]
Ik weet het niet helemaal zeker, maar volgens mij staat z-index alleen positieve integers toe.

Ik heb er 0 van gemaakt, maar het werkt nog steeds niet.

zaterdag 26 maart 2005 22:19

Acties:

Sendy

Oh, nu snap ik het. Het plaatje van het oranje blad staat voor het groene boxje; en de tekst staat in dat groene boxje.

zondag 27 maart 2005 15:37

Acties:

SuperRembo

diederik88 schreef op zaterdag 26 maart 2005 @ 17:54:
[...]

Ik heb er 0 van gemaakt, maar het werkt nog steeds niet.

Het helpt als je 't binnen de attribute zet.

HTML:

1	<div id="1" style="visibility:visible; margin:-300 0 0 100" z-index:2>

HTML:

1	<div id="div1" style="visibility:visible; margin:-300px 0 0 100px; z-index:2">

Een id mag trouwens niet net een cijfer beginnen.

[ Voor 10% gewijzigd door SuperRembo op 27-03-2005 15:38 ]

| Toen / Nu