Image as bullet points - html

Question

So, I'm just making a mock webpage (HTML & CSS), but when I used the background-image attribute, it gets misaligned.
Here's a snapshot of what it looks like (added the green border around the ul for the div, #watchlisten):
Here is my HTML code:
<div id="watchlisten">
<h2>Watch/Listen</h2>
<img class="boxesimg" src="images/boxes.png" alt="boxes" />
<div class="break"></div>
<img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />
<div class="wlblock">
<img src="images/leftimage.png" />
<p>Titanic letter could fetch £100,000</p>
</div> <!-- watchlistenblock div -->
<div class="wlblock">
<img src="images/rightimage.png" />
<p>Cameron defends "Muppet" remark</p>
</div> <!-- watchlistenblock div -->
<img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />
<ul>
<li>Sentence 1</li>
<li>Sentence 2</li>
<li>Sentence 3</li>
</ul>
</div> <!-- watchlisten div -->
And here is my CSS:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 8px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
/* Clears all float attributes */
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 100px;
color: #FFFFFF;
}
#newsbar p {
margin: 10px 0 0 0;
padding: 0;
padding-top: 10px;
float: left;
}
#newsheader {
font-size: 3em;
}
#uk {
font-size: 0.7em;
padding-left: 20px;
}
#rss {
float: right;
margin-top: 38px;
}
#rss img {
height: 13px;
padding-right: 16px;
}
/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */
#topicmenu {
padding-right: 16px;
}
#topicmenu ul {
background-color: #3E0C0D;
padding: 5px 0 0 5px;
margin: 0;
height: 20px;
}
#topicmenu li {
list-style-type: none;
font-size: 0.8em;
border-right: 1px solid #990000;
padding: 0 6px 0 6px;
float: left;
text-align: center;
background-color: none;
}
/* UK Tab: Grey; */
.selected {
background-color: #EDEDED;
color: #666666;
height: 20px;
position: relative;
top: -4px;
padding-top: 4px !important;
}
/* Content DIV */
#content {
width: 100%;
color: #535353;
font-size: 0.75em;
}
/* 2 April 2014 Last updated 15:23 */
#content p {
margin-right: 16px;
}
/* 2 April 2014 */
.date {
font-weight: bold;
}
/* Headline: Pollution to spread across England */
h1 {
color: #1F4F82;
font-size: 2.5em;
}
/* Headline Image */
.headlineimg {
height: 220px;
float: left;
}
/* Content div with paragraph and 4 links */
.newsitem {
position: relative;
left: 10px;
top: -15px;
width: 280px;
float: left;
font-size: 1.1em;
}
/* Link with color and no underline */
.newsitem a {
color: #1F4F82;
}
/* All anchor links have no underline */
a {
text-decoration: none;
}
/* Links have underline when hovered */
a:hover {
text-decoration: underline;
}
/* Play button next to Links */
.video {
background-image:url("images/playbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* line heights for 4 links */
.linkheight {
line-height: 1.6em;
}
/* sound image */
.sound {
background-image:url("images/soundbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* Watch/Listen DIV */
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 367px;
position: relative;
top: -80px;
right: 17px;
}
/* Watch/Listen H2 */
h2 {
color:#505050;
position: relative;
margin: 0;
padding-top: 10px;
padding-left: 10px;
font-size: 1.8em;
}
/* 4 boxes (one orange) image */
.boxesimg {
float: right;
position: relative;
top: -14px;
right: 10px;
}
/* left arrow image (WATCH/LOOK) */
.leftarrow {
float: left;
border-right: 1px solid white;
height: 134px;
}
/* Orange Div with words in them */
.wlblock {
float: left;
background-color: #D1700E;
width: 157px;
border-right: 1px solid white;
}
/* a tag in class wlblock, made to be clickable */
.wlblock a {
color: white;
}
/*P tag in class wlblock */
.wlblock p {
margin: 9px 10px 6.5px 10px;
}
/* right arrow image (WATCH/LOOK) */
.rightarrow {
float: left;
height: 134px;
}
#watchlisten ul {
border: 2px solid green;
position: relative;
}
#watchlisten li {
list-style-type: none;
background-image:url("images/liveimg.png");
background-repeat: no-repeat;
font-size: 1.4em;
border-bottom: ;
}
And here is my JSFiddle with HTML & CSS:
http://jsfiddle.net/bbx4xdad/

Answer 1

You need to add padding to the list items. The CSS code that you provided shows that the Sentence 1, Sentence 2 etc list items are not targeted. Try adding this code:
#watchlisten ul li {
padding-left: 25px;
}
Alternatively, you may try using the "list-style-image" attribute this way:
ul {
list-style-image: url('my-image.png');
}

Answer 2

There are two things causing you issues:
There is no padding on the list items to create space for the background image. Give them some left padding and remove the padding on ul
The left arrow has float: left and this is bringing your unordered list with it. Clear the float with #watchlistendiv ul { clear: left; }
HTML / CSS / Demo
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 8px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image: url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
/* Clears all float attributes */
.break {
clear: both;
}
#newsbar {
background-color: #990000;
width: 100%;
height: 100px;
color: #FFFFFF;
}
#newsbar p {
margin: 10px 0 0 0;
padding: 0;
padding-top: 10px;
float: left;
}
#newsheader {
font-size: 3em;
}
#uk {
font-size: 0.7em;
padding-left: 20px;
}
#rss {
float: right;
margin-top: 38px;
}
#rss img {
height: 13px;
padding-right: 16px;
}
/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */
#topicmenu {
padding-right: 16px;
}
#topicmenu ul {
background-color: #3E0C0D;
padding: 5px 0 0 5px;
margin: 0;
height: 20px;
}
#topicmenu li {
list-style-type: none;
font-size: 0.8em;
border-right: 1px solid #990000;
padding: 0 6px 0 6px;
float: left;
text-align: center;
background-color: none;
}
/* UK Tab: Grey; */
.selected {
background-color: #EDEDED;
color: #666666;
height: 20px;
position: relative;
top: -4px;
padding-top: 4px !important;
}
/* Content DIV */
#content {
width: 100%;
color: #535353;
font-size: 0.75em;
}
/* 2 April 2014 Last updated 15:23 */
#content p {
margin-right: 16px;
}
/* 2 April 2014 */
.date {
font-weight: bold;
}
/* Headline: Pollution to spread across England */
h1 {
color: #1F4F82;
font-size: 2.5em;
}
/* Headline Image */
.headlineimg {
height: 220px;
float: left;
}
/* Content div with paragraph and 4 links */
.newsitem {
position: relative;
left: 10px;
top: -15px;
width: 280px;
float: left;
font-size: 1.1em;
}
/* Link with color and no underline */
.newsitem a {
color: #1F4F82;
}
/* All anchor links have no underline */
a {
text-decoration: none;
}
/* Links have underline when hovered */
a:hover {
text-decoration: underline;
}
/* Play button next to Links */
.video {
background-image: url("images/playbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* line heights for 4 links */
.linkheight {
line-height: 1.6em;
}
/* sound image */
.sound {
background-image: url("images/soundbutton.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
/* Watch/Listen DIV */
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 367px;
position: relative;
top: -80px;
right: 17px;
}
/* Watch/Listen H2 */
h2 {
color: #505050;
position: relative;
margin: 0;
padding-top: 10px;
padding-left: 10px;
font-size: 1.8em;
}
/* 4 boxes (one orange) image */
.boxesimg {
float: right;
position: relative;
top: -14px;
right: 10px;
}
/* left arrow image (WATCH/LOOK) */
.leftarrow {
float: left;
border-right: 1px solid white;
height: 134px;
}
/* Orange Div with words in them */
.wlblock {
float: left;
background-color: #D1700E;
width: 157px;
border-right: 1px solid white;
}
/* a tag in class wlblock, made to be clickable */
.wlblock a {
color: white;
}
/*P tag in class wlblock */
.wlblock p {
margin: 9px 10px 6.5px 10px;
}
/* right arrow image (WATCH/LOOK) */
.rightarrow {
float: left;
height: 134px;
}
#watchlistendiv ul {
border: 2px solid green;
position: relative;
clear: left;
padding: 0;
}
#watchlistendiv li {
list-style-type: none;
background-image: url("http://www.placehold.it/50");
background-repeat: no-repeat;
padding-left: 50px;
font-size: 1.4em;
}
<div id="content">
<!-- newsitem -->
<div id="watchlisten">
<h2>Watch/Listen</h2>
<img class="boxesimg" src="images/boxes.png" alt="boxes" />
<div class="break"></div>
<img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />
<div class="wlblock">
<img src="images/leftimage.png" />
<p>Titanic letter could fetch £100,000
</p>
</div>
<!-- watchlistenblock div -->
<div class="wlblock">
<img src="images/rightimage.png" />
<p>Cameron defends "Muppet" remark
</p>
</div>
<!-- watchlistenblock div -->
<img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />
<div id="watchlistendiv">
<ul>
<li>Sentence 1
</li>
<li>Sentence 2
</li>
<li>Sentence 3
</li>
</ul>
</div>
</div>
<!-- watchlisten div -->
</div>
<!-- fixedwidth -->
</div>
<!-- content -->
</div>
<!-- topbar -->
</div>
<!-- container -->