SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Menu spacing problem Any idea how to fix please >

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    They look even to me in Firefox. Could you post a screen shot of what you are seeing? What browser are you looking at?

  3. #3
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #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:

    Code:
    #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.

  5. #5
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I think it's mainly the blur that I don't like. So rather than this

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

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

  9. #9
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  11. #11
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  13. #13
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm I have the left side one at #ABABAB

    What do you think?

    btw have you heard of Simon Cowell?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by MrFlicks View Post
    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.

  15. #15
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    From what I know of Simon Cowell, #666 is a perfect color code for him.

  17. #17
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    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:

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

  19. #19
    SitePoint Zealot MrFlicks's Avatar
    Join Date
    Sep 2011
    Location
    Bucks Herts London Lincs< UK
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by MrFlicks View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •