How do I turn the visibility off on a layer (div block)?

When I was working with layers in Dreamweaver before I built this site I was familiar with the visibility property for a layer. But not until recently did I learn that the best way to make a layer invisible is actually to change the declaration on a display property.

When working with visibility, which is written like this;

div.test{

visibility:hidden;

}
will actually hide the content in the layer, but it will not remove it. The dimensions will still affect the other layers. So, if you have a layer that is 200 pixels high that you want to show only after some user interaction and you use the visibility property, the content in that 200 pixel high area won’t show up, but the container will, so there will be a huge blank space on your page.

The better way to accomplish this, if you are using some Javascript for some DHTML is to use display:hidden. When you set display:block, this layer when then show up and push everything down below it.

So instead the above copy would be written like this to hide the layer;

div.test{

display:hidden;

}
And then to show it again;

div.test{

display:block;

}
This can create some great menus using only CSS which I will get into at a later tutorial.

Comments

No comments yet.

Leave a comment

Your email address is never displayed and cannot be spammed. Read our comment privacy policy.