fmz 14

I am working in a dynamic CMS environment and need to be able to control the spacing between the last paragraph in a series and a list. By default the bottom margin of the paragraph pushes the list down.

In this case I need to keep the spacing between the last paragraph and the list down to normal spacing between lines:

<p>This is the last paragraph in a series</p>
<ul>
   <li>This is the first list item</li>
   <li>This is the next list item</li>
</ul>

Please see the url below and scroll down till you see the first bullet list.

I just need a little help on the CSS.

Thanks.

4 answers

0
points
This was chosen as the best answer

It's looks like you don't have your lists inside a <ul></ul> tag.

To control the list margin/padding as a whole, you need to nest the lists inside the ul tag.

I think the site looks great, and the spacing between the paragraphs and lists look fine. Did you want them to be closer or farther apart?

Answered over 7 years ago by tahdhaze09
o.k.w 2355
1
point

<P> has a default bottom padding, hence the gap. using firebug on firefox, you can see the gap is caused by the bottom padding of 10px.

Padding of P

As the entire content is within the <div id="main_content">, you can add this to your CSS.

#main_content P {
  padding-bottom: 4px; /*<---- play with this number*/
}

Or if you want to control only certain <P> elements, assign them a unique class selector.

CSS:

#main_content P.abovelist {
  padding-bottom: 4px; /*<---- play with this number*/
}

HTML:

<P class="abovelist">you last paragraph</P>
<UL>......</UL>
Answered over 7 years ago by o.k.w
fmz 14
0
points

Thanks for the comments. It is actually the client that wants the gap closed. He is also the one that deletes the ul tags.

That being said he would like them closer together.

Thanks.

Answered over 7 years ago by fmz
  • "He is also the one that deletes the ul tags." Ouch... my condolences. Dwayne Anderson over 7 years ago
  • Yea. Does the client know that they may be causing their own problem? tahdhaze09 over 7 years ago
  • In any case, tell the client if they want the gap closed, you need the ul in there so that it can control the list, and therefore the gap in between. Without it, the CSS doesn't work the same way. tahdhaze09 over 7 years ago
fmz 14
0
points

It took some working with the client to sort things out, but once I got the ul tags back in it was fairly simple to adjust the top margin on the ul. This gave me more control than the modifying the last paragraph. Remember this is a CMS where adding a class on the fly is somewhat problematic. Thanks for all the feedback.

Answered over 7 years ago by fmz
  • Glad I could help. tahdhaze09 over 7 years ago