Hi,
In CSS, whats the way to make a dashed line?
something simalar to <hr> but just dashed?
Could I also control how far it goes out?
ThanksI would suggest making an image, about 2-3px wide, and 1px high.
Then you make a dot for a 1px dash with a 2-1px space.
but if you would rather have a CSS version, an non controlabale type then use this
.dash{
border:1px dotted #0183c0;
}Here's one method using a DIV and showing a couple options:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<style type="text/css">
<!--
.hr {
height: 0;
font-size: 0;
line-height: 0;
width: 80%;
margin: 1em auto;
}
.dotted {
border-bottom: dotted 2px #0066cc;
}
.dashed {
border-bottom: dashed 2px #0066cc;
}
-->
</style>
</head>
<body>
<p>This is a test.</p>
<div class="hr dashed"></div>
<p>It is only a test.</p>
<div class="hr dotted"></div>
<p>This has been a test.</p>
</body>
</html>
In CSS, whats the way to make a dashed line?
something simalar to <hr> but just dashed?
Could I also control how far it goes out?
ThanksI would suggest making an image, about 2-3px wide, and 1px high.
Then you make a dot for a 1px dash with a 2-1px space.
but if you would rather have a CSS version, an non controlabale type then use this
.dash{
border:1px dotted #0183c0;
}Here's one method using a DIV and showing a couple options:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<style type="text/css">
<!--
.hr {
height: 0;
font-size: 0;
line-height: 0;
width: 80%;
margin: 1em auto;
}
.dotted {
border-bottom: dotted 2px #0066cc;
}
.dashed {
border-bottom: dashed 2px #0066cc;
}
-->
</style>
</head>
<body>
<p>This is a test.</p>
<div class="hr dashed"></div>
<p>It is only a test.</p>
<div class="hr dotted"></div>
<p>This has been a test.</p>
</body>
</html>