/    Sign up×
Community /Pin to ProfileBookmark

Trying to insert CSS drop-down menu

Copy linkTweet thisAlerts:
Apr 12.2009

I am trying to insert a CSS drop-down menu into my current navigation bar, but I am having a hard time getting it to display properly. I can’t get the new boxes to fit in with the wraparound image.

Here’s my current menu navigation:
[url]http://www.wiredmango.net[/url]

Here’s the drop-down menu I am trying to put into the navigation bar:
[url]http://www.wiredmango.net/index6.html[/url]

Any help would be greatly appreciated!

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrtom100Apr 12.2009 — Well if you are trying to get the same height as the one you have on your current site i had a look at your CSS you have the

#menuh

{

background: #FFFFD5 url(menu.gif) no-repeat;

height: 50px; <------(if you change this the box will not bulge bigger than the rest )

line-height: 0px;

padding-left: 30px;

font-size: small;

font-family: arial, helvetica, sans-serif;

width:100%;

float:left;

margin:2em;

margin-top: 1em;

}

If this is not what you was looking for let me know...
Copy linkTweet thisAlerts:
@inwhiteroomsauthorApr 12.2009 — Yeah, I see how to change the height of the boxes, but I still can't get it to fit in the navigation bar properly. Also, the bar itself is no longer fitting in with the main body; it's starting to jut out the right side. I'm not sure what the problem is.

Well if you are trying to get the same height as the one you have on your current site i had a look at your CSS you have the

#menuh

{

background: #FFFFD5 url(menu.gif) no-repeat;

height: 50px; <------(if you change this the box will not bulge bigger than the rest )

line-height: 0px;

padding-left: 30px;

font-size: small;

font-family: arial, helvetica, sans-serif;

width:100%;

float:left;

margin:2em;

margin-top: 1em;

}

If this is not what you was looking for let me know...[/QUOTE]
Copy linkTweet thisAlerts:
@mrtom100Apr 13.2009 — Can i ask what browser you are looking at this website in as well as depending on the browser i could be seeing a totally different site you see. If you are using by chance IE 6 then you will see a different view as it is a older more buggy browser. As in IE 7 without the change i suggested the link boxes are twice the size of the navigation bar, same in Firefox but in IE6 the navigation buttons float outside the navigation bar.

If it is IE6 you could try zeroing all the browser defaults on CSS but you will see slight changes in all browsers this fixes some of the IE6 bugs, the main bug that people find with IE6 is the Float-Left and Padding Left bug. You can not float div's left and use padding left at the same time.

This is due to the default settings of the browser..
Copy linkTweet thisAlerts:
@inwhiteroomsauthorApr 13.2009 — I am using Firefox. I also tested it in IE6 and it is coming up with the same problem. Even when I have the boxes at a smaller size, they do not fit in the navigation bar.
Copy linkTweet thisAlerts:
@mrtom100Apr 13.2009 — One thing i have noticed is that you havented done the <ul> tags correct needs to be more like <ul>

<li><a href="/index.html">Home</a></li>

<li><a href="/about.html">About</a></li>

<li><a href="/services.html">Services</a></li>

<li><a href="/clients.html">Clients</a></li>

<li><a href="/contact.html">Contact</a></li>

</ul>

try that first then email me a screen shot if it is still not working [email][email protected][/email] as i can not see what you have, as screen resolution comes into it as well sometimes..
Copy linkTweet thisAlerts:
@inwhiteroomsauthorApr 13.2009 — According to the tutorial I used, I am under the impression that I have to use the list tags the way I did in order to have drop down menus. Here is a screenshot of what I am seeing:

http://www.wiredmango.net/screenshot.jpg

Thanks for your help.
Copy linkTweet thisAlerts:
@mrtom100Apr 13.2009 — well i have had a quick play as i am on a project myself i have made it so it doesn't over flow the edges of the dive with the following css under the #menuh



#menuh

{

background: #FFFFD5 url(/menu.gif) no-repeat;

height: 50px;

line-height: 50px;

padding-left: 0px;

font-size: small;

font-family: arial, helvetica, sans-serif;

width:99&#37;;

float:left;

margin-top: 1em;

}

as for each of the links expanding outside the navigation background this because you have the display: block under #menuh a

hope this helps
Copy linkTweet thisAlerts:
@inwhiteroomsauthorApr 13.2009 — Well, the more I played around with it the more I realized having the menu inside the navigation bar wouldn't really look that great anyway. Is there a way I can round the edges of the boxes, particularly the left side of the Home box and the right side of Contact? I decided to just use the drop down menu, but I want to clean it up a bit so it looks better.
Copy linkTweet thisAlerts:
@mrtom100Apr 13.2009 — If we was in the world were CSS3 was being used by all then yes but at the moment you will have to use graphics best place that will give you the code and examples and images that you can change is

http://www.dynamicdrive.com/style/csslibrary/category/C1/

have a look on there many good ones and can easily be changed to suit your needs
Copy linkTweet thisAlerts:
@inwhiteroomsauthorApr 14.2009 — Wow, that is exactly the kind of resource I was looking for. Thank you!
×

Success!

Help @inwhiterooms 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 6.1,
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,
)...