473,327 Members | 2,025 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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 23529
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Lui Ali | last post by:
Hello, Problem: I want to get the whole text between the opening tag <%OPTIONAL%> and the closing tag <%/OPTIONAL%>. The right block is found by (and contains) the placeholder...
4
by: anatushi | last post by:
Hi, im looking for help on how to add a text fader to my website, usually i'm working with css but in this case i need to add java script to make it work, that wasn't the problem but somehow it...
1
by: IkBenHet | last post by:
Hello, I found this script to create a simple rich text form (http://programmabilities.com/xml/index.php?id=17): <html> <head> <title>Rich Text Editor</title> </head> <body>
1
by: Basso | last post by:
Hello, I'd like to add a progressive number to upper-left corner on every TH element avoiding cell text reposition. // TH props table.quadroData th { text-align: center; background-color:...
5
by: simon_s_li | last post by:
Hi, I have 5 fields in line where I need to drag and drop the text from one field to another field and then all the fields need to re-order themselves. So for instance if I drag the text in...
2
by: george.leithead | last post by:
Hi all, I have a very strange problem! In following Web page (which is generated from a CMS System), the navigation to the left 'dissapears' when you roll the mouse over the links? It does not...
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
3
by: happyse27 | last post by:
Hi All, I wanted to align the text box for user registration but the code just wont budge... Kindly advise what is wrong? Cheers... Andrew <HTML>
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.