23 replies [Last post]
nambafa
Offline
newbie
Last seen: 9 years 27 weeks ago
Joined: 2009-01-03
Posts: 6
Points: 0

I am just starting to use css, and at the moment I am trying to convert my table based page to css layout.

I have a supposedly *simple* problem that I really cannot figure out how to solve - despite a LOT of of effort by trial-and-error and forum searches...

I want to make a horizontal navigation menu that is centered on the page AND that will wrap the menu across several lines when needed, say, when the user makes the browser window small.

I had this kind of menu on my old site (to see what I want, just make the browser window small, and you will see that the menu breaks across several lines and stay centered):
http://folk.ntnu.no/stormark/nambafa/news.php

The new location of the page that is being reconstructed is here (at this time the menu does not work as intended):
http://nambafa.com/news.php

So far, I have been able to either
-make a centered horizontal menu that will not wrap
-make a left-aligned horizontal menu that wraps

Maybe some kind of float:center could have helped me out here - just too bad it does not exist (also, due to the nature of my problem, my menu is not just one line of text all the time and neither has it a constant width, so all the work-arounds that I have seen so far will not help me..)

I guess I should add some of my code (which probably is far from perfect):

CSS:

#header{
  position:absolute; top:0; left:0; 
  width:100%; height:70px; 		
  margin:0; padding:0;
  background-color:#336699;}
 
#nav{
  /*position:absolute; top:20px; left:0;*/
  /*width:100%;*/
  padding:0; height:auto;
  margin-left:auto; margin-right:auto;
  text-align:center;
  border: thin solid purple;}
 
#nav ul{
  margin:0; padding:0 80px 0 80px; 
  list-style-type:none;}
 
#nav ul li {
  display:inline; 			
  /*float:left;*/}
 
#nav ul li a:hover,
#nav ul li a:active,
#nav ul li a:visited,
#nav ul li a{	
  color: #FFFFFF;			/* white */		
  font-weight:bold; padding: 3px 5px;
  /*float:left;*/	
  /*border: thin solid white;*/}

HTML:

<div id="header">
  <div id="clock">00:00:00</div>
 
  <div id="logo"><IMG SRC="media/img/nambafa/mp.jpg" ALT=""></div>
 
  <div id="nav">
  <ul>
  <li><a href="info.php" class="link0">Info</a></li>
  <li>|</li>
  <li><a href="news.php" class="link0">Tidings</a></li>
  <li>|</li>
  <li><a href="gbok.php" class="link0">Gjestebok</a></li>
  <li>|</li>
  <li><a href="bilder.php" class="link0">Snapshots</a></li>
  <li>|</li>
  <li><a href="links.php" class="link0">Lenker</a></li>
  <li>|</li>
  <li><a href="papers.php" class="link0">Papers</a></li>
  <li>|</li>
  <li><a href="div.php" class="link0">Diverse</a></li>
  <li>|</li>
  <li><a href="vitne.php" class="link0">Testemony</a></li>
  <li>|</li>
  <li><a href="lyrics.php" class="link0">Tekster</a></li>
  <li>|</li>
  <li><a href="forum.php" class="link0">Forum</a></li>
  </ul>
  </div>
  <hr>
</div> 

As you can see, it is the #nav div that hold the menu that I am working on - I have just put it inside the #header div container...

I really hope some of you are able to help me out on this one! Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9690
Points: 3766

In the ul, set {text-align:

In the ul, set {text-align: center;}. Then set li {display: inline;}.

See the top global nav here.

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.

nambafa
Offline
newbie
Last seen: 9 years 27 weeks ago
Joined: 2009-01-03
Posts: 6
Points: 0

Centered and horizontal but no wrapping unfortunately

Thanks for your suggestion, but I don't think it will fix my problem. Sad

The top global nav you referred to is centered and horizontal all right, but the menu elements do not wrap onto the next line when the browser window is set small (it just continues out of the screen).

I would really like the menu elements to wrap (distribute themselves over several lines when there is not enough space on one line) - like the one on my old page that I gave a link to in my first post.

I'm still hoping that a solution will come!

Thanks for your suggestion anyway! Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 6 years 37 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You could try the (somewhat

You could try the (somewhat nasty) trick where you have a floated menu--the menu items are floated left and thus will wrap-- and then use the "old-fashioned" centering trick where the menu itself is first relatively positioned and pushed 50% inwards and then back out with a negative left margin. http://pmob.co.uk/pob/centred-float.htm is one example. It has its drawbacks.

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9690
Points: 3766

nambafa wrote:Thanks for

nambafa wrote:

Thanks for your suggestion, but I don't think it will fix my problem. Sad

Yes, it will.

Quote:

The top global nav you referred to is centered and horizontal all right, but the menu elements do not wrap onto the next line when the browser window is set small (it just continues out of the screen).

I said to look (try it yourself) at the menu. In my page, there is a min-width, so, of course it doesn't wrap, it doesn't need to.

Quote:

I would really like the menu elements to wrap (distribute themselves over several lines when there is not enough space on one line) - like the one on my old page that I gave a link to in my first post.

I'm still hoping that a solution will come!

It already did. To make it easy for you, here is a test case.

 html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <title>Test Document</title>
  <style type="text/css">
/*<![CDATA[*/
 
  ul {
    margin: 1em 0;
    padding: 0;
    text-align: center;
    }
 
  li {
    display: inline;
    margin: 0 2px;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <ul>
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
 
    <li>menu item</li>
  </ul>
</body>
</html>

Quote:

Thanks for your suggestion anyway! Smile

Anyway? When given a solution to your problem, at least show the courtesy of actually testing before writing it off; you may find that it works.

gary

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

nambafa
Offline
newbie
Last seen: 9 years 27 weeks ago
Joined: 2009-01-03
Posts: 6
Points: 0

Almost there?!

Gary: I didn't mean to insult you in any way - if I did, please forgive me. I am very grateful for all the help that I get in these kinds of forums. Smile

I tested the code you supplied in your latest post, and it had exactly the effect that I was looking for. However, when I try the same with my code, I still get no wrapping. Maybe this is related to the fact that my menu is inside a absolutely positioned div or something? Any ideas? I will try to investigate this further...

Stomme poes: Thanks for your suggestion - I will have a closer look at the little trick that you referred to also.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9690
Points: 3766

It seems to work now. You

It seems to work now. You do need to set padding-left and margin-left to zero for the ul. The default indention messes with the centering. (see attd window dump) Also, it is seldom a good idea to set width to 100% without removing all margins, padding, and borders. Remove the width property from body, and set margin and padding to zero.

In your css file, you have html markup, i.e.

 <style type="text/css">
<!--
...
-->
</style>
Get rid of it.

cheers,

gary

AttachmentSize
nambafa.png 28.76 KB

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

Triumph (not verified)
Anonymous's picture
Guru

I always add white-space:

I always add white-space: nowrap; to the "ul li a" so that it doesn't wrap in the middle of the menu item.

nambafa
Offline
newbie
Last seen: 9 years 27 weeks ago
Joined: 2009-01-03
Posts: 6
Points: 0

Thanks a lot!

It seems like I will be able to do what I want now - I guess I just need to sort things out a little bit to see how everything fits together. Thank you so much for the help! Smile

I experienced a strange effect, though. For some (so far unknown) reason, the upper menu would only wrap when I inserted a

white-space:nowrap;

in the "ul li a" of that section. I don't see why this should do the trick for that particular menu and not the others but I will try to clean up my code and see if I can find the reason.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 6 years 37 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

it might be because, if the

it might be because, if the actual text of your menu items themselves could wrap (if they were multi-word) then the total width of the menu isn't wide enough to force wrapping of the actual menu items.

In any case, there's nothing wrong with having the nowrap on your menu items; as Truimph said, it's very useful for something like this.

If I        and I        and this also
wrapped     wrapped      is wrappping

less width than

If I wrapped     and I wrapped     and this also is wrapping

and so if the set width of the ul was small enough, the second would have to wrap its menu items while the first can kinda compress a bit first.

I'm no expert, but I fake one on teh Internets

easily_confused
Offline
Regular
Last seen: 8 years 50 weeks ago
Timezone: GMT+1
Joined: 2009-06-04
Posts: 11
Points: 0

Thanks for this method Gary,

Thanks for this method Gary, but I have a problem in my test page. If I narrow the window in Firefox, the right side of the menu goes off the edge of the window and there is no scroll bar. Can you suggest a way to ensure the wrapped menu can be scrolled?

Here's my example page copied from your demo:

http://cheesyweasels.com/scratchpad/centred_menu.htm

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9690
Points: 3766

I cannot replicate your

I cannot replicate your issue. For me, the menu wraps as expected.

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.

easily_confused
Offline
Regular
Last seen: 8 years 50 weeks ago
Timezone: GMT+1
Joined: 2009-06-04
Posts: 11
Points: 0

Hello, this seems strangely

Hello, this seems strangely familiar, sorry to be bothering you again!

I'm using Firefox 3.0.10. The problem is that although it wraps, it does not scroll so if I make the window very narrow, there is no way to see the right side of the menu.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9690
Points: 3766

I don't understand. If it

I don't understand. If it wraps, it's not extended beyond its container. There is no overflow.

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

easily_confused
Offline
Regular
Last seen: 8 years 50 weeks ago
Timezone: GMT+1
Joined: 2009-06-04
Posts: 11
Points: 0

As I narrow the window,

As I narrow the window, first the menu wraps to two lines. As I continue to narrow the window, it remains at two lines and the menu items go offscreen.

easily_confused
Offline
Regular
Last seen: 8 years 50 weeks ago
Timezone: GMT+1
Joined: 2009-06-04
Posts: 11
Points: 0

I *think* I've got it

I *think* I've got it working now. Things that seemed to help were:

1) Add a minimum width to force Firefox to scroll when the list wraps. IE6 doesn't support minimum width, but it does scroll so that's ok. (For consistency, minimum width for IE6 could be added using negative margins.)

2) Set the anchors to display:inline-block; this prevents the buttons from overlapping each other when the list wraps.

3) Make sure whitespace:no-wrap; is only set on the anchor, not the li or ul.

I've tested my fluid, centred, resizable text, decorated buttons, hover effects menu in the browsers I've got (IE6 through 8, Firefox 3, Opera 9, Chrome and Safari) and it looks ok to me so far:

http://cheesyweasels.com/scratchpad/inline_block/home.htm

I'd like to support as many older browsers as possible, but still have valid css.

Question: is there any way to get -moz-inline-box to validate so that Firefox 2 will work?

Question: are there any other "obvious" fixes for browsers without inline-block?

Thanks in advance!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9690
Points: 3766

Quote:Question: is there any

Quote:

Question: is there any way to get -moz-inline-box to validate so that Firefox 2 will work?

It is valid. The validator just doesn't know about it. The specs provide for proprietary/testing properties and values provided the vendor uses its namespace prefix; e.g. -moz-, -ms-, -o-, -webkit-, and others.

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.

rvenable
Offline
newbie
Last seen: 9 years 4 weeks ago
Joined: 2009-06-14
Posts: 1
Points: 0

My Solution

I had this problem too and stumbled upon this forum. I tried Gary's simple test (ul {text-align: center;} li {display: inline;}). I was surprised that it worked for his test case, but when I pasted my ul into his example it didn't work. I realized the difference was that I didn't have any actual whitespace characters between my

  • elements.
  • My Solution: Just add some whitespace between the

  • elements in the actual html. Its silly, but it made the difference for me.
  • Example:
    Bad:

    Good:

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 17 hours 42 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9690
    Points: 3766

    Good point. It's one I

    Good point. It's one I wouldn't have thought of without seeing the markup. I'd no more format as in your 'bad' example than I would pick a fight with Mike Tyson.

    Markup and css rulesets should be formatted for easy reading by old, weak-eyed humans. Squeezing out the white space just invites difficulty in catching errors.

    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.

    easily_confused
    Offline
    Regular
    Last seen: 8 years 50 weeks ago
    Timezone: GMT+1
    Joined: 2009-06-04
    Posts: 11
    Points: 0

    I always assumed that

    I always assumed that whitespace *between* elements in HTML wwould be ignored by the browser and can safely be used as Gary says to make the code readable. Now I'll need to go find out where and when whitespace might be affecting my layout!

    Really intersting thread, I've learned a lot. Thanks all.

    L0LKTHXBYE
    L0LKTHXBYE's picture
    Offline
    Enthusiast
    Nederland
    Last seen: 8 years 46 weeks ago
    Nederland
    Timezone: GMT+2
    Joined: 2009-06-11
    Posts: 98
    Points: 0

    While I support proper code

    While I support proper code indentation, this certainly becomes a problem when you have your HTML go through some tidy program who does what google does and throw everything onto a single line of code. So, it still matters, and it's picking a fight with Mike Tyson while he's safely behind some bars or something.

    Gary has a whitespace trick with CSS, something like
    #element {
    letter-spacing: -.2em; or some number
    }

    or maybe it was word spacing or negative margins.

    Yeah whitespace should be ignored most of the time but when you say display: inline-block you're telling the browser to look at whitespace like it does with text (otherwise text wouldn't wrap n stuff) and it should take anything more than a single whitespace and consider it just one single white space. So, it's usually not a bug.

    It's a bunch of bugs in IE though. I thought most of them had to do with Haslayout though.

    jdcook72
    Offline
    newbie
    Star, ID
    Last seen: 9 years 3 weeks ago
    Star, ID
    Timezone: GMT-7
    Joined: 2009-06-18
    Posts: 2
    Points: 0

    Slightly different implementation...

    I was researching to solve an issue I have and was lucky to find this forum and relatively fresh thread. I’ve been playing around with your sample and it works as described for me, I’m using IE 8 right now. I’m trying to do something similar using divs instead of a list and it is working as long as the div elements also have display:inline – for the most part. Some styles like borders are working but others like width and height are having no effect. If I remove the things render correctly, I’ve tried:

    HTML 4.01 Strict
    HTML 4.01 Transitional
    HTML 4.01 Frameset
    XHTML 1.0 Strict
    XHTML 1.0 Transitional
    XHTML 1.0 Frameset
    XHTML 1.1

    No success with any of them. What is the proper way to accomplish this if there is one?

    Thank you.

    My sample, based on your sample. Looks the way I want when I remove the !DOCTYPE

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Test Document</title>
      <style type="text/css">
    /*<![CDATA[*/
     
      ul {
        margin: auto;
        padding: 0;
        text-align: center;
        }
     
      li {
        display: inline;
        margin: 2px 2px;
        }
     
      .ul {
        height: 100px;
        width: 75%;
        margin: auto;
        padding: 10px 10px;
        text-align: center;
        border: solid 4px #777;
        }
     
      .li {
        display: inline;
        border: solid 2px #ccc;
        height: 40px;
        width: 140px;
        margin: 10px 10px;
        }
     
      /*]]>*/
      </style>
    </head>
     
    <body>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <br />
      <div class="ul">
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
        <div class="li">item</div>
      </div>
    </body>
    </html>

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 17 hours 42 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9690
    Points: 3766

    That's {display:

    That's {display: inline-block;}. IE<8 are reset to inline, because they don't grok inline-block, but it is necessary to set hasLayout. Inline elements do not have width and height properties.

    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.

    jdcook72
    Offline
    newbie
    Star, ID
    Last seen: 9 years 3 weeks ago
    Star, ID
    Timezone: GMT-7
    Joined: 2009-06-18
    Posts: 2
    Points: 0

    Fantastic

    Of course that exactly fixed the problem I was having and allowed me to put the DOCTYPE back in which, in turn, fixed the numerous other sided effects that arose from me removing it. Thank you SO much.

    Fortunately (or unfortunately) my difficulty arose from me not knowing specifically just what to do and not from me thinking I was doing everything correctly but things not working as expected – I didn’t know what to expect. I’ve been in software design for over 10 years working primarily with monolithic desktop applications (.exe). After a hiatus I returned and shifted to web-based intranet (functional, ugly) applications (.NET) and now I’m working on Internet (functional, ooh-ahh pretty). The shift has been challenging but fun and exciting (can coding be fun and exciting? Oh, no it’s the learning part that is fun and exciting). The design aspects of web development are exciting as well as seeing the continuous advancement of the developing standards.

    I’m looking forward to have my level of proficiency continue to increase and am sure I will be utilizing this website/forum frequently. Thanks for providing such a great resource! :thumbsup: