469,362 Members | 2,548 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,362 developers. It's quick & easy.

Text on Border?

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

Jul 21 '05 #1
6 23295
no*********@nowhere.com wrote:
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


Latter. There is nothing 'in' a border. Make a container div and give
that a padding-top: 30px.
Jul 21 '05 #2
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." <us****@firasd.org>
wrote:
no*********@nowhere.com wrote:
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


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


Jul 21 '05 #3
>>no*********@nowhere.com wrote:
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
On Sun, 06 Feb 2005 20:10:44 -0500, "Firas D." <us****@firasd.org>
wrote:
Latter. There is nothing 'in' a border. Make a container div and give
that a padding-top: 30px.

no*********@nowhere.com wrote: 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.


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

Jul 21 '05 #4
On Mon, 07 Feb 2005 14:01:20 GMT no*********@nowhere.com wrote:
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.


Simple. Basic layout found on numerous websites.

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

Jul 21 '05 #5
no*********@nowhere.com wrote:
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.


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
Jul 21 '05 #6
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:

#rightboxcontainer
{
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;
}

#rightboxcontent
{
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="rightboxcontainer">
<div id="rightboxheader"><h2>Title Here<br />Subtitle Here</h2></div>
<div id="rightboxcontent">
<h3><strong>Lead sentence would go here!
</strong>&nbspParagraph 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="rightboxfooter"><h2>Footer Here</h2>
</div>
</div>

On Mon, 7 Feb 2005 09:56:14 -0600, "Richard" <An*******@127.001>
wrote:
On Mon, 07 Feb 2005 14:01:20 GMT no*********@nowhere.com wrote:
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.


Simple. Basic layout found on numerous websites.

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


Jul 21 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Lui Ali | last post: by
4 posts views Thread by anatushi | last post: by
1 post views Thread by Basso | last post: by
5 posts views Thread by simon_s_li | last post: by
2 posts views Thread by george.leithead | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.