Forum Moderators: open
I wonder if you can help? I've implemented a ready made JavaScript vertical toolbar into my Web site but have problems with positioning. It only has by default absolute positioning parameters and I need to change them to relative as whenever the browser is resized the menu stays at the same place on the screen. I was told that using <DIV> tags can help, but I have no idea how to do it.
Can anyone please submit a working example code of asigning relative parameters to the menu?
Thanks!
You could just wrap the code in a 'container' div that has position:relative. Absolute positioning is relative to it's container object.
<div style="position:relative;">
<!--absolutely positioned menu goes here//-->
</div>
For example, here we have an absolutely positioned div (absdiv) with height and width of 100px, a left of 50px, and a top of 10px.
The container relatively positioned div (reldiv) has a left margin of -50px, which 'counteracts' the left:50px of the absolutely positioned div (see below)
<style type="text/css">
body{
margin: 0;
padding; 0;
}
#absdiv {
position:absolute;
top:10px;
left:50px;
height: 100px;
width: 100px;
background-color:#e0e0e0;
}
#reldiv {
position:relative;
margin-left:-50px;
}
</style>
</head>
<body>
<div id="reldiv"><div id="absdiv">Testing</div></div>
</body>
This solution does not require that you alter the js code, but altering the js would probably be a better solution.
Hope this helps,
ajkimoto
