Shorter border, is it possible?

Dev Shed Forums Sponsor:

May 25th, 2006, 04:19 AM

ratsche

Registered User

Join Date: May 2006

Posts: 6

Time spent in forums: 5 h 30 m 45 sec
Reputation 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

May 25th, 2006, 05:35 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

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

__________________

May 25th, 2006, 06:13 AM

Grafmix

Anal Purist

Join Date: Jun 2005

Location: Bob's Auto Parts...

Posts: 830

Time spent in forums: 3 Weeks 15 h 24 m 53 sec
Reputation Power: 79

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

__________________
We are troll foldy-rolls and we'll eat you for our supper.

Last edited by Grafmix : May 25th, 2006 at 06:16 AM.

May 25th, 2006, 07:05 AM

ChiefWigs1982

Cunning Linguist

Dev Shed God 11th Plane (10000 - 10499 posts)

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 10,180

Folding Points: 50746 Folding Title: Beginner Folder

Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037

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.

Nice hack.

__________________

Support requests via PM will be ignored!
Sites: WordPress Metro Theme | Route of Queue
Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

May 30th, 2006, 04:10 AM

ratsche

Registered User

Join Date: May 2006

Posts: 6

Time spent in forums: 5 h 30 m 45 sec
Reputation Power: 0

thx a lot! that's what I'm looking for!
...looks easy, if you know how to do it

greetz,
ratsche

Shorter border, is it possible?

Developer Shed Advertisers and Affiliates