making a dashed line separator in css

Discussion in 'Web Design and Development' started by demarcopbl, Aug 7, 2009.

Most Liked Posts
  1. demarcopbl, Aug 7, 2009

    demarcopbl macrumors member

    Joined:
    Apr 28, 2009
    #1
    hello all, been working on a new site layout and have run into a problem. I had been including white space and a dashed 'line break' at the bottom of my uploaded images so that when they appear on the site, it separates the images from the text. Now I have added rollovers different to the background color, you can clearly tell my workaround. Is there any way to do the line break/padding with css? basically I want the line to be the same length as the base of the image. See attached screens for reference. Thanks, Mike.
     

    Attached Files:

    share
    + Quote Reply
  2. angelwatt, Aug 7, 2009

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You can do it with the border property
    Code:
    [I]selector[/I] {
 border-bottom: 1px dashed #000;
}
    Can use dotted as well.
     
    share
    + Quote Reply
  3. wheezy, Aug 9, 2009

    wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #3
    Bingo! CSS can do quite a lot, and once CSS3 is a full accepted standard (ahem, IE) you'll be able to do even more.
     
    share
    + Quote Reply
  4. demarcopbl, Aug 11, 2009

    demarcopbl thread starter macrumors member

    Joined:
    Apr 28, 2009
    #4
    thankyou angelwatt!!

    thanks for the tip, worked like a charm. Appreciate your input.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page