CSS - Positioning

**phantom007** · Aug 20, 2008, 05:18

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

**AutisticCuckoo** · Aug 20, 2008, 05:38

The button and the div would have to have a common ancestor element with a position property other that static. Then the div element needs to have position:absolute and use the top, right, bottom and/or left elements to position it, relative to the common ancestor. You'll need to know the position of the button beforehand, though.

As for displaying the div after clicking a button, that's something you can't do with CSS. It will take JavaScript.

**phantom007** · Aug 20, 2008, 05:40

This is my code

HTML 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>

**AutisticCuckoo** · Aug 20, 2008, 06:10

You'll need to use JavaScript for this, since positioning and tables don't go too well together.

Pardon me for asking, but what the heck is all those table cells with non-breaking spaces for?!

**phantom007** · Aug 20, 2008, 07:09

Originally Posted by AutisticCuckoo

You'll need to use JavaScript for this, since positioning and tables don't go too well together.

Ok, but how? An example would be great.

Originally Posted by AutisticCuckoo

Pardon me for asking, but what the heck is all those table cells with non-breaking spaces for?!

Well, its just for me to understand how would the css/js work under such condition.

also, please note that its NOT a submit button but a normal HTML button.

**Bob Carologees** · Aug 20, 2008, 08:39

Shouldn't *really* be using tables for forms any way. It doesn't matter what type of button you have because in this instance it's going to be much easier to go for a pure javascript solution. If the div is a hidden div for an error message or something, why not just have it under the button to start with and have it's display property altered via JS. If it really has to be that dynamic you will have to take the div node and reposition it within the DOM on click.

I can see what Autistic was getting at, it might be doable but would be extremely fiddly, especially if you want other elements to flow around the div etc. I can't see any need for CSS here as this is something where JS should be taking over. (presentation layer/behaviour layer)

**phantom007** · Aug 20, 2008, 08:58

Can u provide an example plz?

Thanx

**AutisticCuckoo** · Aug 20, 2008, 10:03

I've moved this to the JavaScript forum, where you're more likely to get help with JavaScript-related questions.

**JimmyP** · Aug 20, 2008, 10:25

From your first post I've got the impression that you want a button with the following functionality: When the button is clicked, the next DIV in the DOM will be shown or hidden dependent on it's current state. i.e. if the DIV is set to display:none; then clicking the button will change it to display:block; Correct?

**AutisticCuckoo** · Aug 20, 2008, 11:23

Jimmy, there's the additional requirement that the DIV must be displayed right beneath the button, regardless of where on the page the button is located.

**phantom007** · Aug 20, 2008, 20:26

You are right AutisticCuckoo

**paul_wilkins** · Aug 20, 2008, 20:50

Place the script at the end of the body, just before the </body>.

Code html4strict:

<html>
<head>
</head>
<body>
...
<script src="script.js"></script>
</body>
</html>

Not only is this best practice for speeding up your web site, but it makes it a lot easier to attach events to page elements.

It is much easier to just move the div onto the end of the button. This can be achieved by appending the existing div, which will remove it from the old location and add it to the new one.

There is a standard pattern for this:

Code javascript:

if (el.nextSibling) {
	el.parentNode.insertBefore(newEl, el.nextSibling);
} else {
	el.parentNode.appendChild(newEl);
}

Here is the script that can be used with your example html code to do the job.

Code javascript:

// attach event
document.getElementsByName('Submit')[0].onclick = moveDivToButton;
 
// perform task
function moveDivToButton() {
	var div = document.getElementById('mydiv');
	if (this.nextSibling) {
		this.parentNode.insertBefore(div, this.nextSibling);
	} else {
		this.parentNode.appendChild(div);
	}
}

**phantom007** · Aug 20, 2008, 21:02

This does not work

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>
<script>
// attach event
document.getElementsByName('Submit')[0].onclick = moveDivToButton;
 
// perform task
function moveDivToButton() {
    var div = document.getElementById('mydiv');
    if (this.nextSibling) {
        this.parentNode.insertBefore(div, this.nextSibling);
    } else {
        this.parentNode.appendChild(div);
    }
}
</script>
</head>
<body>
<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..." /><div id="mydiv">Text here..Text here..Text here..Text here..</div>
</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>

**paul_wilkins** · Aug 20, 2008, 21:09

Place the script at the end of the body.

If you insist on placing it in the head then you'll need to use a technique to run the code after the page has loaded.

Code javascript:

window.onload = function () {
    ...
}

See http://developer.yahoo.com/performan...html#js_bottom about why placing scripts in the head is not a good idea.

**phantom007** · Aug 20, 2008, 21:10

Still no luck

Code HTML4Strict:

 
<!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>
<script>
// attach event
document.getElementsByName('Submit')[0].onclick = moveDivToButton;
 
// perform task
function moveDivToButton() {
    var div = document.getElementById('mydiv');
    if (this.nextSibling) {
        this.parentNode.insertBefore(div, this.nextSibling);
    } else {
        this.parentNode.appendChild(div);
    }
}
</script>
<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..." /><div id="mydiv">Text here..Text here..Text here..Text here..</div>
</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>

**paul_wilkins** · Aug 20, 2008, 21:15

Place it at the bottom of the body, not the top. Just before the </body> tag.

Examine the following for a moment.

Code html4strict:

<html>
<head>
</head>
<body>
<!-- html page code -->
...
<!-- finally, script code. Using inline script here.
 Best practice is to use external script file instead of inline. -->
<script>
...
</script>
</body>
</html>

**phantom007** · Aug 20, 2008, 21:18

U mean like this?

Code JavaScript:

 
<!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>
<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..." /><div id="mydiv">Text here..Text here..Text here..Text here..</div>
</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<script>
// attach event
document.getElementsByName('Submit')[0].onclick = moveDivToButton;
 
// perform task
function moveDivToButton() {
    var div = document.getElementById('mydiv');
    if (this.nextSibling) {
        this.parentNode.insertBefore(div, this.nextSibling);
    } else {
        this.parentNode.appendChild(div);
    }
}
</script>
<p>&nbsp;</p>
</body>
</html>

**paul_wilkins** · Aug 20, 2008, 21:21

Nearly, there's still a paragraph element that's been left after the script. Move that out of the way and you'll be there.

And you do not want the test div to be coded just after the input element.

We're wanting to see that the script moves the div to be just after the input element.
If the div is already at the location where the script is supposed to place it, then the script won't appear to do anything.

Move the div away somewhere, such as to the top of the body, so that when you click on the button you will be able to see that the script has moved the div.

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Positioning

Thread Tools

Display

CSS - Positioning

Bookmarks

Bookmarks

Posting Permissions