close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Fix menu across div

Thread began 9/24/2009 1:18 pm by evan378910 | Last modified 9/29/2009 4:25 pm by evan378910 | 1150 views | 4 replies |

evan378910

Fix menu across div

Hi,

I am trying to get my menu to stretch across an entire div tag horizontally (1000 px). I have taken the border and padding settings (from the CSS menu writer dialogues) into consideration, as well as adding each element's width together to get a total of 1000 px. However, on the web page, there is a small gap on the right side. I tried making the background color of the div the same as the menu front, but it still looks weird.

The page is issw2010.com

Look at the far right side of the menu. Also, can I change the single top border of white to another color? Can I get the border to stretch across the last 4 or so pixels. Any advice appreciated!

Thanks,
Evan

Sign in to reply to this post

Jason ByrnesWebAssist

since your design is 1000 pixels, and you have 7 menu items, you are not going to be able to come up with a menu width that will be exactly 1000 pixels:

1000 / 7 = 142.85

The best width you can come up with is 142:
142 * 7 = 994px

Try setting the background color of the topnav div to "#4870AA"


also the menu is outside of the topnav div. Move it inside of the topnav div instead.

Sign in to reply to this post

evan378910

Thanks for the tips! I tried adjusting the left/right margins and padding by 3px. each, as I can up with the same #s. No change. Any other workaround? Also, when I place the menu in the "topnav" div, the submenus disappear behind the content div. I have tried changing the z value to much higher no success. This is why I put the menu in the header div. Any advice again appreciated, thanks a ton!!

Sign in to reply to this post

Jason ByrnesWebAssist

The problem is one of math. You cannot divide 1000 by 7 and get a round number. because of this, you will not be create a menu layout that spans the entire width.


Right now you have the menu outside of the top nav:

html:
<ul class="level-0" id="cssmw">
<li><a href="index.html">Home Page</a></li>
<li class="parent"><a href="schedule.html">Schedule</a>
<ul class="level-1">
<li><a href="schedule.html">ISSW Schedule</a></li>
<li><a href="activities.html">Activities</a></li>
</ul>

</li>
<li><a href="papers.html">Papers & Posters</a></li>
<li><a href="info.html">Area Info</a></li>
<li class="parent"><a href="lodging.html">Lodging & Travel</a>
<ul class="level-1">
<li><a href="#">Resort at Squaw Creek</a></li>

<li><a href="travel.html">Travel Resources</a></li>
</ul>
</li>
<li><a href="sponsors.html">Exhibitors</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }, true); }</script>

<div id="topnav"></div>




If you place the menu inside the topnav div:

html:
<div id="topnav">    
<ul class="level-0" id="cssmw">
<li><a href="index.html">Home Page</a></li>
<li class="parent"><a href="schedule.html">Schedule</a>
<ul class="level-1">
<li><a href="schedule.html">ISSW Schedule</a></li>
<li><a href="activities.html">Activities</a></li>
</ul>

</li>
<li><a href="papers.html">Papers & Posters</a></li>
<li><a href="info.html">Area Info</a></li>
<li class="parent"><a href="lodging.html">Lodging & Travel</a>
<ul class="level-1">
<li><a href="#">Resort at Squaw Creek</a></li>

<li><a href="travel.html">Travel Resources</a></li>
</ul>
</li>
<li><a href="sponsors.html">Exhibitors</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }, true); }</script>
</div>



then add:
width:994px;
margin: 0 auto;


to the topnav css selector, it will center the menu in the topnav div.

Sign in to reply to this post

evan378910

thank you so much for the GREAT support here. It only makes me more glad that I purchased extensions from you nice folks. I will report back after I get a chance to fix the source code.

Evan

:)

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...