Jump to content

[SOLVED] Border Bottom On H1


glenelkins

Recommended Posts

Hi

 

h1{ clear: both; padding-top: 22px; padding-bottom: 5px; border-bottom: 1px dotted #b7b9bb; font-size: 2.2em; color: #143a81; text-align: center; }

 

works fine, but as the H1 element stretches to default of 100% width, the border stretches right accross as far as the container goes. What i need is the H1 container itself to not take 100%, but also not a set width as the text will change! It needs to just be the width of the text inside the <h1></h1> tag

 

 

Link to comment
https://forums.phpfreaks.com/topic/140143-solved-border-bottom-on-h1/
Share on other sites

It wouldn't be standard for block elements to behave like that, applying display:inline; dose what you want. I.e.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Title</title>

    <style type="text/css">
h1 {
font-size: 2.2em;
color: #143a81;
padding-top: 22px;
padding-bottom: 5px;
display: inline;
border-bottom: 1px dotted #b7b9bb;
}

    </style>

  </head>

  <body>
<div class="wrapper">
<h1>Test</h1>
<p>Test</p>
</div>
  </body>

</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.