CODEWITHSUNDEEP
htmlcss
P.V.
P.V.

Reputation: 29

How to display dotted line with an image at the end?

I'd like to show a dotted line that finishes with an image after each div. Each div will be separated visually by that dotted line: [startOfLine]---------[image]--[endOfLine].

How can I achieve that?

Upvotes: 2

Views: 1143

Answers (2)

g_thom
g_thom

Reputation: 2810

Tania's answer of a background image that includes the dotted-border is probably the easiest, maybe something like:

#container {
    background: url("btn.gif") repeat-x 0 20px;
    height: 30px;
}

That way you can control the positioning of the dotted line vis a vis the image.

CSS3's border-image property isn't fully supported by every browser yet, but it's worth looking at (http://css-tricks.com/understanding-border-image).

Upvotes: 0

Raffael Luthiger
Raffael Luthiger

Reputation: 2211

Without seeing your code I can only give you a general answer. The dotted line will probably be the bottom border of the div styled with CSS, like this:

border-bottom-style: dotted;

or

border-bottom-style: dashed;

The image is then a normal img which will be positioned relative to is original position:

position:relative;
top:10px;
left:10px;

Of course you will have to set the right number of pixels.

Upvotes: 2

Related Questions