Forgot your password?
dotted css lines
Document Actions
denis explained how to do dotted css lines
Hello, Georg.
You wrote 11 июля 2006 г., 16:40:46:
> > There's just one thing: How would I be able to do the dotted lines
> > right? Is there any way to put an image 'over' and existing html element
> > to make it look like this? If I just use the 'dotted' style there is one
> > pixel transparent, the other one is solid. Here I think it is more than
> > one pixel that is transparent. Can you help me to find out how this can
> > be done?
Yes, Gogo, sure you can do this with the background image. Moreover
you SHOULD do this with the image if IE is in your target group, since
IE doesn't understand "dotted" as the corder's property. IE renders it
as "dashed" :) So, you need to set it as the following:
- Create the two images - one for horizontal borders and the second one
for vertical borders, containing one dot and one whitespace for the to
form the right border when repeating. So, your images should look
something like this:
|.|
|. | | |
to form the borders like:
|. . . . . . . . .|
and
|.|
| |
|.|
| |
|.|
Ok, hope these are obvious.
Next:
asumptions:
YOUR_COLOR - background color on your element
YOUR_PATH_TO_IMAGE - path to your image, for example: '/hor_dots.gif'
in Plone it will be something like
'&dtml-portal_url;/hor_dots.gif'
YOUR_IMAGES_HEIGHT - the height of your horizontal image
YOUR_IMAGES_WIDTH - the width of your vertical image
1. To apply the horizontal border to the element:
div#your-id {
background: YOUR_COLOR url('YOUR_PATH_TO_IMAGE') left bottom repeat-x;
padding-bottom: YOUR_IMAGES_HEIGHT;
}
This will place the border along the _bottom_ of the element. Change
'bottom' to 'top' to have the border along the top of the element.
2. To apply vertical border to the element:
div#your-id {
background: YOUR_COLOR url('YOUR_PATH_TO_IMAGE') left top repeat-y;
padding-left: YOUR_IMAGES_WIDTH;
}
Thjis will place the border along the _left_ side of the element. Change
'left' to 'right' to have the border along the right side of the
element.
So, I think this is enough to create the borders ;) Hope this will
help you. Good luck!
-- Best regards, Denis Mishunoff PLONE Design-Skinning-Development mailto:spliter@sdtcom.lg.ua IRC: spliter(#plone) URL: http://plonetarium.objectis.net