• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

<p>&nbsp</p>?


Tony Hardy

Well-Known Member
#1
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
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

Well-Known Member
#3
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
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
 

Tony Hardy

Well-Known Member
#5
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

Well-Known Member
#6
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.