Navigation goes to the second line…

@Joachim_JoeJul 27.2006

See the screenshot or see it live at
~~[url]~~http://www.joenetworkradio.com[/url].

It’s a simple list navigation bar. How can I keep it from going to the second line, or have it more spaced out if you resize the window?

Any design tipps here?

If you come across anything else on the page, feel free to share.

The problem with the navigation is that it covers the first line of the nav with the second without enough spacing. margin-bottom margin-top?

~~[upl-file uuid=302b5afd-204f-4f73-8f93-cbba96c6478a size=15kB]~~nav.jpg[/upl-file]

to post a comment

CSS

17 Comments(s) _↴

@Wiz_CreationsJul 27.2006 — #you need the div containing the links to have a min-width. I'll find it and edit this post... hang on

min-width:722px;

That should work as long as there isn't a margin on the navigation and the screenshot I've provided is the navigation div. If the nav div doesn't stretch all the way across that space, then it will be smaller, but 722 would still work.

[upl-file uuid=4f0c0ab6-a47c-45fc-b077-27c7a83d5232 size=19kB]navigation.jpg[/upl-file]

@Joachim_JoeauthorJul 27.2006 — #Yes, the navigation is in a seperate div.

Thanks, I understand what you mean and I think that's what I need. 722px does not seem to work. Refresh, and drag the brower to the left, nav goes to the second line.

[CODE]
 #navigation {
 background-color: black;
 color: #3054BF;
 border: 1px solid #BF0000;
 border-top: 0px;
 border-bottom: 0px;
 padding: 0.8em;
 text-align: center;
 min-width:722px;
 }
 [/CODE]

I notice no difference.

@CentauriJul 28.2006 — #Seems to work fine for me - navigation div just pushes off to the right when window sized too small.

Cheers

Graeme

@Joachim_JoeauthorJul 28.2006 — #Hey, nice, you're right.... it does work. Must have been my browser cache.

I need to fix that border though because it comes to the left.

@WebJoelJul 28.2006 — #On Firefox it looks good at widescreen resolution, but at 800x600, the navigation breaks free of the container and pushes through.

[upl-file uuid=697014ed-e20f-4d19-99de-227744379c20 size=62kB]ScreenHunter_1.gif[/upl-file]

@Joachim_JoeauthorJul 29.2006 — #Thanks. I will have to try another solution then.

I can use min-width px because the divs are in percent and the px will cause that effect. Any other suggestions?

@CentauriJul 29.2006 — #Is there are margin to the left of the left-most menu item? If the menu bar can go further left when the screen is resized, then the right-hand breakthrough is not as much of a problem, and is far better than having it break the line. If it looks ok with 800px wide screen, then I wouldn't be too concerned.

Cheers

Graeme

@Joachim_JoeauthorJul 29.2006 — #Thanks. No, there is no margin. The nav is in a div, and it's centred. The border is around the div (but not the nav), so when the nav goes too long, it breaks through the border.

[CODE]
 #navigation_bar {
 
  min-width:722px;
  background-color: black;
  color: #3054BF;
  padding: 0.8em;
  text-align: center;
 
 }
 
 #navigation {
 
  background-color: black;
  color: #3054BF;
  border: 1px solid #BF0000;
  border-top: 0px;
  border-bottom: 0px;
  padding: 0.8em;
  text-align: center;
  min-width:722px;
 }
 [/CODE]

[code=html]
  <div id="navigation">
 <div id="navigation_bar">
 <ul>
 <li><a href="index.php" class="erste">Home</a></li>
 <li><a href="new_artists.php">New Artists</a></li>
 <li><a href="schedule.php">Our Programme</a></li>
 <li><a href="the_radio.php">Behind the Look</a></li>
 <li><a href="charity.php">Charity</a></li>
 <li><a href="mailto:[email protected]">Contact</a></li>
 </ul>
 </div>
 </div>
 [/code]

In the Internet Explorer, it looks different. There is a line downwards by the Live365 button, even on a 1024 * 768 resolution. This looks not very nice and is shown differently in Firefox.

@WebJoelJul 29.2006 — #What I'd do is not try to nest "navigation_bar" inside of "navigation". that is the problem since they are never going to be the same size.

I'd nest BOTH "navigation_bar" and "navigation" inside of a common wrapper DIV, and then resizing of browsewr width can occur naturally without busting the layout.

I'm going away for the day but when I get back I might experiment a bit with your layout and try to mate these two items into one cohesive element that behaves as one.

?

@Wiz_CreationsJul 29.2006 — #You could decrease the spacing between the links to make the width smaller, and if you can, try to make the mind-width closer to 600. Then you can add a min width the entire container.

@coldfxJul 30.2006 — #www.coldfx2.com/minmax.js

For those IE users, min---- isn't implented, but I found an old JS script that fixes it (Uploaded to an old site I ran)

To implent it just put <script src="minmax.js"></script> in the header, and it should work fine ^{^.^{^}}

@Joachim_JoeauthorAug 01.2006 — #I will add the min-width to the whole container, not the nav and take a way the subdiv. That is probably better and include the minmax.js.

@Joachim_JoeauthorAug 01.2006 — #Works great in Firefox.

The javascript seems to have no effect in IE or is it my cache?

@coldfxAug 02.2006 — #Meh, probably cache. Like I said, you need the JS implented, and Firefox already has it. So, check and empty your cache.

@Joachim_JoeauthorAug 05.2006 — #coldfx, please check your private message, sent you a reply. Thanks

@habmanAug 07.2006 — #try adding

[B]white-space: nowrap; [/B]

to your #navigation

#navigation {

background-color: black;
  color: #3054BF;
  border: 1px solid #BF0000;
  border-top: 0px;
  border-bottom: 0px;
  padding: 0.8em;
  text-align: center;
   [COLOR=Red]white-space: nowrap;[/COLOR]

}[/QUOTE]

@Joachim_JoeauthorAug 07.2006 — #Perfect! Why did nobody suggest that before?? ?

Also in #CSS _↴

Messier Objects Skyweb tutorial Using classes in CSS Top Right Corner

Success!

Help @Joachim_Joe spread the word by sharing this article on Twitter...

Tweet This

Navigation goes to the second line…

17 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Navigation goes to the second line…

17 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #CSS _↴