16 replies [Last post]
bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

All,

I am having some difficulties in styling my menu for my site.

I am trying to create a horizontal navigation & subnavigation menu, it is the subnavigation menu that is presenting some issues.

Link

Page

I would appriciate any help.

Regards

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I can see that there's

I can see that there's trouble - but you haven't described the problem very well. How do you want it to look? Is the subnav vertical or horizontal? etc, etc?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Bach you have 72 posts to

Bach you have 72 posts to your name you should now better how to present a basic question?

How on earth are we meant to guess at what your menu is supposed to be doing?

You must provide adequate descriptions of the problems you are having.

It's tiresome to have to make posts that just ask people to provide the information required and we seem to have to do it all too often.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Explanation

First of appologies, for not making myself clear enough.

When I say "horizontal navigation & subnavigation menu", I meant horizontal navigation and horizontal subnavigation.

The problem I am having is
1.The hover image seems to be to large even when the height is set in css
2.Subnavigation seems to have quite a number of problems (position, font style, margins, padding etc) to help I have included an image for now I have planned it to look.

Regards

AttachmentSize
nav.jpg 8.91 KB

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you're going to want to

you're going to want to position the subnav absolute - so change the float:left to position:absolute. Then you need to give the #menu ul position: relative for the subnav to position from. Then eliminate the top margin in the subnav and add top: 38px; and left: 0; Now remove the 38px margin from the subnav anchor and you'll be pretty close - just tweak to suit your needs.

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Wolfcy911, Thanks for your

Wolfcy911,
Thanks for your reply.

I have carried out the changes you have suggested, the remaining issues are. (uploaded to link in original post)

I have a couple of problems remaining, some of which might be down to the coding.

The hover effect on the navigation page is the same as the main menu.
The sub navigation, height is far to big.

Any help, appriciated.

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Bach Please don't think I'm

Bach Please don't think I'm having a go because I'm not honestly but it's very hard to help as you are tending to make statements rather than ask questions. Smile

bach wrote:

I have a couple of problems remaining, some of which might be down to the coding.

They sure are Smile but then that is nearly always the case for all of us.

bach wrote:

The hover effect on the navigation page is the same as the main menu.

erm yes it is! :shrug: what do you want it to do? I don't see any rules that state that something different should happen, you will have to clarify and I assume by 'navigation page' you mean the sub list links ?

bach wrote:

The sub navigation, height is far to big.

Yes it is! this is due to possibly not understanding how descendent selector rules function. Your sub ul height - in fact your heights in general - are controlled from one point and that's the anchors, your height property is in the ruleset that selects thus: #menu ul li a
what this selector group means is that all anchors that have a parent or ancestor element of li that in turn has a parent or ancestor element of ul should have a height of 38px. The important word here is 'ancestor' ALL anchors that reside at any level within your nested ul construct are going to have the same height as they must all live within a li element that also must live within a ul element.

You need to break that descendent selection by either re-stating a size but more specifically i.e ul li ul li a{} (this states that your anchor must be nested at a secondary level of ul li items) or you could add a class to your sub ul to hook new rules on i.e ul.sublist li a {height:#;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

change #menu ul li ul a to

change #menu ul li ul a to have a padding of 3px 10px; and add height: auto;

Then as Hugo said, you can address the hover on the submenu by specifically targeting those anchors.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

was #menu ul li ul a{}

:? was #menu ul li ul a{} already in there? did I overlook it Sad

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Replies

Thank you both for your replies, there is still so much I don't understand about CSS.

I was esuming that if I did not specify a style it would not have one, but after reading your comments (Hugo) I was wrong.

Hugo
You need to break that descendent selection by either re-stating a size but more specifically i.e ul li ul li a{} (this states that your anchor must be nested at a secondary level of ul li items)

I think as long as I understand this I have done this

#menu ul li ul a{ margin: 0 0 3px 0; padding: 1px 10px; background: #6f8932 none repeat scroll 0% 50%; text-decoration: underline; color: #000; font-size: 12px; height: auto;

but the image is still being displayed, am I not understanding ?

Regards

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Off top of head:

Off top of head:
probably is as the image/background was placed on the ul li a{} so it's any anchor that happens to have a li and a ul as ancestral elements so that means that your nested ul anchor will pick up that image unless you re-state the image property with background:none or some other value.

Edit/ your background declarations are not quite right you can't specify a hex color then keyword 'none'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

2 more

Thanks,

I have removed "none" from the background attributes.

I am left with two problems

1. The hover the the main menu seems to be to large (overhang).
2. Sub navigation is not the whole width of the page.

I can't see what I am missing for these.

Regards

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

change the height of #menu

change the height of #menu ul li a from 38px to 30px (there's 8px top padding).
change the width of #menu ul li ul from auto to 100%

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Thanks,

Thanks for your help, worked great.
I am trying to understand why the padding caused this problem. as the image does not appear to start lower at the top.

Regards

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

background images will

background images will appear in the padding area. The padding is added to the overall width/height.

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

no links

Thanks for the explanation.
I have started to apply the css navigation style to my site. I have noticed that I have not created a style for none linked elements.

I have modified the site to reflect this, I am think can I just modify the existing ul li ul to reflect ul li ul a ??

Regards

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

bach
Offline
Enthusiast
UK | South Wales
Last seen: 13 years 34 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Update

I have updated the style but it has messed up the role over affect and the submenu spacing.

Any ideas.

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."