...

View Full Version : I am confused.. Why Is this working properly?



Byronwells
12-22-2009, 03:10 AM
I am really confused at the moment, I cant see what I am doing wrong.. Please someone help me!! This is driving me crazy..

What I am trying to do is to create a list style format here is the code so far



#l_sidebar ul { list-style: url(/images/m10.gif) no-repeat top left;
margin: 0px 0px 0px 15px;
padding: 10px 0px 0px 0px;
}
#l_sidebar li {
border-bottom: 1px dashed #444;
padding: 0px 0px 10px 0px;
}

#l_sidebar li li {
background: #FFFFFF }

#l_sidebar li a, #l_sidebar li a:visited { color: #359CBB; text-decoration: none; }
#l_sidebar li a:hover, #l_sidebar li a:active { color: #444; }


The problem that I am having is trying to get the border-bottom to be the full lenth, and not start from where the text is... This is what I am trying to get it to look like http://digitalresellersvault.com/blog/?p=11 Recent posts section...

I am also having diffuclties displaying an image instead of a blue dot as the bullet format..

This is my website http://www.supreme-host.com/web/categories.php

vineet
12-22-2009, 04:06 AM
instead of "list-style" use "list-style-image"



list-style: url(/images/m10.gif) no-repeat top left;


replace with


list-style-image:url("/images/m10.gif") no-repeat top left;


vineet

met
12-22-2009, 11:09 AM
if you want the dotted line to span the whole length, add



#l_sidebar ul { margin:0px; padding:0px; }


li will take up the entire width of the UL, so the border expands.

set the LI to have the list-style-image property and add 16px of left padding if you still want an indent.

abduraooft
12-22-2009, 11:12 AM
#l_sidebar ul {/*style.css (line 367)*/
margin:0;
padding:10px 0 0;
}
#l_sidebar li {/*style.css (line 371)*/
background:transparent url(images/dashedline.jpg) no-repeat scroll -10px bottom;
list-style-position:inside;
list-style-type:disc;
padding:0 0 10px;
}

Byronwells
12-22-2009, 12:57 PM
instead of "list-style" use "list-style-image"



list-style: url(/images/m10.gif) no-repeat top left;


replace with


list-style-image:url("/images/m10.gif") no-repeat top left;


vineet

Alright Vineet I have changed the above code to what you suggest but it does not look like it has had any effect...

Byronwells
12-22-2009, 01:28 PM
if you want the dotted line to span the whole length, add



#l_sidebar ul { margin:0px; padding:0px; }


li will take up the entire width of the UL, so the border expands.

set the LI to have the list-style-image property and add 16px of left padding if you still want an indent.

Alright Met

Do you know how to get the image /images/m10.gif to appear in the list-styles section please?

met
12-22-2009, 01:39 PM
#l_sidebar ul
{
/* snip */
list-style-image:url("/images/m10.gif");
}



else post a link

Byronwells
12-22-2009, 10:18 PM
#l_sidebar ul
{
/* snip */
list-style-image:url("/images/m10.gif");
}



else post a link

Met

I have no idea whats going on.. Can you please take a look http://www.supreme-host.com/web/categories.php

Do you see a blue dot or this image http://www.supreme-host.com/web/images/m10.jpg for the bullet format?

If not I have no idea whats going on...

Excavator
12-22-2009, 11:09 PM
Hello Byronwells,
It's a blue disc on my end, in FF3.5, IE8 and IE7.
The dashedline.jpg is showing as a dotted line under each li and runs the full length of that li.
If you want to replace that blue disc with your m10.jpg, have a look at the source code of this demo - http://nopeople.com/CSS/li_image/index.html

vineet
12-23-2009, 04:09 AM
try this. it works on my local machine




#l_sidebar ul {
margin:0px;
padding:0px;
}

.leftbox ul li{
list-style-image:url("images/m10.jpg");
padding:5px 2px 0px 4px;
margin:5px 4px 0px 25px;
background:url(images/dashedline.jpg) no-repeat;
background-position:-5px 18px;
}
#l_sidebar li {
}


if images dont show then add ../ before images path.

vineet



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum