<p>&nbsp</p>?

[Tony Hardy]

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;

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

 

[djb]

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.

 

[Tony Hardy]

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.

 

[chris_17]

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:

.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

 

[Tony Hardy]

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.

 

[Tony Hardy]

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.

 

[Tony Hardy]

Fixed it. DIV in a DIV with padding.