Topic: Aligning the font with the navigational sub menu, small issue

Hi I have inputted an image as a background for my sub menu and used the following:

.menu ul li:hover ul li:hover ul li, .menu #clientssub {
font-family:Arial, Helvetica, sans-serif;
color:#464646;
font-size:15px;
padding:7px 0 0 8px;
margin:-7px 0 0 0;
display:block; 
width:207px; 
height:35; 
background: url(Images/Nav/clients-sub.gif) no-repeat;
}

Ive used the padding to move the font appropriately on the image and had to use the margin to close up all the images together as the padding moved them too far apart. This margin works but now the buttons are out of line to the main button. Please see image to see what im refering to:

[img]http://www.be-graphics.com/navproblem.png[/img]

If anyone has an idea how to fix this please reply.

Thx

Eddie

Re: Aligning the font with the navigational sub menu, small issue

Do you have site where the half-working code is that we can see?  It's probably easier for us to look at that and figure it out since we don't have any of your HTML code or images.

Re: Aligning the font with the navigational sub menu, small issue

Yeh

http://be-graphics.com/sites/karitane/c … ldren.html

please view on IE7 or FIREFOX as theres still bugs that i need to iron out for IE6 which will come later.

thx

Ben

Re: Aligning the font with the navigational sub menu, small issue

Hi Ben,  Are you just getting into css?!  I only ask because I think you've got id and classes confused! 

You're using class/. for the main/single items and id/# for the sub/multi items.  In css you can only have one instance of an id/# on a page, so clientssub/professionalssub, etc. should be class/. not id/# as there's more than one of them (and structure/menu can be id/# as they only happen once!).  Even this could well be doing some strange things in itself...

You shouldn't need the table to 'contain' the layout, css can do the job better!  I know the jump from tables to css can be confusing at first, but it's worth it in the end!

Is there a good reason that there isn't 'link text' in the link tags?!  Search engines would have a hard time crawling the site at the moment and it would be pretty much unusable for screen readers as they would only see 'link' but wouldn't have clue where where the links go! (Try turning off the images on the site and navigating wink I know this might sound somewhat picky, but having a good html is often the key with funny bugs like this...)

It's very possible to get a menu like that working in IE6 without using hidden IE6 table elements!  Here's a image/text dropdown hybrid of mine that's just css and works fine in IE6 and with images turned off: www.burrswood.org.uk  Turning it from hoz to vert is just styling. (you need a .htc file to get IE6 to play nice, but it makes for easier code)

First off get the id and classes sorted (and some text in the links) and see if the bug is still there!

James Cooper --  God loving, banjo playing, geek!

Re: Aligning the font with the navigational sub menu, small issue

yeh your right im a graphic designer more than a web. Only created a few small business websites in CSS and never had to do a 3 tier flyout menu. But its cool, i managed to solve my issue and remove all images for the tiers (unfortunately the main button images need to remain as client requested specific font). 1 new issue i am having, prob very simple, When i call the rollover class the link text only remains the rollover colour when the mouse is on it and not when the mouse is on the whole button. This is my rollover code for this:

#menu li:hover#professionalssub {
color:#FFF;
position: relative;
display:block; 
padding:6px;
height:18px;
width:205px;
background:#f69e24;
border-top:1px solid #f69e24;
border-right:1px solid #f69e24;
border-left:1px solid #f69e24;
} 
#menu li:hover#professionalssub a:hover{
color:#FFF;
}

any idea what is wrong with this?

thx

Eddie

Re: Aligning the font with the navigational sub menu, small issue

Please could you put a page up again!  It's easier to see the whole thing in context (and we can fiddle with firebug!).

James Cooper --  God loving, banjo playing, geek!

Re: Aligning the font with the navigational sub menu, small issue

yeh cool its here:

http://www.be-graphics.com/sites/karita … ldren.html

thx

Re: Aligning the font with the navigational sub menu, small issue

You need the line:

#menu li:hover#professionalssub a, li:hover#professionalssublast a{
color:#fff;
}

in there!

A couple of things still.

#1, Please sort out the classes and ids, it's just invalid html at the moment!!!   http://validator.w3.org/check?verbose=1 … ldren.html  I think you've also got some <ul> and <li> that need sorting out.

#2, You still need some 'real' text in the top level links.  It's still pretty unusable without images.  Have a look at the burrswood link I posted and see how I did it there!  (it's all one image so there's no 'hover lag')

I hope that helps.

James Cooper --  God loving, banjo playing, geek!

Re: Aligning the font with the navigational sub menu, small issue

cheers for your input, my first task was to get the CSS nav working then ill sort out the invalid html. Yes i had a look at the burrswood link and will sort out the images to include real text.

Eddie

Re: Aligning the font with the navigational sub menu, small issue

I inserted your hover fix which worked fine on the 2nd tier of links but this then effected the way the 3rd tier of links and overwrited the font to white making these invisible :-(

Re: Aligning the font with the navigational sub menu, small issue

Have you fixed it?  It looks ok to me... (if not, you'll need to have another rule building in another level of sub ul/li to cater for the next level)

On the validation, it's really best to get valid html first and then do the css!  Other wise it's a bit like trying to test drive a car without tires on!!!  Also browsers can also sometimes try and 'cope' with invalid html in different ways, which can lead to confusion of its own.  Also if you've got good html to start with, hanging the css off it is a lot easier as all the building blocks are there to start with.

James Cooper --  God loving, banjo playing, geek!

Re: Aligning the font with the navigational sub menu, small issue

the validation seems to just find every website with errors even google / facebook / ebay so hard to know if im doing things right if everything is working fine on the front end? But i do know i need to change my menu to use the class funtion and not the id so will change that anyway.

Re: Aligning the font with the navigational sub menu, small issue

Don't worry about "popular" pages like facebook and google that don't validate. Sure invalid code can work fine, but if you're trying to make sure a site works it's really best to make sure you've done everything correctly and followed all the rules first.  If you're following all the rules, it makes it a whole lot easier to figure out what the problem is.

An ID is used for a single element, it should have a unique ID name that no other element has.  Usually I use this as the logo at the top of the page or a title.  It's only used once.

A Class is for a group of similar items.  For example if I were making a blog, each post of that blog would be in the same class.  If I change the background color of that class, every single blog post will now have that background color.

Last edited by C.Barr (2008-05-14 20:28:55)

Re: Aligning the font with the navigational sub menu, small issue

Yeh i now understand the importance of IDs and classes but now trying to reformat my nav system from the id to the class series is becoming an uphill task :-(