Forum Moderators: open
I am developing a navigation system based on layers. The user hovers over a menu item and a second navigational level appears below. No problems there, I designed and developed the whole thing and it woks perfectly... UNTIL:
The clients site is all centered (not my design - I'm just redoing the top nav for them). So, in order to port my design over to their site I need to dynamically write the left: style of all my divs.
So, I wrote a script to detect the inner width of the window, divide it by 2 and take away half the width of my divs from that - which should give me the left value for all my divs to be centered. Again, no problem.
Then, I inserted this code instead of my <div id="whatever"> tag:
<script language="JavaScript" type="text/javascript">
document.writeln('<div id="radiant" style="left:'+layerLeft+'px"');
</script>
Which is causing my divs (which have a background colour, so it's painfully obvious!) to appear higher that the 20px they should be. The CSS has the height set to 20px and everything was perfect until I started to dynamically write the <div> tag.
I was wondering if anyone came accross this before and has a solution?
Thanks in advance! :)
Maybe write the layer as div id="radiant" and write in the left position another way?
The CSS for each layer is set in the <HEAD> section, eg:
#radiant {
background-color : #CC0066;
color: #000;
width: 760px;
height: 20px;
top: 60px;
left:0px;
position : absolute;
z-index : 90;
visibility : hidden;
}
Changing the left: value inline at the <div> level...
Do you have any suggestions for writing the left: another way?
My code works fine in Mozilla 1, but I've found the problem in IE6 and NN4.74
[edited by: BlobFisk at 2:12 pm (utc) on June 12, 2002]
I was thinking detecting the window size and then loading a Stylesheet depending on the window size but thats too limiting.
There is a DW extension called SnapLayers where you can align layers to any object i.e. an image. I use it on a site for a drop down menu system - all the layers position themselves in relation to the image and NOT by absolute positioning. Bit trickier if you don't have DW ;)
document.writeln('<div id="whatever" style="left:'+layerLeft+'px"');
should be:
document.writeln('<div id="whatever" style="left:'+layerLeft+'px">');
I forgot to close the <div.... I hang my head in shame.
Also, for Dreamweaver users out there - if you are dynamically writing opening <div> tags, Dreamweaver 4 will be helpful and remove the </div> for you, as it thinks it's mistake.... at least that's what it did for me...
Cheers!
knew there had to be a high tech solution!
PS in DW go EDIT>PREFERENCES select code rewiriting and uncheck the "Remove extra closing tags" if you really want to be tight in what dreamweaver does add .html to the "never rewrite code in these pages..." bit.
