login  Naam:   Wachtwoord: 
Registreer je!
 Forum

css span code aanpassen

Offline San112 - 15/05/2015 13:58
Avatar van San112Nieuw lid Hallo,

Ik heb een css/ html code gevonden voor een mousover hover voor mijn agenda (gemaakt in een tabel). Alleen als ik met mijn muis over de datum ga verschijnt het tekstvak helemaal rechts.

Wat moet ik in onderstaande code veranderen om te zorgen dat mijn vak in de rechter bovenhoek van mijn cel verschijnt?

Css code:
span.dropt {border-top: ; background: ;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
margin: 20px; padding: 3px 3px 3px 3px;
border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;}
span.dropt span {position: absolute; left: -9999px;
margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;
border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {height:80px; background: #ffffff; z-index:6;}

html code:
<tr>
<td class="tg-031e"> <span class="dropt" title="Kreta"> 4 <span style="width:90px;" align="center"> Starbeach, Chersonisos. Kreta </span></span> </td>

Alvast bedankt! 

1 antwoord

Gesponsorde links
Offline Thomas - 15/05/2015 16:13
Avatar van Thomas Moderator Ik kan het gedrag wat jij beschrijft niet nabootsen met bovenstaande informatie. Heeft de tabel / de tabelrijen / de klasse tg-031e nog speciale stijlregels die dit gedrag kunnen veroorzaken (bijvoorbeeld een position-stijlregel op een hoger niveau)?

Heb je toevallig e.e.a. van span.dropt uitgeveegd? Want die stijlregels kloppen niet.

Ook declareer je regels dubbel, wat het geheel nogal onleesbaar maakt.

Het is redelijk onmogelijk om een puzzel op te lossen als je niet alle stukjes aanreikt.

---

Je geeft zelf precies aan wat je wilt, dan moet het niet zo moeilijk zijn om dit zo te maken? Je moet wel weten hoe positions werken. Als je position: absolute gebruikt, dan wordt er relatief gepositioneerd ten opzichte van het eerst bovengelegen element met position: relative. Je wilt je td-element (of td.tg-031e, net wat jij wilt) hiervan voorzien. Vervolgens wil je je element rechtsboven ophangen in je cel. Dit doe je met right: 0, top: 0.

Dan, het enige wat er moet gebeuren is de span tonen als er gehoverd wordt. Dat is -samen met de posities- het enige wat in de span.dropt:hover span class hoeft te staan. De rest van de opmaak kan in span.dropt.span.

Een proof-of-concept van het bovenstaande, in een opgeschoonde variant van jouw code wordt dan:
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <style type="text/css">
  4. td { position: relative; }
  5. span.dropt { }
  6. span.dropt span {
  7. display: none;
  8. width: 90px;
  9. height:80px;
  10. position: absolute;
  11. padding: 3px;
  12. border: 1px solid #000000;
  13. z-index: 6;
  14. background-color: #ffffff;
  15. }
  16. span.dropt:hover span { display: block; right: 0; top: 0; }
  17. </head>
  18.  
  19. <table width="200" border="1">
  20. <tr>
  21. <td class="tg-031e"><span class="dropt" title="Kreta"> 4 <span>Starbeach, Chersonisos. Kreta</span></span></td>
  22. </tr>
  23. </body>
  24. </html>

Je CSS kan (dus) een stuk schoner / korter / leesbaarder.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.231s