Single row navigation menu

Single row navigation menu

am 15.07.2007 06:42:29 von Paolo

Hello,
on the top right side of my page, I've a 4 elements navigation menu
that is css formatted



When I resize the window in *width* (x axis) the last element is moved
to a second row below the initial one, creating problem to the rest of
the fluid layout. How can I fix that, making sure that after a certain
point the scrollbar for the width appears allowing to scroll rather
than sending the last element to the next row? In other words, how can
I make sure the navigation menu is not broken into multiple lines when
I resize the window?

thanks,
Paolo

Re: Single row navigation menu

am 15.07.2007 08:24:17 von wayne

Paolo wrote:
> Hello,
> on the top right side of my page, I've a 4 elements navigation menu
> that is css formatted
>


>
> When I resize the window in *width* (x axis) the last element is moved
> to a second row below the initial one, creating problem to the rest of
> the fluid layout. How can I fix that, making sure that after a certain
> point the scrollbar for the width appears allowing to scroll rather
> than sending the last element to the next row? In other words, how can
> I make sure the navigation menu is not broken into multiple lines when
> I resize the window?
>
> thanks,
> Paolo
>
Are you saying the menu is on one line from left to right and when you
make the width smaller, the item that exceeds the window width moves
down to a new line?

If so, you must format your elements so they do not exceed the allocated
minimum width. Perhaps your menu items text could be made shorter or
the menu "blocks" (padding?) may be too large.

--
Wayne
www.glenmeadows.us
"Faith means not wanting to know what is true." [Nietzsche]

Re: Single row navigation menu

am 15.07.2007 09:44:51 von jkorpela

Scripsit Paolo:

> on the top right side of my page, I've a 4 elements navigation menu
> that is css formatted [and marked up as a

Re: Single row navigation menu

am 15.07.2007 11:02:37 von Neredbojias

Well bust mah britches and call me cheeky, on Sun, 15 Jul 2007 04:42:29 GMT
Paolo scribed:

> Hello,
> on the top right side of my page, I've a 4 elements navigation menu
> that is css formatted
>


>
> When I resize the window in *width* (x axis) the last element is moved
> to a second row below the initial one, creating problem to the rest of
> the fluid layout. How can I fix that, making sure that after a certain
> point the scrollbar for the width appears allowing to scroll rather
> than sending the last element to the next row? In other words, how can
> I make sure the navigation menu is not broken into multiple lines when
> I resize the window?

Lots of ways to do that, but then it wouldn't be fluid.

If you still insist, explore the css quality of "white-space:nowrap;"

--
Neredbojias
A self-made man who worships his creator

Re: Single row navigation menu

am 15.07.2007 20:10:56 von Paolo

Hello,
the page is not online yet, I'm still working on it.

This is the css code

..nav-top-menu
{
font-family: Arial, sans-serif, 10%;
margin-top: 1%;
margin-left:12%;
}

..nav-top-menu ul
{
list-style: none;
padding: 0;
margin: 0;
text-align:center;
}

..nav-top-menu li
{
float: left;
margin: 0 0.15em;
}

..nav-top-menu li a
{
height: 3em;
line-height: 2em;
float: left;
width: 7em;
display: block;
color: #0d2474;
text-decoration: none;
text-align: center;
}

..nav-top-menu li a span
{
color: white;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-size: 1em;
}

and here the html code



Thanks!
Paolo

Re: Single row navigation menu

am 15.07.2007 20:14:48 von Paolo

On Jul 15, 12:44 am, "Jukka K. Korpela" wrote:
> Scripsit Paolo:
>

>
> > How can I fix that, making sure that after a certain
> > point the scrollbar for the width appears allowing to scroll rather
> > than sending the last element to the next row?
>
> So you want non-fluid layout? At least in this respect. Think again. Now,
> think _again_. Then reject the idea, and consider reducing the navigation
> menu (it has too many items anyway), and also take the possibility of line
> wrap inside it as a real possibility that _will_ materialize at times
> (though not often if you make the menu reasonably small).
>

it materializes only when the window is becoming too small, in most of
the cases it works just fine. In those situations (and only in those),
I'd like to enable the width scrollbar at the bottom of the window.

thanks,
Paolo

Re: Single row navigation menu

am 15.07.2007 20:19:48 von Paolo

On Jul 15, 12:44 am, "Jukka K. Korpela" wrote:
> Scripsit Paolo:
>

>
> > How can I fix that, making sure that after a certain
> > point the scrollbar for the width appears allowing to scroll rather
> > than sending the last element to the next row?
>
> So you want non-fluid layout? At least in this respect. Think again. Now,
> think _again_. Then reject the idea, and consider reducing the navigation
> menu (it has too many items anyway), and also take the possibility of line
> wrap inside it as a real possibility that _will_ materialize at times
> (though not often if you make the menu reasonably small).
>

it materializes only when the window is becoming too small, in most of
the cases it works just fine. In those situations (and only in those),
I'd like to enable the width scrollbar at the bottom of the window.

thanks,
Paolo

Re: Single row navigation menu

am 15.07.2007 21:19:29 von Neredbojias

Well bust mah britches and call me cheeky, on Sun, 15 Jul 2007 18:10:56 GMT
Paolo scribed:

> Hello,
> the page is not online yet, I'm still working on it.
>
> This is the css code

Try adding width:28em; to .nav-top-menu ul.*

* Opera bug.

--
Neredbojias
A self-made man who worships his creator

Re: Single row navigation menu

am 15.07.2007 23:11:35 von jkorpela

Scripsit Paolo:

> Hello,
> the page is not online yet, I'm still working on it.

If you can't be troubled to upload your best effort so far, don't expect
people to spend their time to help you. Bye.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Re: Single row navigation menu

am 16.07.2007 08:45:20 von jmm-list-gn

Neredbojias wrote:
>
> If you still insist, explore the css quality of "white-space:nowrap;"
>
Have you actually tried that? It does not work.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Single row navigation menu

am 16.07.2007 10:38:48 von Neredbojias

Well bust mah britches and call me cheeky, on Mon, 16 Jul 2007 06:45:20 GMT
Jim Moe scribed:

> Neredbojias wrote:
>>
>> If you still insist, explore the css quality of "white-space:nowrap;"
>>
> Have you actually tried that? It does not work.

No, not with floats. I followed-up with another solution.

--
Neredbojias
A self-made man who worships his creator