473,889 Members | 1,588 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 23561
no*********@now here.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*********@no where.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*********@n owhere.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*********@now here.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*********@now here.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: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>

Jul 21 '05 #5
no*********@now here.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:

#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" <An*******@127. 001>
wrote:
On Mon, 07 Feb 2005 14:01:20 GMT no*********@now here.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: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>


Jul 21 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
1717
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 {#xmreisepop_reisepreistext_1_3#}. <%OPTIONAL%> and <%/OPTIONAL%> are not allowed to be inside these tags again.
4
1861
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 seems like they are not compatible with each other so when i add the text fader code in the <body> tag,the rest of my site is gone :S if someone please can have a look at my code and tell what am i doing wrong. thx allot for whom of you who can =) ...
1
3778
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
2348
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: #C6DEF0; border-color: #E5F5FF; }
5
3025
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 field 1 to field 3, then field 2 text and field 3 move to field 1 and field 2. I add the new order of text into an array so when the onDragEnd event
2
2114
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 do this in all browsers either. I have found it to happen in IE 7 and the latest patched IE 6. I have tried to find out the reason, but keep finding strange behaviour! You will see at the bottom of the HTML, I have a comment. If you follow...
1
4240
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 aligned to the top, along with the slideshow and link buttons, you have to scroll down to see the text - how can I make IE6 display correctly? http://geekarama.co.uk/new_home.html here is the code for new_home.html and following that the CSS...
3
13314
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
9810
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11198
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10889
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10442
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9609
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5829
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6029
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4251
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3256
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.