Adding Image in front of Catrgory

ebionet · 07-22-2006

Hello,
I want to add an image (bullet or arrow) in front of categories? How do i do this. I have seen many directories doing that. I am using colorburst template.
Thank you.

sdawkins · 07-22-2006

Hi Ebionet --

Open your css and add your image to the background (as in mine it is bg.gif).
Not sure if the div cat looks the same in colorburts.

Code:

div.categories div.categ
{
	padding-left: 20px;
	line-height: 22px;
	background-image: url("../img/bg.gif");
	background-position: left;
	background-repeat: no-repeat;
	margin-left: 5px;
}

ebionet · 07-22-2006

Quote:

Originally Posted by sdawkins

Hi Ebionet --

Open your css and add your image to the background (as in mine it is bg.gif).
Not sure if the div cat looks the same in colorburts.

Code:

div.categories div.categ
{
	padding-left: 20px;
	line-height: 22px;
	background-image: url("../img/bg.gif");
	background-position: left;
	background-repeat: no-repeat;
	margin-left: 5px;
}

Thanks for help, Actually I mean to say that I want category list with an image not background.

sdawkins · 07-22-2006

Quote:

Originally Posted by ebionet

Thanks for help, Actually I mean to say that I want category list with an image not background.

That is for the icon

-- the little icons next to the category are the bg.gif (well the name is different in this directory)

http://www.findtoplinks.com

Vincent Wright · 07-24-2006

sdawkins is right. This is a well-known trick: you just put an image as a background, left align it and add some spacing (by padding-left property) so that the text doesn't overlap the icon.

07-22-2006	#1
ebionet Googler Join Date: Jun 2006 Location: Everywhere Posts: 68	Adding Image in front of Category Hello, I want to add an image (bullet or arrow) in front of categories? How do i do this. I have seen many directories doing that. I am using colorburst template. Thank you. Last edited by ebionet; 07-22-2006 at 02:29 PM.

07-22-2006	#2
sdawkins Join Date: Oct 2005 Posts: 608	Hi Ebionet -- Open your css and add your image to the background (as in mine it is bg.gif). Not sure if the div cat looks the same in colorburts. Code: div.categories div.categ { padding-left: 20px; line-height: 22px; background-image: url("../img/bg.gif"); background-position: left; background-repeat: no-repeat; margin-left: 5px; } __________________ Rainbow Bridge

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

07-24-2006	#5
Vincent Wright Join Date: Sep 2005 Posts: 1,421	sdawkins is right. This is a well-known trick: you just put an image as a background, left align it and add some spacing (by padding-left property) so that the text doesn't overlap the icon.