Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

<p>&nbsp</p>?

Discussion in 'Website Coding & Programming Forum:' started by Tony Hardy, Aug 26, 2011.

  1. Tony Hardy

    Tony Hardy Well-Known Member

    Hey there.

    I know for a fact that I'm not meant to use <p>&nbsp</p> at all to create spacing.
    However, on Tasty Treats - Sweets, Pop, Biscuits and Confectionery Shop - North East England if I don't have it in position as such;

    Code:
     <div class="tag">
             <ul>
              	<li><a href="http://www.shop.tastytreats.org.uk/collections/create-your-own">Create Your Own</a></li>
                <li><a href="http://www.shop.tastytreats.org.uk/collections/sweets">Sweets</a></li>
                <li><a href="http://www.shop.tastytreats.org.uk/collections/lollies">Lollies</a></li>
                <li><a href="http://www.shop.tastytreats.org.uk/collections/hampers">Hampers</a></li>
                <li><a href="http://www.shop.tastytreats.org.uk/collections/gift-ideas">Gift Ideas</a></li>
                <li><a href="http://www.shop.tastytreats.org.uk/collections/weddings">Weddings</a></li>
                <li><a href="http://www.shop.tastytreats.org.uk/collections/seasonal">Seasonal</a></li>
              </ul>
              <p>&nbsp; </p>
            </div>
    The image Categories moves up and under the navigation menu. I can't work out how to make it fixed in position, the styles.css isn't helpful at all.

    I've also had to use it on a few of the pages with not much on to create space, otherwise theres a massive shift to the left on certain pages?
     
  2. djb

    djb Member

    For lists and anywhere you need precise spacing you can add css padding, something like the following although this might be a bit wrong as I haven’t got time to check it!

    ul.tag {
    padding-bottom: 10px;
    }

    For the other pages I’d investigate what’s causing it to move.
     
  3. Tony Hardy

    Tony Hardy Well-Known Member

    It was the fact it was broken down into 2 divs that causes it to move. When the bottom div is empty, then it jumps. Badly coded template.

    I'll try that David, cheers.
     
  4. chris_17

    chris_17 Member

    You could either use a class in the last div then set a padding bottom of how ever many pixels needed to push it down, alternatively you could use an nth child selector such as:

    Code:
    .tag ul li:last-child{
       padding-bottom:25px;
    }
    However nth child isn't *that* widely supported yet, mainly by IE (surprise surprise).

    But as you said the template it quite badly coded.

    Try using the developer tools in chrome or firebug for firefox, saves a lot of time.

    Hope this helps

    Chris
     
  5. Tony Hardy

    Tony Hardy Well-Known Member

    Cheers Chris.
    I managed to sort out both issues using the padding option.
    I had no idea how many pixels needed to be pushed downover, just had to play around with it until I got it right.
     
  6. Tony Hardy

    Tony Hardy Well-Known Member

    Actually, that's a lie.
    I managed to sort out the tag issue, now I thought I'd sorted out the DIV on the right side by padding the bottom of it out, but now it appears to have stretched all of my pages.
     
  7. Tony Hardy

    Tony Hardy Well-Known Member

    Fixed it. DIV in a DIV with padding.
     

Share This Page