Member Avatar for n2ads

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
  • 106 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by itsmefrom?
Member Avatar for madmital

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>
Member Avatar for tgreer

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.

Member Avatar for n2ads

THANKS, will do!

Member Avatar for itsmefrom?

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.