Separation line next to images

Guido

2011-08-16 18:38

Hi,

On my website I have some images on the right.
I don't use menu3 on the left, so I deleted #menu3 and #column.
(I also don't use the two_columns.gif)

How do I create a separation line between text and the images on the right?
Do I have to place #imagesList in a column?

Guido

» Quick.Cms v3.x

boboo

2011-08-17 07:45

It is not only to You, Guido:

dear help-needers,
do you have any problem to put here the web address, where the decribed problem can be seen???

it-service.kimla.de

Guido

2011-08-17 09:59

@boboo: I tried to describe it as clearly as possible, but I understand your comment.

So I would like to have a separation-line between text and images (from top-bottom):

http://www.guidovanderleest.nl/

I already tried adding border-left at imagelist, but then the separation-line is not from top-bottom.

boboo

2011-08-17 10:39

It seems to be a:
#imagesList2
class imagesList.
Try to give there a border-left property (border-left:1px solid #color;) in your default.css
As color use the html color notation.

it-service.kimla.de

boboo

2011-08-17 10:41

Aaaa, is not from: top to bottom.
And you want this on the whole height of white area?
Is that right?

it-service.kimla.de

Guido

2011-08-17 11:17

@boboo: yes, the whole height indeed!

boboo

2011-08-17 11:59

So, you have 2 possibilities:
1. Easy & dirty: just make a point.bmp (1px x 1px) with wished colour and put it into tamplates/img/
then in default.css give it into
#body .container .main #content as a background.
background:url('img/point.bmp') repeat-y 750px 0px;
The disanvantage: on the pages without right-pictures, the line will be visible, and the text will come over the line.
2. More difficoult, but clean: redesign the template and css. Put the imagesList-div out of #page.

it-service.kimla.de

cgan

2011-08-17 15:09

I think gif will be a lot better than bmp on the web.

cgan

Guido

2011-08-17 20:10

Thanks for your help, guys.

I think it's easier to add a border around imagelist... So I did that.

saba

2011-08-20 19:13

rounded corners example in *.css :

#column{float:left;
width:168px;
margin:20px;
padding:10px 10px 40px;
border: 1px solid #999;
border-bottom-left-radius: 8px 8px;
border-bottom-right-radius: 8px 8px;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;;
-moz-border-radius: 1em;}



Look: http://www.evereng.eu

Not working in IE :(

cgan

2011-08-22 08:25

saba - you'll find more about rounded corners at the link below. Even those that will work in IE and Opera.

http://davidwalsh.name/css-rounded-corners

cgan