7 replies [Last post]
datonn
Offline
Regular
Last seen: 6 years 45 weeks ago
Timezone: GMT-6
Joined: 2004-03-06
Posts: 17
Points: 9

Hello everyone! Another "newbie" question as I prepare to roll-out my mapping firm's new web site in a few weeks.....

We are using a horizontal CSS nav bar on our site template, and I've notice an annoying, important problem with certain users who have lots of extra "junk" displayed in their browser window that steals precious pixels away from an 800 pixel-wide standard. The menu I have created, which was (I thought) safely set to 750 pixels wide, will have 1-2 buttons "wrap" down to the next line....beneath the other buttons on the left hand edge of the page. Definitely an aesthetic problem but it gets worse! When the buttons wrap underneath one another, the "upper" buttons no longer display their drop-down contents.

For an example of what I am talking about, you may visit: http://www.tonnhaus.com/temp/mapformation/aboutus/clients/clients.html

If you resize the browser window to less than 775-750 pixels wide, you can see the problem I am talking about.

My CSS code looks like this:

#menu{ 
width:100%; 
float:left; 
} 
 
#menu a, #menu h2{ 
font:bold 11px/16px arial,helvetica,sans-serif; 
display:block; 
border-width:1px; 
border-style:solid; 
border-color:#ccc #888 #555 #bbb; 
white-space:wrap; 
margin:0; 
padding:1px 0 1px 3px; 
} 
 
#menu h2{ 
color:#fff; 
background:#000 no-repeat 100% 100%; 
text-transform:lowercase; 
z-index:500; 
} 
 
#menu a{ 
background:#eee; 
text-transform:lowercase; 
z-index:500; 
} 
 
#menu a, #menu a:visited{ 
color:#CC0000; 
text-transform:lowercase; 
z-index:500; 
} 
 
#menu a:hover{ 
color:#CC0000; 
background:#ddd; 
z-index:500; 
} 
 
#menu a:active{ 
color:#CC6600; 
background:#ccc; 
z-index:500; 
} 
 
#menu ul{ 
list-style:none; 
margin:0; 
padding:0; 
float:left; 
width:107px; 
z-index:500; 
} 
 
#menu li{ 
position:relative; 
z-index:500; 
} 
 
#menu ul ul{ 
position:absolute; 
top:auto; 
display:none; 
z-index:500; 
} 
 
#menu ul ul ul{ 
top:0; 
left:100%; 
z-index:500; 
} 
 
/* Begin non-anchor hover selectors */ 
 
/* Enter the more specific element (div) selector 
on non-anchor hovers for IE5.x to comply with the 
older version of csshover.htc - V1.21.041022. It 
improves IE's performance speed to use the older 
file and this method */ 
 
div#menu h2:hover{ 
background:#000 no-repeat -999px -9999px; 
z-index:500; 
} 
 
div#menu li:hover{ 
cursor:pointer; 
z-index:500; 
} 
 
div#menu li:hover ul ul, 
div#menu li li:hover ul ul, 
div#menu li li li:hover ul ul, 
div#menu li li li li:hover ul ul 
{display:none;} 
 
div#menu li:hover ul, 
div#menu li li:hover ul, 
div#menu li li li:hover ul, 
div#menu li li li li:hover ul 
{display:block;} 
 
/* End of non-anchor hover selectors */ 
 
/* Styling for Expand */ 
 
#menu a.x, #menu a.x:visited{ 
font-weight:bold; 
color:#000; 
background:#eee no-repeat 100% 100%; 
z-index:500; 
} 
 
#menu a.x:hover{ 
color:#a00; 
background:#ddd; 
z-index:500; 
} 
 
#menu a.x:active{ 
color:#060; 
background:#ccc; 
z-index:500; 
} 
 
a:link {color: #CC0000;} 
a:visited {color: #CC0000;} 
a:hover {color: #CC6600;} 
a:active {color: #CC0000;} 
 
#content { 
width: 750px; 
background: #fff; 
align: left; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 13px; 
z-index: 100; 
}


If anyone can help me with that problem....EITHER preventing the buttons from dropping down on to a second line (setting "minimum width"?) or having the contents of the "upper" buttons appear on top of the second line of "wrapped" buttons, I would greatly appreciate it. I tried a few searches of the CSS Forum for an answer to this particular question, but no matches (that I was able to locate). Thanks!

Derek

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

How to avoid CSS Nav Menu line-wrapping?

Does changing white-space:wrap to nowrap solve it?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

datonn
Offline
Regular
Last seen: 6 years 45 weeks ago
Timezone: GMT-6
Joined: 2004-03-06
Posts: 17
Points: 9

How to avoid CSS Nav Menu line-wrapping?

Tyssen,

No difference, unfortunately. Those menu items still wrap....and I cannot see the first "button" beneath the wrapped menu options. Actually, changing that CSS code from "wrap" to "nowrap" created some display problems for a few of the tab categories with very long names too.

Ugh. It seems as though this should be a relative simple fix....but I haven't been able to figure it out for the life of me.

Thank you VERY much for the suggestion though! It was worth a shot. Any other ideas that people might have are very-much welcome! )

Derek

qcmbrjones
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2006-02-10
Posts: 1
Points: 0

How to avoid CSS Nav Menu line-wrapping?

datonn,

I'm facing a similar problem. I have a hack that somewhat works...wrap the menu items in a div with a fixed width wide enough to hold all of the items. So in your case:

<div style="width:900px;">
<div id="menu">
...
</div>
</div>

I don't like this solution because it forces the browser to reserve 900px.

I'm dealing with horizontally adjacent divs also, but the number of divs is variable. So there's no telling how wide to set the width. Does anyone know how to force the browser to NOT wrap horizontally adjacent divs?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to avoid CSS Nav Menu line-wrapping?

You could size your links and submenus in %s ~14%. If someone narrows their screen below a certain amount, I would assume they know they are cramping the web page and things won't look as ascetically pleasing as normal.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to avoid CSS Nav Menu line-wrapping?

In contemplative mood, as a true Guru, Chris wrote:
ascetically pleasing


That's taking your guruness too far Chris Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 39 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

How to avoid CSS Nav Menu line-wrapping?

Chris wrote:
I would assume they know they are cramping the web page and things won't look as ascetically pleasing as normal.

I would think that as things become cramped, they would become more ascetically pleasing.

Webster's wrote:
Ascetic \As*cet'ic\
Extremely rigid in self-denial and devotions: austere; severe.
Some scholars believe Jesus was a follower of the Essenes, an ascetic Jewish sect.

Should that have been æsthetically? Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to avoid CSS Nav Menu line-wrapping?

Ah the Gnostic principles, great subject for discussion, simply one of my favorite areas of study after the 'The poor knights of the temple of Solomon'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me