SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu not looking good

    I am having some problems with the navigation menu here http://tinyurl.com/34p8gzn, basically I just upgraded wordpress to version 3 and it ruined the menu somehow, any help on what is wrong?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Um ... there isn't a navigation menu ...

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the menu just beneath the header image

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,401
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)
    Did you try clicking on the link? It shows a 'Site is currently undergoing updates' page.
    Maybe cleaning your cache, or login out of the site?

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh sorry! need to disable maintenance mode, check again in a minute

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok you should see it

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    .bubplastic.horizontal ul li a {
        display: block;
        height: 27px;
        padding-left: 15px;
        float: left;
        text-transform: uppercase;
        font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
        font-size: 90%;
        color: #FFFFFF;
        text-decoration: none;
    }
    Try taking out the padding here
    Ryan B | My Blog | Twitter

  8. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like them to have some padding on each side and text be centered width and height in each button.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also when you hover on one of the menu items the content in the page moves which shouldnt be so

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Sorry, but asking people to help with a page that has five stylesheets attached to it isn't helpful. There's rarely any need for more than one stylesheet, two at the most. Five means we could end up changing something in one that knocks out something elsewhere, or missing something elsewhere...

    One suggestion from a code point of view is to get rid of about 95% of your classes.
    Most of those could be either combined or replaced by descendent selectors (in other words, if every <li> in <div class="menu"> has the same class, you don't need that class - just address it by div.menu li {...}).

    I'm also highly intrigued by the construction
    <li><span class="sliding-doors"><a ...><span class="sliding-doors">Text</span></a></span></li>
    It isn't technically speaking wrong, but it is so messy and confused that I wouldn't be surprised if that is part of the problem. (And again, all instances of class="sliding-doors" are redundant).

    And a final tip, nothing to do with the design but just a bit of general good practice - don't have title text on a link if all it does is repeat the visible link text. That means that people with screen readers often hear it twice. If it doesn't add anything extra, there's no need for it.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    When you are hovering you are adding 1px bottom border which increases the height of the element and causes #content to move because its floated.

    Remove the border, set the line-height and clear the float.

    Code:
    .bubplastic.horizontal ul li a {
        line-height:27px;
    }
    .bubplastic.horizontal ul li a:hover {border:none}
    
    #content{
    clear:both;
    }

  12. #12
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!

  13. #13
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Sorry, but asking people to help with a page that has five stylesheets attached to it isn't helpful. There's rarely any need for more than one stylesheet, two at the most. Five means we could end up changing something in one that knocks out something elsewhere, or missing something elsewhere...
    </snip>
    I totally agree. It took nearly 5 minutes to find the CSS rule...
    Ryan B | My Blog | Twitter


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
  •