Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 13410

Aug 12th, 2005

how to make a horizontal rule

Expand Post »

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?

Similar Threads

horizontal line/rule in JComboBox? in Java
Microsoft Access 2003 Validation Rule in MS Access and FileMaker Pro
MS Access validation rule help in MS Access and FileMaker Pro
Confused & frustrated in IT Professionals' Lounge

n2ads

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

23 posts
since May 2005

Permalink

Aug 12th, 2005

Re: how to make a horizontal rule

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

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>

madmital

Reputation Points: 10

Solved Threads: 5

Junior Poster

Offline

119 posts
since Jun 2005

Permalink

Aug 12th, 2005

Re: how to make a horizontal rule

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Aug 15th, 2005

Re: how to make a horizontal rule

THANKS, will do!

n2ads

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

23 posts
since May 2005

Permalink

Aug 15th, 2005

Re: how to make a horizontal rule

Quote originally posted by n2ads ...

THANKS, will do!

styled HR

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>

itsmefrom?

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Aug 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: i-frame problem

Next Thread in HTML and CSS Forum Timeline: Are these sites validated across the board?

DaniWeb Message

Cancel Changes

User Name
Password