SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.:
    Code:
    .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. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !!

    Thanks a lot for the clear explanation.

    Regards.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •