CSS – Positioning

@phantom007Aug 20.2008

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

to post a comment

CSS

@CentauriAug 20.2008 — #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.

@phantom007authorAug 20.2008 — #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.[/QUOTE]

This is my code

[code=html]
 <!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>
 
 [/code]

@CentauriAug 20.2008 — #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.

CSS – Positioning

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS – Positioning

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴