CSS slightly wrong a couple of tips please

I have been helping out one of the best caricKATusrists in the UK swapping some cartoons for some web help and seo and I just tried adding the Google type top bar on the index page (the rest is just WP on suffusion theme)

But I have some sort of conflict going on with the original CSS for the page and the Google top nav CSS

The fault makes it display funny and also the display text in the top bar wasn’t the blue of the rest of the page so what is that conflicting with the top nav CSS?

Any pointers please? The thing is here

Oh and check out my friend JP’s art while you take a look as it is absolutely brilliant (Image 4 in the slide is of my own DTTeds characters btw).

It just looks like the 60px width per <li> in that list is causing the text to break and the overflow:hidden is cutting it off at the 45px height. Why not just remove the 60px width and let the <li>s naturally expand?

excellent thanks sdt76 I hand’t spotted that tbh

I now have a different prob though as it is still displaying a bit weird RE the lines coming down form the menus.

scrub that I fixed the second bit it was a height attribute

Is it possible to sort of float this menu centre does anyone know? I was under the impression that even if used as centre instead of left it will still break in many places (browsers I mean) anyone know?

in fact scrub that that breaks the slide menu nav display hmm how do I split those so I can keep the width and height attributes with the 60 in as b4 but make it display fluid/full width/elastic or whatever its called for the top nav?

I’m not sure why it would break. Usually centering is done by having a set width for the element and then adding margin:auto (or auto on the left and right) to it.

I don’t see a slide navigation, but it sounds like, if you are trying to have a width of 60px for one navigation, and a separate width with elasticity for your global navigation, you would need to separate the navigation classes and define the <li> elements separately. Not sure if I am understanding what you want correctly.

sdt76 I have solved that float problem with the display text as it did look better once I tried what you said about the 60px thing above

However I had to change it back as the 60px thing and the height thing I changed afterwards makes the display of the nav under the slide go wrong.

In other words changing the width and height of the .li changes it for both the top nav and the slide nav which doesn’t work as the top nav worked wiht a fluid or let it have no set width and a 30px height setting but I need to work out how to do that just for the top nav

I think I need to add a second set of li is that right? and rename the top nav li accordingly in the htm page is that right? if so how is the best way to do that?

hmm if I change the top nav menu css to menu1 do I change all the items called menu or just the first one 1

would that work? If I change the top nav menu div to menu1 in the htm page of course.

I think I see what you are saying now. Yes, you need to have two unique classes/IDs in which you define the <li> properties and values differently. Having both navigations share the same rule is what is messing it all up.

So you would have something like: .globalnav ul li {} and for the slide menu you would have .slidemenu ul li {}

Then you define the styles for each separately, and add the 60px width the the slidemenu class, and keep it out of the globalnav class.

oh so simply changing the top nav menu items to menu1 won’t work then? Would it if I changed the li to li1 etc to or do I have to write something else?

never mind I sussed it I just called all the ul and li in the top nav ul1 and li1 and it works so that will do I guess

If you change to “menu1” it would make it unique, but semantically, what does menu1 mean? It seems less clear exactly what it is. If you call it something like “globalnav” I know what it pertains to just by looking at it. for the <li> question, you can’t make it “menu ul li1 {}” because there is no such element in HTML called li1. To do that you would have to name a class “.li1” and attach it to the <li> element like this <li class=“li1”>

I think that must be what I have done then sdt76 as it works

I don’t really know how to do what you just said as things are set up with two style sheets tbh

not ideal what I have done though as I have no clue how to set the top ul li height to 30px so it looks nicer on the hover over (in the top nav I mean)