001
001

Reputation: 65117

How do I create a div tag heading with a underline?

See Wikipedia http://en.wikipedia.org/wiki/Css

If you look at the heading, it says "Cascading Style Sheets", then it has an underline.

How do you do that?

.heading1 {
/* heading with underline */
}

Upvotes: 9

Views: 51880

Answers (5)

David
David

Reputation: 633

just add in the css: text-decoration: underline;

Upvotes: 8

LPLP
LPLP

Reputation: 11

The border is the wrong (amateur) way to do it. Better use the "hr" tag. It makes an underline a width of the parent div. Put it after the text or heading you want to be underlined. Live example:

Cascading Style Sheets


The code would look like this (oversimplified, of course):

<html>
<head>
  <title>Underline</title>
</head>
 <body>
  <p>Hello</p><hr>
 </body>
</html>

Hope this helps!

Upvotes: 1

nebkat
nebkat

Reputation: 8565

If the div is 100% wide the you can put a bottom border

.heading1 {
   border-bottom: 1px solid #000;
   width:100%;
}

As everyone said get firebug, you can also use google chrome's integrated inspector(which is like firebug).

Upvotes: 2

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

Use borders:

.heading1 {
    border-bottom: 1px solid #aaa;
}

And if you're using Firefox, get Firebug which allows you to inspect any element's CSS attributes so you don't have to guess how a certain style is implemented.

Upvotes: 23

knittl
knittl

Reputation: 265161

h1 {
  border-bottom: 1px solid gray;
}

Upvotes: 4

Related Questions