Text on Border?

[no0bodyhome@nowhere.com]

One of the properties I have is:

border-top-width: 30px

I'd like to put some text on this border; align it and such.
It is part of more complicated floating column text-box I'm working on
for a page. Possible, or should I be looking at an alternative
method?

Thanks

[Firas D.]

Re: Text on Border?

no0bodyhome@now here.com wrote:[color=blue]
> One of the properties I have is:
>
> border-top-width: 30px
>
> I'd like to put some text on this border; align it and such.
> It is part of more complicated floating column text-box I'm working on
> for a page. Possible, or should I be looking at an alternative
> method?
>
> Thanks
>[/color]

Latter. There is nothing 'in' a border. Make a container div and give
that a padding-top: 30px.

[no0bodyhome@nowhere.com]

Re: Text on Border?

Hmmm...Not sure that will do it. What I'm after is a column outlined
with a 1 px border. The header will contain text and come down about
50 px. It will have a blue background. The body of the column will
have a whote background and come down about 300-400 px. The footer
will come down about 20 px also have text and a blue background.


On Sun, 06 Feb 2005 20:10:44 -0500, "Firas D." <usenet@firasd. org>
wrote:
[color=blue]
>no0bodyhome@no where.com wrote:[color=green]
>> One of the properties I have is:
>>
>> border-top-width: 30px
>>
>> I'd like to put some text on this border; align it and such.
>> It is part of more complicated floating column text-box I'm working on
>> for a page. Possible, or should I be looking at an alternative
>> method?
>>
>> Thanks
>>[/color]
>
>Latter. There is nothing 'in' a border. Make a container div and give
>that a padding-top: 30px.[/color]

[David Trimboli]

Re: Text on Border?

>>no0bodyhome@n owhere.com wrote:[color=blue][color=green]
>>[color=darkred]
>>>One of the properties I have is:
>>>
>>> border-top-width: 30px
>>>
>>>I'd like to put some text on this border; align it and such.
>>>It is part of more complicated floating column text-box I'm working on
>>>for a page. Possible, or should I be looking at an alternative
>>>method?
>>>
>>>Thanks
>>>[/color][/color][/color]
[color=blue]
> On Sun, 06 Feb 2005 20:10:44 -0500, "Firas D." <usenet@firasd. org>
> wrote:
>[color=green]
>>Latter. There is nothing 'in' a border. Make a container div and give
>>that a padding-top: 30px.[/color][/color]

no0bodyhome@now here.com wrote:[color=blue]
> Hmmm...Not sure that will do it. What I'm after is a column outlined
> with a 1 px border. The header will contain text and come down about
> 50 px. It will have a blue background. The body of the column will
> have a whote background and come down about 300-400 px. The footer
> will come down about 20 px also have text and a blue background.[/color]

Firas D. is correct. Your column will be a div. There are a number of
ways to build the insides of the column div. One way is to make your
header and footer p's, and make a body div between them. Format the
padding of the column div or the margins of the elements inside the
column div to arrange and color the pieces as you want.

Borders, padding, and margins do not contain text or other content.
They have size and (except for margins) color.

David
Stardate 5105.0

[Richard]

Re: Text on Border?

On Mon, 07 Feb 2005 14:01:20 GMT no0bodyhome@now here.com wrote:
[color=blue]
> Hmmm...Not sure that will do it. What I'm after is a column outlined
> with a 1 px border. The header will contain text and come down about
> 50 px. It will have a blue background. The body of the column will
> have a whote background and come down about 300-400 px. The footer
> will come down about 20 px also have text and a blue background.[/color]

Simple. Basic layout found on numerous websites.

<div id="container" >
<div id="header" style="width:10 0%; height:50px; border:solid 1px blue;
background:#00F ;">text</div>
<div id="col1" style="what ever and float:left;">te xt</div>
<div id="col2" style="what ever and float:left;">te xt</div>
Add more divisions if desired last one should contain "clear:both ;".
<div id="footer" style="as you like it">content</div>
</div>

[Gus Richter]

Re: Text on Border?

no0bodyhome@now here.com wrote:[color=blue]
> Hmmm...Not sure that will do it. What I'm after is a column outlined
> with a 1 px border. The header will contain text and come down about
> 50 px. It will have a blue background. The body of the column will
> have a whote background and come down about 300-400 px. The footer
> will come down about 20 px also have text and a blue background.[/color]

Richard detailed the standard way of doing it as others proposed.

Of course you can also accomplish it the way you propose it; to create a
top and bottom margin of 50 and 20 pixels for your main content area and
place the text over these margins as header and footer. I'm not sure
what advantage, if any, you would have with this method, however.

Basically, you create a wrapper div with your required top/bottom
margins. Then you include three divs in this order:
You float your header div and give it a negative top margin to move it
up into the top margin area.
You build your main div/content as normally done.
You float the footer which will be in the bottom margin area.

Works like a charm.

--
Gus

[no0bodyhome@nowhere.com]

Re: Text on Border?

Very helpful, but what am I doing wrong here that I cannot reduce
the height of the divs for the header and footer? here is the code:

#rightboxcontai ner
{
border: 1px solid #467CC2;
padding-left: 0px;
padding-right: 0px;
width: 150px;
position: relative;
float: right;
}

#rightboxheader
{
padding-top: 1px;
padding-left: 5px;
padding-right: 7px;
padding-bottom: 0px;
height: 1px;
width: 100%;
background: #467CC2;
}

#rightboxconten t
{
background: #FFF;
border: 1px solid #467CC2;
border-bottom-width: 10px;
border-top-width: 30px;
padding-left: 5px;
padding-right: 5px;
width: 150px;
}
#rightboxfooter
{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 5px;
padding-right: 7px;
height: 1px;
width: 150px;
background: #467CC2;
}

hr.newrule
{
color: #467CC2;
height: 1px;
width: 95%;
}


h2
{
font-family: Tahoma, Arial, sans-serif;
font-size: .90em;
text-align: center;
color: #FFF;
}

h3
{
font: Arial;
font-size: .70em;
font-weight: lighter;
font-family: Tahoma, Arial, sans-serif;
}

<div id="rightboxcon tainer">
<div id="rightboxhea der"><h2>Title Here<br />Subtitle Here</h2></div>
<div id="rightboxcon tent">
<h3><strong>Lea d sentence would go here!
</strong>&nbspPar agraph starts here and continues down the column to
the break
with rule between paragraphs like this.
<hr class="newrule" /></h3><h3><strong> Next lead sentence starts
here</strong>
Next paragraph starts here, blah, blah, blah...<hr class="newrule"
/></h3></div>
<div id="rightboxfoo ter"><h2>Foote r Here</h2>
</div>
</div>

On Mon, 7 Feb 2005 09:56:14 -0600, "Richard" <Anonymous@127. 001>
wrote:
[color=blue]
>On Mon, 07 Feb 2005 14:01:20 GMT no0bodyhome@now here.com wrote:
>[color=green]
>> Hmmm...Not sure that will do it. What I'm after is a column outlined
>> with a 1 px border. The header will contain text and come down about
>> 50 px. It will have a blue background. The body of the column will
>> have a whote background and come down about 300-400 px. The footer
>> will come down about 20 px also have text and a blue background.[/color]
>
>Simple. Basic layout found on numerous websites.
>
><div id="container" >
> <div id="header" style="width:10 0%; height:50px; border:solid 1px blue;
>background:#00 F;">text</div>
> <div id="col1" style="what ever and float:left;">te xt</div>
> <div id="col2" style="what ever and float:left;">te xt</div>
> Add more divisions if desired last one should contain "clear:both ;".
> <div id="footer" style="as you like it">content</div>
></div>
>
>[/color]