#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    6
    Rep Power
    0

    Shorter border, is it possible?


    Hiho,
    I want to style my heading with a top and bottom boarder. A simple solid one works pretty fine. But I like to have one that is padden padded at the left and at the right. Is there a way to do it?

    Here is my code:
    Code:
     
    #content1 h2 
    {   padding-left: 10px;
        padding-right: 10px;
        clear:both;
        position: inherit;
        color: #86BDF5;
        border-top: solid 3px #336699;
        border-bottom: solid 3px #336699;
        font-size:1.2em;
        font-family: Lucida sans, Verdana, sans-serif;
    }
    I just want the the border to be padded also. ...i searched a lot, but i find no solution.

    greetz,
    ratsche
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    If I've understood you correct you want to use margin instead of left and right padding.


    Code:
     
    #content1 h2 
    {   margin-left: 10px;
        margin-right: 10px;
        clear:both;
        position: inherit;
        color: #86BDF5;
        border-top: solid 3px #336699;
        border-bottom: solid 3px #336699;
        font-size:1.2em;
        font-family: Lucida sans, Verdana, sans-serif;
    }
    If you look at the box model, you can see that the border is outside of the padding but within the margins of an element.
    http://www.w3.org/TR/CSS21/box.html#box-dimensions
  4. #3
  5. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    830
    Rep Power
    81
    I think ratsche wants something like this:
    Code:
      ------
    THE HEADER
      ------
    Though, I haven't given it enough thought to come up with a solution yet.

    The trouble is, it defies the nature of the box model - there'll need to be some dark CSS witchery involved
    Last edited by Grafmix; May 25th, 2006 at 07:16 AM.
    We are troll foldy-rolls and we'll eat you for our supper.
  6. #4
  7. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,180
    Rep Power
    2039
    How bout something like:
    Code:
    <style type="text/CSS">
    #content1 h2 
    {
    	display:inline;
    	margin:0px 10px 0px 10px;
    	position: inherit;
    	color: #86BDF5;
    	border-top: solid 3px #336699;
    	border-bottom: solid 3px #336699;
    	font-size:1.2em;
    	font-family: Lucida sans, Verdana, sans-serif;
    }
    #content1 h2 span
    {
    	margin:0px -10px 0px -10px;
    }
    </style>
    </head>
    
    <body>
    <div id="content1">
    	<h2><span>The Header</span></h2>
    	<p>Lorem ispum..</p>
    </div>
    </body>
    </html>
    ?

    Comments on this post

    • Grafmix agrees : Ruddy bloody nice one!
    • kk5st agrees : Rats! You always grab the easy ones. :D Nice hack.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2006
    Posts
    6
    Rep Power
    0
    thx a lot! that's what I'm looking for!
    ...looks easy, if you know how to do it

    greetz,
    ratsche

IMN logo majestic logo threadwatch logo seochat tools logo