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

Using css instead of background image

Andy.N

Well-known member
#1
I have a list that has a green square. I like to replace the image with css.
Here is the current list

list.png

Here is the CSS for the current list where the green square is called from background image and background-position.
Code:
.hilite_list li a:link, .hilite_list li a:visited{ 
background: url(images/spriteme1.png) no-repeat left 5px;
                        background-position: -10px -100px;
color: #666;
padding-left: 15px;
line-height: 25px;
}
Here is css for a simple square with solid color.
http://3easy.org/buildmobile/jquerymobile/#square_css
Code:
.square {
	width: 100px;
	height: 100px;
	background: #fc2e5a;
}
Is it possible to replace the background-url with this css?
Thanks
 

Andy.N

Well-known member
#3
No, the second css is for creating a 100 by 100 square with a background color. You need to redo your html, and have a block before the list item. I would use dl, dt and dd, and apply the green square on the dt, then use dd as list item.

http://www.w3schools.com/tags/tag_dl.asp
http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line
Thanks for the tip.
I couldn't get the underline (border-bottom) to run from dt throughout dd since they are 2 different parts.
 

MagnusB

Well-known member
#4
It should be possible, make sure there are no margins etc. You can do it with wrapping two <p> in a span as well, it doesn't really require you using any specific type of tag.