Vertical divider image - :after, :before... whatever

HTML & CSS
1

Hi there.

I’m having problems showing a vertical divider image between divs the proper way. Well, it shows, but elements are not properly positioned around it so far. I’m just starting to get the hang of :after and :before css selectors, but, definitely, I’m still only on the way to be ‘flexible’ or ‘really creative’ with them.

You can have a look at the ‘project’ here: http://jsfiddle.net/ucnxV/

It is the last css declaration I don’t seem to write effectively.:

.movil:before, .local:before {content:url(../imges/vert-divider.png); display:inline; position:relative; top:0px; left:-80px; width:2px; height:61px;}

I know I might try combining left-borders and right-borders to get a similar divider result, but I’d like it to be the image in this case.

Any help will be much appreciated.

Regards.

2

Ok, the short answer here is that you’ll have to take the :before and :after pseudo-elements out of the document flow, otherwise, they’re going to push everything else down.

So, here’s an update of your fiddle: http://jsfiddle.net/ucnxV/8/

Basically, what I did was set #header to position:relative so the pseudo elements could be absolutely positioned within it. Then, I changed the left:-75px to left:0

3

Got it Ron,

Pretty simple actually. I guess I was taking it those pseudo elements were some kind of attached items to the elements they are ‘related’ to, and would never get in their way. But they really are something on their own :p!!

Thanks a lot for the clear explanation.

Regards.