SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Hybrid View

  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,168
    Mentioned
    453 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,168
    Mentioned
    453 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,168
    Mentioned
    453 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)
    hmm I have the left side one at #ABABAB

    What do you think?

    btw have you heard of Simon Cowell?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    453 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.

  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)
    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

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

  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)
    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


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
  •