CSS issue with menu & image slider. Help appreciated!

Discussion in 'CSS' started by Kyrix, Sep 25, 2012.

  1. #1
    I'm no good at this. I've been roughing out a site design. This should be so easy but it has me foxed. Im trying to put about 5-10px of grey background space between the Spry menu bar and the image slider. I just can't do it. No amount of padding seems to shift it. I don't know if any of you out there can spot what i have to do. Thanx.Site is here http://www.kyrixtech.com
     
    Kyrix, Sep 25, 2012 IP
  2. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your UL doesn't really have a 'height'. Take a look with any debugging tool in a modern browser such as Chrome or Firefox or Opera; you'll see it by inspecting the element. All its content list-items are floated left.

    You can apply float:left to the UL itself. After that you can specify a margin or padding bottom and it ought to take effect.

    Another straightforward way is to apply margin-top to div#slider, the container element below it. Same effect.

    By the way, I didn't really dig through the underlying code on your site and won't comment on it. You have a nice eye for design, though. Visually, it just looks good. Nicely conceived.
     
    HBz, Sep 25, 2012 IP
  3. Kyrix

    Kyrix Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanx for speedy reply HBz. Appreciated. Height then huh? I'll give it a go. Thanx again.
     
    Kyrix, Sep 25, 2012 IP
  4. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You're welcome! No, don't give it a height! I was just pointing out why the padding wasn't doing anything. It isn't applying padding or margin to anything really, because the UL doesn't really have anything inside - all the LI's are floated.

    Actually, the simplest thing you could probably do is just give your padding-bottom: definition to ul#MenuBar1 li. That'll work - the padding will go underneath the individual list elements.
     
    HBz, Sep 25, 2012 IP
  5. Kyrix

    Kyrix Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes, excellent.....worked. You've been a massive help. I have a slight px issue with the Spry rollover but thats well do'able. I wouldnt have sorted that out myself. Oh dear! LOL!
     
    Kyrix, Sep 25, 2012 IP