Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:34
Problems with left and right margins and 100% width
Poster: mixermanic
Dated: Tuesday April 6 2004 - 16:51:34 BST
Hi everyone!
I have set my page L and R margins to 20px using CSS:
body{
margin-top : 200px;
margin-bottom : 10px;
margin-left : 20px;
margin-right : 20px;
font : 9pt verdana, arial, sans-serif;
text-align : left;
background : #FFFFFF url("img/schematic_bg.gif") fixed no-repeat;
}
The problem is, when I have the menu set to 100% width, it only goes margin to margin, not the full screen width.
I set the page margins to 0px and that worked, but then because a <div> on the left of the page was right up against the screen edge, I set the CSS margin properties of the div to 20px (keeping the <body> margins to 0px), and the menu was again 20px short on the left...???
Am I doing something wrong here?
Thanks,
Martin
Poster: Ruth
Dated: Tuesday April 6 2004 - 17:40:42 BST
Do you have a url for a test page? It's much easier to test the actual page and try and find the problem. Without seeing your actual menu coding and the css file, it's kind of a guessing game
Ruth
Poster: Maz
Dated: Tuesday April 6 2004 - 18:35:19 BST
Without the url it could be a couple of things, the menu is placed in a div is not good.
Or the menu is taking on the body margin, I'm not sure if this would work, if the body margin is 2% each and the menu width is 104%? It might need a little adjustment from there.
Let us know and post a url.
maz
Poster: mixermanic
Dated: Wednesday April 7 2004 - 9:19:41 BST
Hiya,
http://www.designersounds.co.uk/test/index.html
The data for the top menu is:
http://www.designersounds.co.uk/test/sc ... nu_data.js
The menu isn't actually in a div - I have a tree navigation in the div and it is this div that seems to affect the menu placement.
Ignore the second menu on there - it's the top one I'm bothered about!
It would seem that the menu is taking on the left page margin, but not the right.
Many thanks everyone!!
Martin
Poster: Ruth
Dated: Wednesday April 7 2004 - 10:08:23 BST
It is the global.css file, specifically this
Code:
BODY {
BACKGROUND: url(schematic_bg.gif) #ffffff fixed no-repeat; MARGIN: 200px 0px 10px 20px;
That 20px margin is the problem. If that is removed the menu spans the full page. If you have to have that, you will need somehow to get the margin using some class definition. I dont' know if you have tables, or divs over there that you can put a class to with the necessary margin. Declared as a class the menu should then ignore it. "I think BACKGROUND: url(schematic_bg.gif) #ffffff fixed no-repeat; MARGIN: 200px 0px 10px 20px;
"
Rutn
Poster: mixermanic
Dated: Wednesday April 7 2004 - 11:02:08 BST
OK I changed the left page margin to 0px, which worked fine, but put the tree div against the left screen edge.
Then I changed the left margin of the tree div to 20px to shift that to the right, but that also moved the menu to the right again
I'm sure I'm doing something dumb. Just can't work out what it is!!
Thanks!
Martin
(PS: I haven't updated the test page because I'm at work now and don't have FTP access
)
Poster: Maz
Dated: Wednesday April 7 2004 - 14:46:32 BST
To adjust for the 20px you can use
left="offset=-20";
maz
Poster: Ruth
Dated: Wednesday April 7 2004 - 15:27:33 BST
Ok, I fixed it. It works in ie5.5 on win98se, netscape6, 7, firebird .07. I have absolutely no clue as to why and it may not even be acceptable, but... I put a .divtest {MARGIN-LEFT: 20px} in your global.css file. Then I put a div around that div.
Code:
<!-- NAVIGATION TREE -->
<div class=divtest><DIV class=dtree id=sidenav>
<P class=align_c><A href="javascript:%20d.openAll();">open all</A> | <A
href="javascript:%20d.closeAll();">close all</A></P>
<SCRIPT src="tree_data.js" type=text/javascript></SCRIPT>
</DIV></div>
Now I don't even know if you can do that, nest a div in a div. But, I tried that and it didn't work, and I just shook my head, then I thought...wonder if I 'moved' it down a bit if that would do it? So, right after the body tag I put in a <div class=divtest><DIV class=dtree id=sidenav>
<P class=align_c><A href="javascript:%20d.openAll();">open all</A> | <A
href="javascript:%20d.closeAll();">close all</A></P>
<SCRIPT src="tree_data.js" type=text/javascript></SCRIPT>
</DIV></div>
Code:
<p>& n b s p ;
That's the non-breaking line space with the paragraph. Now, again I have no clue as to why that would do it, but it did. The menu stretches all the way across the page in the browsers I mentioned. I also put in Maz's suggestion on the offset. That didn't work by itself, however, without it the menu stays like it has been in opera 7. With that code in the menu at least in Opera 7 it doesnt look bad, it 'balances' it so it's got the same spacing right and left. Opera is a real problem, it messes up the simplest things. I cannot check it on a Mac.
Ruth
