Log in

View Full Version : div layer



Tabo
07-31-2007, 09:15 AM
I have a website with a structure like this:
http://img45.imageshack.us/img45/6767/helpli9.png

The box in the picture is a centre aligned table. On the top right there is a link which either shows or hides the div layer, shown in red. The problem I have is that I want the div layer always under the link, no matter the page/screen width, I've tried a number of things that has not worked well, any ideas? I may also need js for this but Ill check out css first.

Veronica
07-31-2007, 08:50 PM
Put the link and the text area in their own divs, each with an equal margin-left. Then put both of these divs in another div within the td of your table.



<div>

<div id="link" style="margin-left:100px;"><a href="#" onclick="showHide('reveal'); return false;">Show/Hide Div</a></div>

<div id="reveal" style="margin-left:100px; display: none;">Text that is hidden until the above link is clicked.</div>

</div>


By setting the margin-left the same in each div, they'll stay one under the other regardless of resolution. The onclick in the above example would be whatever script you're actually using yourself.

Tabo
08-01-2007, 08:30 AM
that doesnt seem to work, im using a layered div (though i think you know)
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer1">
&nbsp;</div>