PDA

Click to See Complete Forum and Search --> : CSS - Positioning

cancer10
08-20-2008, 07:18 AM
Hi,

I have an HTML Button on my page and a <div> element (which contains some text), clicking on the button should display the <div> element just UNDER the button (no matter where the button is on the page)

is this something has to do with absolute positioning in CSS?

Please tell me the syntax (or example) for it.


Thanx
Centauri
08-20-2008, 07:24 AM
That depends a bit on what code you have that displays the div at the moment. If the div follows the button in the html, and is hidden and displayed using display:none and display:block, then it would naturally appear below the button.
cancer10
08-20-2008, 07:39 AM
That depends a bit on what code you have that displays the div at the moment. If the div follows the button in the html, and is hidden and displayed using display:none and display:block, then it would naturally appear below the button.

This is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>
<body>
<div id="mydiv">Text here..Text here..Text here..Text here..</div>
<p>&nbsp;</p>
<table width="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align="center"><input type="submit" name="Submit" value="Click Here..." /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>
Centauri
08-20-2008, 07:56 AM
First of all, what is the table for?..

Second, a submit button input needs to be within a form.

Thirdly, if the div is completely divorced from the button that displays it (and before it in the html), as well as not making sense semantically, you would not be able to position it relative to the button.

If the button is within a form, then the div can also be within that form following the button. A simple show/hide javascript attached to the button's onclick event can show the div.