Border Styling Question

[byronwells]

Alright guys I am just about to add a border to one of my div classes...  I know tha I can add a whole border to surround the whole div class, or to add top, bottom, left, right borders seperately..  However I am wondering

 

!) Can I am an image to the border styling part? 

 

2) Can I set the border length?  Lets say I want to added a dash line underneath each section (just like you would with border bottom)  but I dont want the dash line to be full length

[haku]

1) Not consistently across browsers. It can be done using CSS 3, but only Firefox 3.5 and maybe one other browser support the property at this time, meaning that it won't work in any other browsers.

2) Same as above, except that I'm not even sure if this exists in CSS 3.

[byronwells]

Alright Hacku

 

Maybe you can help me with something...

 

I have created the following list format:

 

#l_sidebar ul { list-style: none; margin: 0; padding: 0; }
#l_sidebar li { border-bottom: 1px dashed #444; padding-bottom: 3px; }
#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; }

 

Instead of using the dashed format for the border-bottem section..  I would like to be able to add the following image http://www.supreme-host.com/web/images/dashedline.jpg  so that each time I add a new list content the image is displayed under the text..  Like in this image: http://www.supreme-host.com/web/categories.html

[Zane]

You're better off not having a bottom border at all rather than trying to hack and tweak away at getting an image to work for your it.  It's not worth the trouble.

 

Your best best (if you want to use a image based bottom border is to use a separate div, at the end of the inside of the element you wish this border upon.  Just give the div the same height, set some padding if you need it, and use background attachment to get it on there.

[byronwells]

Zanus

 

I was thinknig of doing that way..  Creating another div with the same height, for the dashed image, but then I was thinking, because I am using a membership site php script that updates the category section automatically..  Because of that wouldnt it be easy for me to add it to the list poperties??

 

Or could I set do it the way you suggest and each time I add a new category it displays as the first one does??

[Zane]

but then I was thinking, because I am using a membership site php script that updates the category section automatically..  Because of that wouldnt it be easy for me to add it to the list poperties??

 

Forgive me, I still don't understand your contrasting opinion on the idea to start with.  So what's keeping you from doing it with the separate div exactly?

[haku]

You probably don't even need the separate div. Just set your image as the background of the element with the border on it. Then add:

 

background:url(path/to/dotted-line.jpg) no-repeat center bottom;

 

to the css for that element, and it will use the image at the bottom. You may need to add a bit of padding so your text doesn't overlap it.

[byronwells]

Hanku

 

Thank you for that..  One more very quick question

 

I have added a image to the performatted bullet feature..

 

#l_sidebar ul { list-style: url(images/icon.gif) no-repeat top left;
margin: 0px 0px 0px 25px;


padding: 0; }

#l_sidebar li { 

background: url(images/dashedline.jpg) no-repeat center bottom;
}
#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; }

 

 

But since I have done that the dashed border line now only coversa from the text..  WWhat if I want it under the bullet image?

[haku]

What?

[byronwells]

Alright Hanku

 

I have added an image to the list styles format..  It shows up in dreamweaver, but when I uploaded it to the internet, it doesnt show up at all..  It just shows the standard bullet format for the list...

 

Also can I put anything under the bullet image?  Say another dashed line?  Like I have been able to do for the text section?