Menu spacing problem Any idea how to fix please >

[MrFlicks]

I have a menu that I can't quite get to display right.

This Page here

Has a drop down (mega Menu as they are called some places) and I can't quite get the 5 menu items to display evenly spaced apart.

Could anyone please see if they can spot what is wrong please?

I think it is likely the html and something real simple but as I only tinker at this stuff it could well be the CSS but more likely something daft I have done whilst copy and pasting various menus into place.

[ralph.m]

They look even to me in Firefox. Could you post a screen shot of what you are seeing? What browser are you looking at?

[MrFlicks]

I am using Chrome whilst looking but I just checked FF and it does it in that to. The three right side links are closer together than the two to the left side in both browsers here

This is a Chrome screenshot >

Capture-tted-menu.JPG

[ralph.m]

O, I thought you meant the columns in the dropdowns.

Well, your first two links have margins but the other don't, because of this:

#menu2 .menu_right {
  float: left;
  margin-right: 0;
}

So remove that zero margin and change this margin so that all of the items can fit on the line:

#menu2 li {
  border: medium none;
  display: block;
  float: left;
  margin-right: 30px;
  margin-top: 7px;
  padding: 4px 10px;
  position: relative;
  text-align: center;
}

Perhaps for better results, give the LIs all the same width.

[MrFlicks]

perfect Thanks ralph.m

I reset those two margins above to 10 and it looks lovely now

Didn't spot anything else I ought to address by any chance did you?

[ralph.m]

Nah, looks fine to me, except perhaps the text shadows on the various links. They look a bit muddy to me. I would tone them down quite a bit.

[MrFlicks]

Funny you should say that ralph.m one of the cartoonists said something about the shadow on the text. Though admittedly that was when the text was pale grey on the surface with a black shadow.

How do I "tone it down" a bit shadow wise without losing the 900b09 colour BG which matches the logos and my traffic light link system?

Traffic lights as in red (stop) links, green (go) hovers and yell on page eye draws yell being yellows/golds/oranges etc (Enter the Ted's quite a lot LOL)

[ralph.m]

I think it's mainly the blur that I don't like. So rather than this

#fotlinks2 {
  font-size: 14px;
  text-align: left;
  text-shadow: 1px 1px 1px #900B09;
}

something like this

#fotlinks2 {
  font-size: 14px;
  text-align: left;
  text-shadow: 1px 1px #900B09;
}

[MrFlicks]

It's very subtle but you are right it does look better with only two 1px and not 3 thanks


I think I may even have a tinker with the title to as I am not sure about that either though it does look a lot better since I put the black and redish colours in and none of the cartoonists have commented (though they are pretty busy so may not even have looked properly in the last day or two).

[ralph.m]

Yes, I just took the bottom links as an example. If you are going to use the blur value, it's better to have a different (and I suppose subtle) color for that, like a very light gray. I don't think it works to use the same color as for the text with blur.

[MrFlicks]

I went half way with all the footer links and did them#666666

I think it looks a lot better (still will have a little tinker to see if other things like lighter or darker etc look better.

I have cartoonists to work with which as you can imagine are quite good at details and pointing out the smallest of things

[ralph.m]

That looks better. I would still go for a lighter shad of gray again. Shadow only needs to be very subtle to have a nice effect. Anything more can be overbearing.

[MrFlicks]

hmm I have the left side one at #ABABAB

What do you think?

btw have you heard of Simon Cowell?

[ralph.m]

hmm I have the left side one at #ABABAB

What do you think?

Yep, that does look better.

btw have you heard of Simon Cowell?

Yes, he's well known here, though I don't watch a lot of that stuff. I tend to watch occasional highlights on YouTube.

[MrFlicks]

LOL

I thought you might find this teddy bear amusing - He is called ScowlerTed >



I actually went back to #666666 for the shadow for now as I am still not completely sure what is working best tbh

[ralph.m]

From what I know of Simon Cowell, #666 is a perfect color code for him.

[MrFlicks]

LOL

I have another problem now

This test page

I am trying to get the gallery2 (a new addition) to display with 5 100px images sitting nicely in place but no matter how much I change the width's of columns I don't seem to be getting it there. Any idea what I am doing wrong please?

the gallery2 css code is in the foot of the cartoon style sheet and the columns is in the kdm one

[ralph.m]

The container is 510px wide, so that's how much room you've got to play with.

You have 5 images each of width 100px. So you've used up 500px. 10 to go.

The each LI has margin-right of 1px. Now you are up to 505px.

Each LI also has a 1px border, so 1px left and right, which means 2px each, which means 10px in all. Which means you've blown out to 515px ... and hence one LI drops, as it can't fit in the available width. Since the images have a little border anyway, I'd suggest removing the 1px border on the LIs.

ul.gallery2 li {
  border: 1px solid #BBBBBB;
  float: left;
  height: 100px;
  margin-right: 1px;
  margin-top: 0;
  width: 100px;
}

You will also need to remove the lines in red on the UL itself, as I just noticed that's limited to 500px:

ul.gallery2 {
  height: 100px;
  list-style-type: none;
  padding-left: 1px;
  width: 500px;
}

[MrFlicks]

Thanks ralph.m

I have been messing about with different settings and borders etc for the last hour and didn't get that right. Sometimes I wish I had not refused Computer lessons when I was 11 due to ergonomics LOL. I might be a little more clued up about little intricacies like that if the prospect of arthritis and glasses had seemed more appealing back then in 1979.

[ralph.m]

Sometimes I wish I had not refused Computer lessons when I was 11 due to ergonomics LOL. I might be a little more clued up about little intricacies like that if the prospect of arthritis and glasses had seemed more appealing back then in 1979.

Nah, it doesn't take long to figure out this CSS stuff. I've only been at it a few years. For most of my life, I reacted to computers like a priest confronted by demonic apparitions—squinting and holding up the cross in a desperate bid to ward off evil. But then I got interested ... and now I've sold my soul to them.