0

i have tried making a horizontal rule <hr> that i can put under my text links but it always spaces them out by a huge amount. I am trying to achieve the effect that is kind of like what you see to the right of this page. But exactly like what you see on the left link set on www.seochat.com.

i am using dreamweaver can someone help?

4
Contributors
4
Replies
5
Views
12 Years
Discussion Span
Last Post by itsmefrom?
0

It's most likely done with background images in DIVs or table cells

<style>
.field { height: 20px; line-height: 20px;
background: #ffffff url(somepicture.jpg); padding: 4px; }
</style>


<body>
<div class="field">link1</div>

or

<TD class="field">link1</TD>
0

Actually, that's achieved by setting the border property. CSS allows you to set border-top, border-bottom, border-left, and border-right, independently.

You can also set the border width and style, to get a grooved or inset border.

So, search for "CSS border properties", and you should be on the right track.

0

THANKS, will do!

styled HR

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345</title>
<style type="text/css">
.hr,.hr100{
background:#ff0000;/*NS FF OP */
color:#ff0000;/*IE*/
border:none;/*FF NS OP*/
height:1px;/*FF NS OP*/
width: 98%;

}
.hr100{
height:100px;
background:#00ff00;/*NS FF OP */
color:#00ff00;/*IE*/
border:10px solid #0000ff;/*IE FF NS OP*/
}
</style>
</head>
<body>
<hr />
<p></p>
<hr class="hr" />
<hr class="hr100" />
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.