Jump to content

Css Navbar - <A> Element Needs Clearing


Recommended Posts

Hi all, It's been a while since I've been here: like the new forum style! To my question, as this has been giving me a headache today! I have done a horizontal nav bar, using a display: block for the <a> elements, which is working fine. However, the drop-down menus are not behaving correctly. They are out of position, yet I believe I have narrowed the problem down to the <a> elements. I am using a text link on the drop-down menu (no width or height, no border, and inline) yet they don't seem to be taking any notice of my extra CSS. Is there a simple way to clear the CSS styling for the <a> elements after they have dealt with the topLevel block element? Can I use a <span> on this? Any help appreciated! EDIT: You can see my current progress at: http://www.rabel.org.uk/tests/test-oct-2011.html Mark.

Edited by Mark H
Link to post
Share on other sites

By default the unordered list tag ul has a padding on the left, that why the parent ul is the same distance from the left edge of it parent container div#nav as the child ul is from the parent li, set nestedList to zero padding, and you may want to zero text-indent for IE browsers

.nestedList {	display: none;	font-size: 12px;	left: 30px; /*may need adjust to your requirement, but i would set it to 0px to line up to left li edge*/	line-height: 12px;	list-style-type: none;	padding: 0;	position: absolute;	top: 40px;	width: 0;	z-index: 99;text-indent:0;}

Link to post
Share on other sites

Thanks dsonesuk, Actually that wasn't the problem, but thanks for the hints I am sure they will come in useful. I have corrected a whole load of stuff and the main problem I was having was the drop-down menu not centering the text. I realised I had a float: left on them. :blush Also, I have had a problem with the hover background colour. I wanted it on the top level but not the dropdowns. I have found a work-around by setting a background image, but is there any way of clearing a colour? i.e. make it transparent? Thanks alot and bless you.Mark.

Link to post
Share on other sites

For very new browsers, you can set the color in RGBA format (red, green, blue, alpha). I don't know how well supported it is. For example:background-color: rgba(255,255,255,0.2); You can use the child selector to target just children and not all descendents:

ul > li {  /* Some style here */}

This isn't supported in Internet Explorer 6, but the less support that browser gets the more people will move to a better browser.

  • Like 1
Link to post
Share on other sites

This will clear all background images, and background colours, from beyond the parent level, when placed at bottom of css style sheet, adjust it by resetting the element background again below it. #main ul.nestedList li, #main ul.nestedList li a:hover, #main ul.nestedList li a:link, #main ul.nestedList li a:visited, #main ul.nestedList li a:active { background: none repeat scroll 0 0 transparent;}

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

Thank you for your help guys. Ingolme: as I want to reset the colours for the child elements it was the background: transparent; attribute that I didn't realise existed! Dsonesuk: I am presuming that I can use the transparent value for any background attribute? Say, background-color: transparent; ? Then I could just add it to the elements/classes I want to add it to. Thanks.

Link to post
Share on other sites

Ingolme:

This isn't supported in Internet Explorer 6, but the less support that browser gets the more people will move to a better browser.
I long ago gave up trying to accommodate IE6. I have enough trouble with 7-9! Mark.
Link to post
Share on other sites
snapback.pngMark H, on 10 October 2011 - 08:52 PM, said: Dsonesuk: I am presuming that I can use the transparent value for any background attribute? Say, background-color: transparent; ? Then I could just add it to the elements/classes I want to add it to.
If thats a question, then the answer is yes, transparent is perfectly valid for using in background-color: and also border-color, but note setting transparent border won't work for IE6 and below. Edited by dsonesuk
Link to post
Share on other sites

Thanks Dsonesuk, Yes, it was a question and thank you for your answer. I have adjusted what was needed and almost all is fine. I will start a new thread for the remaining problem as it's a different topic. Thanks,Mark.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...