HTML and CSS

how to make a horizontal rule

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2005

Posts: 23

Reputation: n2ads is an unknown quantity at this point

Solved Threads: 0

n2ads

Offline

Newbie Poster

how to make a horizontal rule

Aug 12th, 2005

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?

N2Ads.com - Your online source for Indie Music, Music Promotion, and Music Resources!
Provided for and created by Music Artists and Fans.

•

Join Date: Jun 2005

Posts: 107

Reputation: madmital is an unknown quantity at this point

Solved Threads: 3

madmital

Offline

Junior Poster

Re: how to make a horizontal rule

Aug 12th, 2005

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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>

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: how to make a horizontal rule

Aug 12th, 2005

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.

•

Join Date: May 2005

Posts: 23

Reputation: n2ads is an unknown quantity at this point

Solved Threads: 0

n2ads

Offline

Newbie Poster

Re: how to make a horizontal rule

Aug 15th, 2005

THANKS, will do!

N2Ads.com - Your online source for Indie Music, Music Promotion, and Music Resources!
Provided for and created by Music Artists and Fans.

•

Join Date: Aug 2005

Posts: 3

Reputation: itsmefrom? is an unknown quantity at this point

Solved Threads: 0

itsmefrom? itsmefrom? is offline

Offline

Newbie Poster

Re: how to make a horizontal rule

Aug 15th, 2005

•

Originally Posted by n2ads

THANKS, will do!

styled HR

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<!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>