I want to have a heading on each page of my website that has a border around the heading.
Each page has a different heading, so obviously the border around the heading needs to be a different size on each.
Can you set it so that it will resize the border based on the length of the text?
My code for the CSS file is below, which has the WIDTH set at 100% which sets the border at 100% of the page, however I need it to be 100% of the text.
Cheers
DIV.title
{
BORDER-RIGHT: #808080 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 1px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: 12;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 1px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
HEIGHT: 20px;
WIDTH: 100%;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}I think the answer to your question is to set
BODY{width:100%;}
and not set a width on your title div. This will then set the border of the title to be the width of the title.
But I'm not 100% certain what you mean.nah that didnt work, it still set the border to 100% of the page.
Follow these 2 links to get a better understanding of what Im talking about. These headings were done in HTML, as I didnt know much CSS at the time.
<!-- m --><a class="postlink" href="http://gsr-evo-club.net/pages/members/showroom.htm">http://gsr-evo-club.net/pages/members/showroom.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://gsr-evo-club.net/pages/members/forms.htmDo">http://gsr-evo-club.net/pages/members/forms.htmDo</a><!-- m --> you need a table for that?
in the head try
<style type="text/css"><!--
H3{border:1px solid red;}
--></style>
and in your code (instead of your table)
<h3>SHOWROOM:</h3>
<p>The showroom will be implmented at a later date</p>thanks for that, but it still did the same thing. It made the box (the border) around the "showroom" heading span the whole page, I only want it to span the width of the text, like shown in the examples.
And the reason why I havent used CSS in those examples is that I didnt know how when I did it, I only knew HTML tablesI'll have a look now and test a few things.hey thanks for your help, but Ive got it going. I was fiddling around with something, and it worked!
For your reference here is my HTML code:
<div class="body">
<span class="container">NEWS:</span>
</div>
And my CSS:
DIV.body
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: 11;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
COLOR: #000000;
PADDING-TOP: 2px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
.container {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
MARGIN: 2px;
color: #006699;
border: 1px solid #000000;
background-color: #FFFFFF;
FONT: Verdana, Arial, Helvetica, sans-serif;
}This is all you need...
.heading {
color:#069;
margin:2px; padding:2px;
font:lighter 11pt/15pt verdana,sans serif;
text-transform:uppercase;
border:1px solid #000;
}
<span class="heading">Showroom</span>
The H1-6 tags will put a carriage return before and after your text which I don't think is what you want. You can control line height anyway by using { font:*fontsize/*lineheight }all he really appeared to want was <span style="border:1px solid red;">Showcase</span>
When he said
I need it to be 100% of the text I thought he was referring to the body text, not the title text.yeh Stellar's code worked a treat, thanks guys for all your help
Each page has a different heading, so obviously the border around the heading needs to be a different size on each.
Can you set it so that it will resize the border based on the length of the text?
My code for the CSS file is below, which has the WIDTH set at 100% which sets the border at 100% of the page, however I need it to be 100% of the text.
Cheers
DIV.title
{
BORDER-RIGHT: #808080 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 1px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: 12;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 1px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
HEIGHT: 20px;
WIDTH: 100%;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}I think the answer to your question is to set
BODY{width:100%;}
and not set a width on your title div. This will then set the border of the title to be the width of the title.
But I'm not 100% certain what you mean.nah that didnt work, it still set the border to 100% of the page.
Follow these 2 links to get a better understanding of what Im talking about. These headings were done in HTML, as I didnt know much CSS at the time.
<!-- m --><a class="postlink" href="http://gsr-evo-club.net/pages/members/showroom.htm">http://gsr-evo-club.net/pages/members/showroom.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://gsr-evo-club.net/pages/members/forms.htmDo">http://gsr-evo-club.net/pages/members/forms.htmDo</a><!-- m --> you need a table for that?
in the head try
<style type="text/css"><!--
H3{border:1px solid red;}
--></style>
and in your code (instead of your table)
<h3>SHOWROOM:</h3>
<p>The showroom will be implmented at a later date</p>thanks for that, but it still did the same thing. It made the box (the border) around the "showroom" heading span the whole page, I only want it to span the width of the text, like shown in the examples.
And the reason why I havent used CSS in those examples is that I didnt know how when I did it, I only knew HTML tablesI'll have a look now and test a few things.hey thanks for your help, but Ive got it going. I was fiddling around with something, and it worked!
For your reference here is my HTML code:
<div class="body">
<span class="container">NEWS:</span>
</div>
And my CSS:
DIV.body
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: 11;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
COLOR: #000000;
PADDING-TOP: 2px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
.container {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
MARGIN: 2px;
color: #006699;
border: 1px solid #000000;
background-color: #FFFFFF;
FONT: Verdana, Arial, Helvetica, sans-serif;
}This is all you need...
.heading {
color:#069;
margin:2px; padding:2px;
font:lighter 11pt/15pt verdana,sans serif;
text-transform:uppercase;
border:1px solid #000;
}
<span class="heading">Showroom</span>
The H1-6 tags will put a carriage return before and after your text which I don't think is what you want. You can control line height anyway by using { font:*fontsize/*lineheight }all he really appeared to want was <span style="border:1px solid red;">Showcase</span>
When he said
I need it to be 100% of the text I thought he was referring to the body text, not the title text.yeh Stellar's code worked a treat, thanks guys for all your help