Fix menu across div

9/24/2009 10:18 am | #1 evan378910

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

9/24/2009 1:59 pm | #2 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.

9/28/2009 5:49 pm | #3 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!!

9/29/2009 10:19 am | #4 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.

9/29/2009 1:25 pm | #5 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

:)

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Fix menu across div

9/24/2009 10:18 am | #1 evan378910