CODEWITHSUNDEEP
css
user2431709
user2431709

Reputation:

Repeat DIV Horizontally to make dashed line

I have this CSS:

#dotted_line {
    width:80px;
    height:5px;
    margin:10px auto 0 auto;
    background:#666666;
    background-repeat: repeat-y;
}

i want to be able to repeat it horizontally so i get a dash line but with long dashes

Upvotes: 2

Views: 5572

Answers (3)

otinanai
otinanai

Reputation: 4025

You can use a background-image with the same color as your body background and give the impression of a dashed line. See this example.

Image used: enter image description here

If you want to experiment, there's a CSS property that gives you the ability to use an element (your div in this case) as a background-image. This property is the background:element().

You can see a demo here in Firefox.

However, this property works only in Mozilla with the -moz- prefix but there have been attempts to implement in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.

Upvotes: 5

Don
Don

Reputation: 4157

This is an alternate solution to your problem:

css:

.dashed {
    margin:auto;
    width:50%;
    border-style:dashed none none none;
    transform: scaleX(2);
}

html:

<div class="dashed"></div>

http://jsfiddle.net/LkVxp/ or http://jsfiddle.net/LkVxp/1/

So what we do is take a border of a div and scale it up so that you can make the dashes longer. just be sure to match the percent to the scale or the width becomes something other than 100% (or you can tweak it to however long you want). Thickness can be controlled normally with border-width.

If you wish to make the space between the dashes shorter it will take a bit more work, You'd want to position a second dashed border relatively and offset it however much you want to reduce the space by. So that the offset one would overlap the open space. At that point you're probably just better off using an image though >.>

heres an example: http://jsfiddle.net/LkVxp/3/

More on topic, it isn't a hard task using javascript(jquery or other) to duplicate a dom element.

Upvotes: 5

port5432
port5432

Reputation: 6381

Try the hr tag which can take various attributes, although be warned these are deprecated. For example:

<hr>
<hr width="50%">
<hr align="left" width="50%">

Upvotes: 0

Related Questions