Hi,
I searched through the issues but can't find a solution that works.. I'm trying to make my nice menus fluid so it stretches 100% across the page at all times.

The only way I've been able to do this so far is with this code:

ul.nice-menu li { width: 11.1111% }

^^^ I have 9 links in the menu, so I divided 100 by 9 to get that 11.11111% shown above ^^^

The problem with this code is that it doesn't center all my links properly (though I have the css to center them), and when I add background images they don't space properly.

I tried div#nav { 100% } but that didn't work either.

Any other suggestions?

I'm using Drupal 6.13.

Thanks for the help! Great module btw!!!

Comments

mxer269’s picture

mxer269 commented

ugh.. sorry its late.. i meant div#nav { width: 100%; } for the code above

mxer269’s picture

mxer269 commented

update: I've tried everything I can think of. Can someone help? Here's my css. I'm using the horizontal (down) menu. 

/* $Id: nice_menus_default.css,v 1.6 2007/10/29 16:38:28 add1sun Exp $ */
/*
  This is the default layout template for nice menus, and will provide
  a starting point for the look of your menus. To customize, it's
  recommended to create a custom CSS file using this file as a template,
  then configure the module to use your custom CSS file
  (this is done in the global settings tab of the theme administration.)

  To help understand the CSS, the HTML looks like this, where
    x is a number;
    TYPE is down/left/right;
    PATH is the menu path such as node/343;
    MID is the menu id such as 33):
  <ul id='nice-menu-x' class='nice-menu nice-menu-TYPE'>
    <li id='menu-MID' class='menu-path-PATH'><a href='#'>This is a menu item</a></li>
    <li class='menuparent menu-path-PATH'><a href='#'>A submenu</a>
      <ul...><li...>...</li>
      </ul>
    </li>
    ...
  </ul>

  If you have more than one nice-menu and want to target a particular one,
  use its id (e.g. ul#nice-menu-2).

  See README.txt and the handbook page (http://drupal.org/node/185543)
  for some CSS customization examples.
*/

/******************************
 Global CSS for ALL menu types
******************************/

a#dhtml_menu-738 { 
text-align: center;
}

a#dhtml_menu-117 { 
text-align: center;
 }
 
 a#dhtml_menu-118 { 
text-align: center;
 }
 
 a#dhtml_menu-846 { 
text-align: center;
 }
 
 a#dhtml_menu-1109 { 
text-align: center;
 }
 
 a#dhtml_menu-119 { 
text-align: center;
 }
 
 a#dhtml_menu-1116 { 
text-align: center;
 }
 
  a#dhtml_menu-1054 { 
text-align: center;
 }

 a#dhtml_menu-114 { 
text-align: center;
 }
 
ul.nice-menu,
ul.nice-menu ul {
  list-style: none;
  padding: 0;
  margin: 0px 0px 0px 0px;
  border-top-style:solid #000;
  width: 100%; 
}

ul.nice-menu li {
  border: 0px solid #ccc;
  border-top: 1;
  float: left;
  background-color: #eee;
  /* Additional overrides to deal with Garland theme. */
  margin: 0px 0px 0px 0px;
  padding-left: 0;
  padding-right: 0;
  background-image: none;
}

ul.nice-menu a:hover { 
color: #ff0000;
background: #ccc;
 }

/* Overrides for Garland header. */
#header-region ul.nice-menu li {
  margin: 0;
  /* Padding rules are needed to deal with Garland's header line-height. */
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  background: #eee;
}

ul.nice-menu a {
  padding: 0.3em 5px 0.3em 5px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #555555;
width: 100%; 
}

ul.nice-menu ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu ul {
  top: 1.8em;
  left: -1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin-right: 0;
}

/* Override for Garland header. */
#header-region ul.nice-menu ul {
  top: 1.7em;
}

ul.nice-menu ul li {
  width: 12.5em;
}

/******************************
 VERTICAL (left/right) menus
******************************/

/* This is the default width of all vertical menus. */
ul.nice-menu-right, ul.nice-menu-left,
ul.nice-menu-right li, ul.nice-menu-left li {
  width: 12.5em;
}

/* VERTICAL menus where submenus pop RIGHT (default). */
ul.nice-menu-right ul {
  width: 12.5em;
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-right ul ul {
  width: 12.5em;
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-right li.menuparent,
ul.nice-menu-right li li.menuparent {
  background: #eee url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-right li.menuparent:hover,
ul.nice-menu-right li.over,
ul.nice-menu-right li li.menuparent:hover,
ul.nice-menu-right li li.over {
  background: #ccc url(arrow-right.png) right center no-repeat;
}

/* VERTICAL menus where submenus pop LEFT. */
ul.nice-menu-left li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
}

ul.nice-menu-left li ul li ul {
  width: 12.5em;
  left: -12.65em;
  top: -1px;
}

ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent {
  background: #eee url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li.over,
ul.nice-menu-left li li.menuparent:hover,
ul.nice-menu-left li li.over {
  background: #ccc url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left a, ul.nice-menu-left ul a {
  padding-left: 14px;
}

/******************************
 HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
  float: left;
  border: 0;
  }

ul.nice-menu-down li {
  border-top: 0px solid #ccc;
}

ul.nice-menu-down li li {
  border-top: 0;
}

ul.nice-menu-down ul {
  left: 0;
}

ul.nice-menu-down ul li {
  clear: both;
}

ul.nice-menu-down li ul li ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li ul li ul {
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-right: 5px;
  /* edit links with children here */
}

ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
  background: #eee url(arrow-down1.png) right center no-repeat;
}

ul.nice-menu-down li.menuparent:hover,
ul.nice-menu-down li.over,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent:hover,
#header-region ul.nice-menu-down li.over {
  background: #ccc url(arrow-down1.png) right center no-repeat;
}

ul.nice-menu-down li li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li li.menuparent {
  background: #eee url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-down li li.menuparent:hover,
ul.nice-menu-down li li.over,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li li.menuparent:hover,
#header-region ul.nice-menu-down li li.over {
  background: #ccc url(arrow-right.png) right center no-repeat;
}

Thanks!

mxer269’s picture

mxer269 commented

fixed it myself

add1sun’s picture

add1sun commented
Status: Active » Fixed
mxer269’s picture

mxer269 commented

I should explain how I fixed it:

The problem was that I had the text-align: center code in the a# tags. To fix it, I simply removed the code from those tags and placed one text-align: center code in ul.nice-menu li {}.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ressa’s picture

ressa
he/him
commented
Component: CSS » Code

Add this CSS to your style-sheet to expand the Nice Menu to 100% width. This example works for a menu with four menu items, so if you have eight items you will have to change width: 25%; to width: 12.5%;.

ul.nice-menu,
ul.nice-menu ul {
  width: 100%;
}

ul.nice-menu li {
  border: 0;
  width: 25%;
  min-width: 135px; /* for responsive design, so the menu items don't collapse on small screens */
}

 /* submenus */
ul.nice-menu li li {
  width: 100%;
}

ul.nice-menu li:hover {
  background-color: #DDD;
}

ul.nice-menu a {
  font-weight: bold;
  text-decoration: none;
  color: #555555;
}