/    Sign up×
Community /Pin to ProfileBookmark

stoping menu wrapping in fluid layout

hi wonder if anyone can help i wish to have my menu not wrap when the user minimises their screen or if they view the site in a smaller screen any ides the site is at

[url]www.nbyrne.co.uk/menu.html[/url]

the site is not completely finished so not all links are working

thanks

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@CentauriJan 24.2007 — You would have to decide what is to happen if the menu doen't wrap.

white-space:nowrap applied to the ul style will prevent the wrap, but push the menu outside the borders.

A minimum width applied to the wrapper div could limit the width reduction so that wrapping does not occur, but increasing the text size will still cause the problem, and IE doen't recognise min-width anyway.

A fixed width on wrapper makes the site less flexible, and still doesn't allow for text resize.

Possibilty could be to define the <a> tags as blocks with a width set in ems (to allow for resizing text) (5.5em looks about right) and set the li as float;left. overflow:hidden applied to the .menutab style will prevent collapse of the ul. This would allow the wrap but without the overlap, and cater for text resizing whilst keeping the site fluid.

Cheers

Graeme
Copy linkTweet thisAlerts:
@nib131authorJan 24.2007 — thanks i will give that a go & see if it works, if not i will probably leave it i dont think it destroys the site to much having the menu wrapping, and most people work with larger screens now.

thanxs
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...