/    Sign up×
Community /Pin to ProfileBookmark

menubar wrapping

Copy linkTweet thisAlerts:
May 05.2006

Hi

below is the css code that controls the location and size of my menu bar

the problem is that on smaller screen resultions it expands the menu bar onto two line on the page, so “contact Me” would be pushed under “home”

how do I prevent this from happening

[code]
ul#nav.dhtml{
position:absolute;
/**top:0;
left:0;**/

height:20px;
border:none;
border-bottom:1px solid #C8DCC2;
border-top:1px solid #C8DCC2;
width:100%;
background:#EEFAEA;
margin:0;
padding:0;
list-style-type:none;
font-size:12px;
}
[/code]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMay 05.2006 — Try adding [I]white-space: nowrap;[/I]

Without the full document this is just guesswork.
Copy linkTweet thisAlerts:
@WebJoelMay 05.2006 — 
<i>
</i>ul#nav.dhtml{
position:absolute;
/**top:0;
left:0;**/

<i> </i>height:20px;
<i> </i>[B]border:none;
<i> </i>border-bottom:1px solid #C8DCC2;
<i> </i>border-top:1px solid #C8DCC2;[/B]
<i> </i>width:100%;
<i> </i>background:#EEFAEA;
<i> </i>margin:0;
<i> </i>padding:0;
<i> </i>list-style-type:none;
<i> </i>font-size:12px;
}
[/QUOTE]

Out of curioisity, what is this supposed to do? You state NO border, then a bottom-border and a top-border... I image that you will get a bottom & top border as it is stated AFTER the "none", but the redundancy is what I am curious about. ?

-J
Copy linkTweet thisAlerts:
@kprocauthorMay 06.2006 — I'm not shure, this code is part of a menu bar tutorial that I found on the web
Copy linkTweet thisAlerts:
@WebJoelMay 06.2006 — I'm not shure, this code is part of a menu bar tutorial that I found on the web[/QUOTE]

Oh okay then. But it is redundant to say "none" to a selector (in this case, "border") and then next, create the very same selector and declare values to the aforementioned selector...

If you want to keep the bottom and top margin, you can safely (and correctly) remove the "border:none;" part. It serves no purpose. :-)
Copy linkTweet thisAlerts:
@kprocauthorMay 10.2006 — Hi

I have made the changes recommended above but the menubar still wraps to a second line. if I changed or set the postion: would the help. I currently on a computer using a 19in monitor (screen setting 800)and the menu bar is wrapping to the second line
Copy linkTweet thisAlerts:
@WebJoelMay 10.2006 — Like Fang said:

[SIZE=3]Without the full document this is just guesswork[/SIZE].

-Show us the code. All of it. :-)
Copy linkTweet thisAlerts:
@kprocauthorMay 10.2006 — below is a link to my web page,

The css files are long I thought that it would be easier to post a link

thank you

[URL]http://www.tomorrownextweek.com/[/URL]
Copy linkTweet thisAlerts:
@FangMay 10.2006 — Wrap a <div> around #nav and give it [I]style="background:#EEFAEA; border-top:1px solid #C8DCC2;"[/I]

Then change this:ul#nav.dhtml{
height:20px;
border:none;
width:100% !important; width:940px; min-width:940px;
background:#EEFAEA;
margin:0;
padding:0;
list-style-type:none;
font-size:12px;
white-space: nowrap;
}
Copy linkTweet thisAlerts:
@kprocauthorMay 10.2006 — I can't thank you enough for helping me with this. all is fixed
×

Success!

Help @kproc 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.15,
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,
)...