SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    A couple of niggly CSS problems

    Temporary URL - http://www.respectlife.org.uk/

    Not sure why, but I've had an absolute nightmare with this site, and have a few small problems:

    1) The H1 isn't visible at all, I've tried messing around with h1 a { } etc and no luck.
    2) The navigation isn't displaying correctly, I want it to have some padding either side of the listed items, and have a height of 24px to show the gradient background properly, but nope.

    Plus in general I can't help but feel it's pretty poorly coded, like the content area is going to go wonky, or the shadowed left/right borders are going to go screwy. I also hate the footer, so any advice regarding those bits would be great too.

    Thanks!

  2. #2
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your h1 has this style, so no wonder it doesn't display, just remove the line:
    Code CSS:
    text-indent:-999em;
    Navigation looks fine apart from the empty LI's. remove those and it will be a little better.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the reply, it wasn't quite what I was after with the h1, but I've managed to work out the problem (I put repeat-none instead of no-repeat ; d'oh!) so huge thanks for the nudge in the right direction.

    Ideally, I'd like for the navigation to look a bit like this - not sure how plausible it is though.

    Thanks again

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bump this, but any ideas on getting the navigation to look like that please?

  5. #5
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this for the navigation:

    Code CSS:
    #navigation ul li {
    display:inline;
    list-style-type:none;
    }
     
    #navigation ul li a {
    background:#EFE8CF url(img/nav_bg.jpg) repeat-x scroll 0% 0%;
    border:1px solid #EEE6CA;
    color:#990022;
    display:block;
    float:left;
    margin:0pt 3px;
    padding:5px 20px;
    text-decoration:none;
    }

    There was no use in setting the li to have height when you set it to display inline (inline elements cant have height).

    I have set the bg image to be 0px from the top because that makes more sense considering the bg color you chose beneath it. (Increase the text size and you'll see what Im talking about). Since Im mentioning it; if you increase the text size the navigation slips down behind the sidebar, you should consider fixing it, I have to go now maybe someone else will jump in with that

    btw I only tested it in FX

  6. #6
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thank you so much for that, those tabs are looking a lot better now

    Just a couple of quick questions:
    1) Anyway to get it so it's nudged further to the right and away from the logo?
    2) Is there any reason why the navigation is pushing the content area down so much in Firefox?

    Cheers

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    1) just give it a left margin:

    Code:
    #navigation ul{margin:0 0 0 320px}
    2) Because you have given it a 66px bottom margin! Remove the bottom margin and it should be ok.


    Code:
        #navigation ul li a {
            background:#EFE8CF url(img/nav_bg.jpg) repeat-x  0 0;
            border:1px solid #EEE6CA;
            color:#990022;
            display:block;
            float:left;
            margin:66px 2px 0;
            padding:4px 16px;
            text-decoration:none;
            }
    Your left and right shadow images would have been better as one image (i.e left and right bits in on wide image) that could be applied to the background of the main container in one go. This would clean up the html and make it more solid without those floats in the way.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's perfect, thank you so much Paul!

    Just curious, how would I go about doing that with the shadow images? Leave the body background as it is at the moment, and then have one (very large) image at the top, as the background for the container?

    Edit: Nevermind, just done it, seems to work fine in IE6 and FF, thanks again Paul!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Edit: Nevermind, just done it,
    Glad you sorted it

    Remember that for decoration images you don't really want them in the html at all so hiding them in the background of existing elements is ideal.

  10. #10
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yup definitely, glad to of got rid of those excess divs and markup, cheers Paul!


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
  •