Creating Margin Between UL and Image

etidd · May 4, 2013, 1:11am

Hello everyone,

NEWBIE ALERT!!!

I want to create a bit of space in between the floated images and the unordered list elements (if I choose to use one for page content) on pages like this one. You’ll notice that the bullets for the list-items are protruding into the image. There appears to be something in my lp.css style sheet that prevents me from adding a margin. Maybe my target is not properly set up for the lists’ styles. The problem most likely is somewhere contained in the .floatLeft, .floatRight, or the .articletext classes. I don’t know.


.floatLeft > ul li, .floatRight > ul li{padding-left:20px; margin-left:10px;}
ul{padding:6px 0;}

The style sheet is available on the linked page, but I’ll post it in its entirety on this thread just to make it more easy for everyone.


@charset "utf-8";
/* Landing Page Style Sheet */

*{
    font-family:"Times New Roman", Times, serif;
    padding:0;
    margin:0 auto;
}
body{
    background-image:url("lpbg.gif");
    background-position:50% 0;
    background-attachment:fixed;
    margin-top:15px;
}
#bgtop{
    background-image:url("lpheader.gif");
    background-repeat:no-repeat;
    width:960px;
    height:60px;
}
#bgmid{
    background-image:url("lpbody.gif");
    background-repeat:repeat-y;
    width:960px;
    padding:1px 0;
}
#bgbotm{
    background-image:url("lpfooter.gif");
    background-repeat:no-repeat;
    width:960px;
    height:90px;
}

/* lpcontent is the content area.  The negative top and bottom margins extend #lpcontent over #bgtop and #bgbotm. */
#lpcontent{
    width:796px;
    padding:0px;
    margin:-31px auto -70px;
	position:relative;
}

/* lptitle contains the section icon and header title */
#lptitle{
    height:60px;
    overflow:hidden;
}
.sectionicon{
    height:60px;
    width:60px;
    float:left;
    margin:0px;
}

h1{
    position:relative;
    margin:8px 0 0 20px;
    padding:0 3px 0 3px;
}
h1{
    float:left;
    text-align:left;
    font-size:25px;
    background:url("lpheaderbody.gif") repeat-x scroll 0 0;
    width:auto;
    height:35px;
    text-shadow:1px 1px 1px #030;
    letter-spacing:1px;
}
h1:after{
    content:" ";
    background:url("lpheaderend.gif") no-repeat 100% 0;
    height:35px;
    right:-14px;
    position:absolute;
    top:0;
    width:14px;
    z-index:1;
}
h1:before{
    content:" ";
    background:url("lpheaderstart.gif") no-repeat 0 0;
    height:35px;
    left:-14px;
    position:absolute;
    top:0;
    width:14px;
    z-index:1;
}

.headtitle{
    padding-top:4px;
    padding-bottom:2px;
    margin:0px;
}
.headtitle span{
    border-bottom:2px groove #000;
    font-style:italic;
    font-size:14pt;
    line-height:1;
	font-weight:bold;
}

.floatRight,
.floatLeft{
    overflow:hidden;
    margin:8px 0;       /* vertical margin between content sections */
}
.floatRight img{
    float:right;
    margin-left:4px;
	border:3px inset #000;
}
.floatLeft img{
    float:left;
    margin-right:8px;
	border:3px inset #000;
}

p{
    padding:0;
    margin:0;
}
p + p {margin-top:4px;}

/* bottomlink contains the h2 link */
#bottomlink{
    overflow:hidden;
    padding-top:16px;
    padding-left:130px;
}

h2 a{
    position:relative;
    margin:0px 0 0px 20px;
    padding:1px 1px 0 1px;
}
h2 a{
    color:#009;
    text-shadow:1px 1px 1px #000;
}
h2 a{
    float:left;
    font-size:30px;
    font-style:italic;
    font-weight:bold;
	letter-spacing:1px;
    text-align:center;
    width:auto;
    height:44px;
    background:url("lplinkbody.gif") repeat-x scroll 0 0 transparent;
}
h2 a:before{
    content:" ";
    background:url("lplinkstart.gif") no-repeat 0 0;
    height:44px;
    left:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:1;
}
h2 a:after{
    content:" ";
    background:url("lplinkend.gif") no-repeat 100% 0;
    height:44px;
    right:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:1;
}
h2 a:hover{color:#FFF; text-decoration:none;}
h2 a:hover:before{
    content:" ";
    background:url("lplinkstartafter.gif") no-repeat 0 0;
    height:44px;
    left:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:1;
}
h2 a:hover{
    float:left;
    font-size:30px;
    font-style:italic;
    font-weight:bold;
    text-align:center;
    width:auto;
    height:44px;
    background:url("lplinkbodyafter.gif") repeat-x scroll 0 0 transparent;
}
h2 a:hover:after{
    content:" ";
    background:url("lplinkendafter.gif") no-repeat 100% 0;
    height:44px;
    right:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:1;
}

/* lpfoot contains the Mailing List box and the Back To nav links */
#lpfoot{
    /*overflow:hidden;*/
    padding-top:20px;      /* set space beneath the Quotes link here */
	position:relative;
}
#emailbox{
    float:left;
    height:54px;
    width:216px;
    position:relative;
    overflow:hidden;
    margin:0px 0 0 60px;
}
#emailbox label,
#emailbox label span{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    height:54px;
    width:216px;
    text-align:center;
    font-size:20px;
}
#emailbox label span{
    background:url("sectionemailbox.gif") no-repeat 0 0;
}
#go{
    width:130px;
    margin:30px 0 0 19px;
}
#emailbox input{
    position:relative;
    z-index:1;
}
.submit{
    overflow:hidden;
    margin:26px 0 0;
}

#submissionform{
	margin:0 auto;
	background:url("lpsubmission.gif") no-repeat scroll 50% 0 transparent;
	width:330px;
	height:320px;
	position:absolute;
	display:none;
	bottom:80px;
	left:220px;
	z-index:2;
	padding:60px 10px 0 26px;
	text-align:left;
}
#submissionform div{padding-bottom:3px;}

.fixedwidth{
	width:150px;
	float:left;
}
.inputwidth{width:160px;}
.required{color:red;}

.formsubmitbutton{margin-left:50px; margin-top:10px;}

#errormessage{color:red; height:40px; padding:0 24px 4px 0; margin-right:10px; font-weight:bold; font-size:15px;}
#errormessage p{margin:0; padding:0;}
#errormessage a{color:#09C;}
#errormessage a:hover{color:#0CC; text-decoration:none;}

#successfulsubmit{
	margin:0 auto;
	background:url("lpsubmissionsuccess.gif");
	width:450px;
	height:130px;
	position:absolute;
	display:none;
	bottom:268px;
	left:175px;
	z-index:3;
}
#successfulsubmit p{
	margin:0;
	padding-left:27px;
}
#successfulsubmit h3{
	margin:0;
	text-align:left;
	padding:15px 0 2px 13px;
	text-shadow:1px 1px 1px #0C3;
}
#successfulsubmit h4{
	color:red;
	font-weight:bold;
	margin:0;
	font-size:14px;
	padding:10px 14px 0 0;
	text-align:right;
}

#blackoverlay{
    display:none;
    position:fixed;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
	min-width:1171px;
	min-height:1010px;
    background-color:black;
    z-index:2;
    -moz-opacity: 0.8;
    opacity:.80;
	filter:alpha(opacity=80);
}

.floatLeft > ul li, .floatRight > ul li{padding-left:20px; margin-left:10px;}
ul{padding:6px 0;}

#spamtext{padding:2px 0 2px 0; margin:0;}
#math{font-weight:bold; text-align:center;}
#addition{width:50px;}

#invalidemail{background:url("invalidemail2.gif") no-repeat scroll 50%; width:140px; height:40px; position:absolute; top:35px; left:94px; z-index:0;}

.aicatcher{display:none;}

input, select{background-color:#FFF;}
input:focus, select:focus{background-color:#DEE4EF;}

/*webkit browser fixes*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#submissionform div{padding-bottom:1px;}
}

h3{
    line-height:1em;
    text-align:right;
    margin:9px 60px 0px;
}
h3 a{
    color:#f60;
    font-size:14px;
}
h3 a:hover,
h3 a:active{
    color:#f90;
    text-decoration:none;
}

/* "World Review Group" line */
h4{
    font-size:8px;
    text-align:center;
	padding-right:260px;
    padding-top:6px;
    margin:0;
}

#smaller{font-size:13px; font-weight:bold;}
.hazard{color:#F00; font-size:12pt; font-weight:bold;}
.hazard:hover{text-decoration:blink;}
.headerstatement{font-size:12pt; color:#063; font-weight:bold;}
.articletext{font-size:11pt;}
.articletext a{color:#06C;}
.articletext a:hover{color:#0CF; text-decoration:none;}
.italic{font-style:italic;}
.bold{font-weight:bold;}
.ib{font-weight:bold; font-style:italic;}

/* END */

Thank you and talk to you later, Sitepointers! (:

ronpat · May 4, 2013, 4:36am

etidd, We sure could use some HTML that shows the lists and images. Can you link us to a test page?

PaulOB · May 4, 2013, 12:31pm

Hi,

Lists alongside floated elements are awkward because the marker (the bullet/number etc) is placed outside the principal box and its position is usually manipulated with margins or padding. However margins and padding on static elements will slide under floated content so you would need to apply large margins or padding so that they reach the containing block as they will pass through the floated image (because floats are removed from the flow). However browsers will then vary where the bullet is positioned so you may be no better off.

There are a couple of solutions that you could use.

Wrap the ul in a div and then float it left and then the margins for the bullets will take effect from the parent float edged and not slide under the other floated element (you could just float the ul but then older IE loses the bullets and markers).
Simply set the ul to list-style:inside and then the markers will align next to the text. This is fine if you don’t have multiple lines of text where you don’t want the text to wrap under the bullet. (List-style-inside turns the marker into an inline element and behaves just like another piece of text.)


.floatLeft ul{list-style:inside}

However it would be better to add a class to the ul instead of the targeting method above as that may hit things you don’t want to change.

etidd · May 4, 2013, 10:34pm

Hi Paul and Ronpat, and thanks for your replies.

In order to have the text not wrap around the lists and have the bullets appear outside of the images, I have adopted the following HTML for the lists.


<div class="floatLeft">
				<img src="bestquoteshomereview2.jpg" title="Umbrella Over Home" alt="The coverage is like a giant umbrella over the home." />
				<p class="articletext"><!-- text --></p>
                <ul>
                   <li>Comprehensive coverage</li>
                   <li>Lowest possible rates&frasl;premiums</li>
                </ul>
                <p class="articletext"><!--

                      text

                      --></p>
			</div>

For the styles, I adopted:


ul{padding:6px 0 6px 300px; list-style:inside;}

So much for older IE bullets… I think I’ll survive without it.

I was unable to find a way to get the text to not wrap around the list when it was floated inside a wrapping div.

Thanks for the help. It seemed to achieve what I needed.

PaulOB · May 5, 2013, 9:51am

Hi,

If you are using list-style:inside then you don’t need the 300px left padding unless you don’t want the article text text to wrap under the image of course. The list-style:inside on its own will fix the bullet issue but will of course wrap longer text list items under the bullet and not with the first piece of text as usual.

To wrap a list with list-style: outside you need this structure.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
img {
	width:300px;
	height:300px;
	background:red;
	float:left;
	margin:0 20px 0 0;
}
.text ul {
	margin:0;
	padding:0 0 0 1.5em;
	list-style:disc;
}
.text {
	zoom:1.0;
	overflow:hidden;
}
</style>
</head>

<body>
<div class="floatLeft"> <img src="bestquoteshomereview2.jpg" title="Umbrella Over Home" alt="The coverage is like a giant umbrella over the home." />
		<div class="text">
				<p class="articletext">Lorem ipsum dolor site amet</p>
				<ul>
						<li>Comprehensive coverage list item that will wrap nicely list item that will wrap nicely list item that will wrap nicely list item that will wrap nicely list item that will wrap nicely </li>
						<li>Lowest possible rates&frasl;premiums</li>
				</ul>
				<p class="articletext">Lorem ipsum dolor site amet</p>
		</div>
</div>
</body>
</html>

etidd · May 13, 2013, 3:06pm

Yes, this is a great way to do it by adding in another div with a new class right after the div that either has the class of .floatLeft or .floatRight. I do like it to wrap fully around the image, but I also had to add to that an inside value for the list-style-position property to get the bullets to appear not on top of the images.

Now, I want to take it a step further.

On this page, I added in a nested <ul> element to the mix. The two lists serve as a bullet point and then its supporting detail, respectively. What I want is to add a bit of left padding so that the nested list item will always appear to have a bit of indentation from its parent list (indicating that it’s a subordinate point or supporting detail). This will probably mean that I need another nested div in there somewhere, but I have not put that div into the correct place within the markup. Here’s what I have tried.

The HTML


 <p class="articletext"><!-- WRITTEN TEXT CONTENT -->
                    </p>
                    <ul>
                        <li><span class="bold">Procrastination in getting a policy</span></li>
                    <div>
                        <ul>
                            <li>The older people become and as their health declines, life insurance becomes increasingly expensive, if not entirely unobtainable.</li>
                        </ul>
                    </div>
                        <li><span class="bold">Purchasing the Wrong Term Length</span></li>
                        <div>
                        <ul>
                            <li>Oftentimes, people request the wrong time length for their coverage.</li>
                        </ul>
                        </div>

The styles (lp.css):


.text ul{
	margin:0;
	list-style:disc;
	list-style-position:inside;
}
.text ul ul li{padding-left:1.5em; list-style:square; list-style-position:inside;}
.text{
	zoom:1.0;
	overflow:hidden;
}
.articletext div{padding-left:.8em;}

I can’t imagine that I need anything else besides left padding for the nested div target like positioning or margin. Maybe the nested div needs yet another new class (need to come up with some class names for organization), or I just have that in the wrong place in the HTML.

CSS is the real kicker for me. I need to go grab a new book or something. You guys sure have had a lot of practice.

PaulOB · May 13, 2013, 3:48pm

Hi,

Your html is invalid as you can’t have any elements between the list closing tag and the next list opening tag so your nested ul styles will miss their target.

e.g. this is invalid.


 <ul>
 <li>Without recent medical history, an insurance provider has to average out the mortality risk, which usually raises the rates on term life insurance.</li>
 </ul>
  <li><span class="bold">Insuring only the breadwinner</span></li>
 <ul>

All html content in a list must be beteen the list pair.

e.g.


<ul>
 <li> all content here including nested uls</li>
<ul>

i.e.


<ul>
		<li>
				<p>some content</p>
				<ul>
						<li>Nested list</li>
				</ul>
		</li>
</ul>

Now you can safely target nested elements.

e.g.

ul.className ul {padding-left:3em}

etidd · May 13, 2013, 5:25pm

Ah, I see. I forgot that I have to close the parent list item after the nested list. But, this still isn’t accomplishing what I need. The markup is valid now, but I believe there still may be a need for a nested wrapper div as there is about a 10em spread for the padding to reach beyond the image width, so the text that wraps underneath the image receives the nested list padding, while there is no effect on the text that wraps around the image.

ronpat · May 13, 2013, 7:24pm

etidd,

Why have you assigned padding-left to the inner list items? Normally, they will flow beside the floated object (the image).
Try deleting that padding property and see if that helps.

lp.css (line 327)


.text ul ul li {
    list-style: square inside none;
    [color=red]padding-left: 8em;[/color]
}

etidd · May 13, 2013, 8:06pm

Yeah, that really does help. They do sit right beside there as you’ll see, but it would be nice to see some indentation between the parent list and the child list.

PaulOB · May 13, 2013, 9:15pm

HI,

You could just shift the nested uls left like this:



.text ul ul{
position:relative;
left:20px
}

If that was the type of effect you were after?

You can’t really use padding because that would not left the lists wrap.

etidd · May 13, 2013, 10:08pm

Thanks, Paul. This is exactly what I was looking for!’

Why is this the solution?

ronpat · May 14, 2013, 12:47am

If I might add a note. In order to prevent the text in the sublists from overflowing (and being hidden at) the right edge of the page, it looks like a {margin-right:20px} will be needed, too.


.text ul ul {
    position:relative;
    left:20px;
    [color=blue]margin-right:20px;[/color]
}

PaulOB · May 14, 2013, 11:39am

Position relative moves the element but does not change the flow of the document unlike padding and margins or other forms of position. Therefore you just get a shift of that element but nothing else on the page will change as it still thinks the element remains in its original place.

As Ronpat pointed out above you will need to offset the 20px move by shortening the line by 20px otherwise it will overlap the edge.

etidd · May 14, 2013, 6:02pm

Yes, good catch, Ronpat.

Thanks, everyone!