SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making h1 borders match text width

    Hiya

    I want to use CSS to put a colored top and bottom border on my h1 and h2 tags. My problem is that I only want the borders to go as wide as the text in the h1 or h2 tag, not clear across the page as it does by default. If I have to I'll settle on a width and center the text so everything looks kinda the same site wide, but I'd much rather find a way to have the borders be set by the width of the text automattically. I have tried to google and search these forums for an answer but I'm either not using the right search terms or no one else has had this question (which I kinda doubt ).

    Sorry if this is painfully obvious and thanks for the help!

    Jammer

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    float:left;

    PS floats in containers need to be cleared

    Code:
    <!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 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	h1{float:left;border-top:10px solid #ff3300;border-bottom:5px solid #000000;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body>
    <h1>12345 12345 12345</h1>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks All4!

    That works very nicely.

    Jammer


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •