[js+css] layer positioneren t.o.v. tekstvak - Softwareontwikkeling

woensdag 21 april 2004 10:58

Acties:

Verwijderd

Topicstarter

http://www.autopark.nl/positie_test.html

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function toggle(id){
   theLayer = document.getElementById(id);  
   theLayer.style.display = (theLayer.style.display == 'block') ? 'none' : 'block';
   theLayer.style.visibility = (theLayer.style.visibility == 'hidden') ? 'visible' : 'hidden';   
}
//-->
</script>
<style type="text/css">
<!--
#b{
   clear: both;
   width: 400px; 
   height: 100px; 
   z-index: 1; 
   overflow: hidden;
   background-color: #006600; 
   border:1px solid #000000; 
}
-->
</style>
</head>

<body>
<form name="form" method="post" action="">
  <table width="400" border="1" cellspacing="1" cellpadding="5">
    <tr>
      <td width="100">100 pixels </td>
      <td width="200">200 pixels</td>
      <td width="100">100 pixels </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="text" name="a" id="a" style="width: 50px;"><div id="b" style="position:absolute; visibility: hidden;">hallo</div></td>
    </tr>
    <tr>
      <td><a href="javascript:void(0);" onClick="toggle('b');">toggle</a></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

als je op 'toggle' klikt, dan wordt er een groene layer getoond.
Nu wil ik deze layer netjes onder het tekstvak uitgelijnd krijgen met css.
Hoe krijg ik dit nu voor elkaar?
Ik heb me suf lopen zoeken (waarschijnlijk met mijn neus!), maar ik kan het dus niet vinden.

Ik heb de layer op position:relative geprobeerd, maar dan wordt de tabel-layout verpest. (ja ik wil nu even met een tabel werken en niet met divs -> niet daarover discuzeuren

)

[ Voor 82% gewijzigd door Verwijderd op 21-04-2004 10:59 ]

woensdag 21 april 2004 11:00

Acties:

André

Analytics dude

Zet je TD op position relative en dan de div op position absolute, dan positioneert hij hem vanaf de TD.

Daarna kun je met top en left de rest doen.

[ Voor 20% gewijzigd door André op 21-04-2004 11:00 ]

woensdag 21 april 2004 11:11

Acties:

Verwijderd

Topicstarter

Ongelooflijk

Je moet het even weten! Thanks!

Is eigenlijk nog niet wat ik precies wil

De layer moet t.o.v. het tekstvak worden gepositioneerd en niet van de td.
De td staat namelijk niet in de uiteindelijke javascript-functie waarvoor ik dit wil gebruiken.
Die functie creëert een tekstvak en de layer.

simpel opgelost:
Door een een div-vak om het tekstveld en layer heen te zetten.

dus de code is geworden:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function toggle(id){
   theLayer = document.getElementById(id);  
   theLayer.style.display = (theLayer.style.display == 'block') ? 'none' : 'block';
   theLayer.style.visibility = (theLayer.style.visibility == 'hidden') ? 'visible' : 'hidden';   
}
//-->
</script>
<style type="text/css">
<!--
#b{
   clear: both;
   margin: 0px;
   width: 400px; 
   height: 100px; 
   z-index: 1; 
   overflow: hidden;
   background-color: #006600; 
   border:1px solid #000000; 
   top: 25px;
   left: 0px;
}
-->
</style>
</head>

<body>
<form name="form" method="post" action="">
  <table width="400" border="1" cellspacing="1" cellpadding="5">
    <tr>
      <td width="100">100 pixels </td>
      <td width="200">200 pixels</td>
      <td width="100">100 pixels </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><div style="position:relative; padding: 0px; margin: 0px;"><input type="text" name="a" id="a" style="width: 50px;"><div id="b" style="position:absolute; visibility: hidden;">hallo</div></div></td>
    </tr>
    <tr>
      <td><a href="javascript:void(0);" onClick="toggle('b');">toggle</a></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

[ Voor 147% gewijzigd door Verwijderd op 21-04-2004 11:25 ]

donderdag 22 april 2004 12:13

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op 21 april 2004 @ 11:11:
Ongelooflijk Je moet het even weten! Thanks!

Is eigenlijk nog niet wat ik precies wil
De layer moet t.o.v. het tekstvak worden gepositioneerd en niet van de td.
De td staat namelijk niet in de uiteindelijke javascript-functie waarvoor ik dit wil gebruiken.
Die functie creëert een tekstvak en de layer.

Even een paar korte toevoegingen: _{wellicht iets te laat}

• Ik zou niet met top en left werken, aangezien je nu een afhankelijkheid op de hoogte van je input inbouwt. Beter is een <br> toe te voegen achter je input-tag, zodat het groene tekst-vak altijd eronder verschijnt (ongeacht de hoogte).

• Probeer die inline styles zoveel mogelijk te vermijden. Je kan de opmaak centraal bijhouden en nu ga je die styles alsnog versplinterd gebruiken in je pagina's.

• Waarom gebruik je deze regel?

code:

1	theLayer.style.display = (theLayer.style.display == 'block') ? 'none' : 'block';

• Je toggle functie zou ik als volgt hanteren:

code:

function toggle(id){
   theLayer = document.getElementById(id).style;
   theLayer.visibility = (theLayer.visibility == 'hidden' || theLayer.visibility == '') ? 'visible' : 'hidden';
}

Hierdoor wordt de functie ook de eerste keer goed aangeroepen, terwijl je style niet inline staat.

Algemene tip: probeer je eens te verdiepen in xHTML, want een pagina als deze kan je makkelijk valid maken

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 22 april 2004 12:23

Acties:

Verwijderd

Topicstarter

Die functie werkt prima hoor ... geen problemen mee in ieder geval.

Waarom ik dat erbij had staan? ehm, was nog een overblijfsel van een oud script dat een <tr> moest togglen

Over de inline styles:
dit was even snel een proefscriptje,
in mijn uiteindelijke script is dat allemaal netjes opgeruimd natuurlijk.

[ Voor 30% gewijzigd door Verwijderd op 22-04-2004 12:26 ]

donderdag 22 april 2004 12:26

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op 22 april 2004 @ 12:23:
Die functie werkt prima hoor ... geen problemen mee in ieder geval.

Waarom ik dat erbij had staan? ehm, was nog een overblijfsel van een oud script dat een <tr> moest togglen

Plaats al je css eens centraal ipv inline

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 22 april 2004 12:27

Acties:

Verwijderd

Topicstarter

Zie 'edit'-post hierboven