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
  • 123 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by itsmefrom?

Dani AI

Generated

Building on , and — the big gap you see is usually not a Dreamweaver bug but the HTML/CSS model. An <hr> is a block-level element with browser-default margins and its own box, so it will push content away unless you explicitly remove those margins. Background images in table cells (as suggested) work for graphic strips, and borders (as suggested) are the simplest CSS-only fix. Below are two practical, different approaches that avoid the extra vertical space.

Use a border on the link itself when you want a tight rule under each piece of text:

/* tidy underline under each link */
.nav a {
  display: inline-block;
  padding: 4px 6px 2px;
  border-bottom: 2px solid #ccc;
  text-decoration: none;
  line-height: 1;
}

Use a pseudo-element if you want a full-width bar associated with a group of links (no extra block spacing):

/* full-width bar under a link group without adding margin */
.link-row { position: relative; padding-bottom: 8px; }
.link-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px; background: #ddd;
}

Quick troubleshooting: inspect the computed styles with browser dev tools to find default margin or line-height that create gaps. If you must use <hr>, explicitly reset it (remove margins/borders and set height), but using border-bottom or a positioned ::after usually gives cleaner, predictable results across browsers. For reference on element defaults and pseudo-elements, see the MDN docs: HTML hr element, CSS border and CSS ::after.

Recommended Answers

All 4 Replies

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.