How Do I Make A Box To Surround My Text?

lonebyrd · September 8, 2006

It's been a while since I've been to my site... couldn't pay for my internet. But when I did get back to my site, there were some things that I saw that I have been wanting to change, but just can't figure out how. Before I left I searched the net, but couldn't find my answer. What I'm trying to do is, have a box surround information I have on a page. I tried using <fieldset> but it took up the whole lenght of the page. What I want to do is have something I can make custom size and center, put in colors if I want, have a border. And one problem I was having with the <fieldset>, which was probably just me, was I couldn't figure out the spacing. I tried having the text appear about 10 spaces in at one point, and 15 at another, and I couldn't get it to work. It all appeared on the left. I also couldn't figure out how to get the submit buttons to appear on the right. Like I said, I googled around, but maybe I'm not searching for the right things.

pyost · September 8, 2006

I think it would be best if you did this with CSS. If you already have CSS on your page, it will be easy to adjust. If you don't, just add this code between the <HEAD> tags.

<link href="style.css" rel="stylesheet" type="text/css" />

Also, you will need to create a file named "style.css" and put it in the same folder as the pages. Now, write the following code in that CSS file (or the existing file, if there is one).

.box {   width: auto;   height: auto;   border: 1px solid #FFFFFF;   text-align: center;}

Now to explain the attributes. Width and height define the box size. It it's on auto, it will "wrap" around the text. You could also write "150px" instead of "auto". Next is the border. You can define its thickness (1px), style (solid - simple line, dotted, dashed etc.) and the colour (#FFFFFF - black). Text-align is obviously used to align the text. There are four options - left, center, right and justify. There are also numerous other attributes that can define a CSS class.

In order to use this with you text, instead of putting <fieldset>, write <div class="box">TEXT GOES HERE</div>.

As for the spaces problem, it can also be solved through CSS. In the CSS file add this text.

.space1 {   padding-left: 20px;}.space2 {   padding-left: 30px;}

The padding-left attribute tells the broser to move the text X pixels from the left border. Again, you can use any value you like. And how is this used? Easily. This would be a piece of text with 20px padding for the 3rd line, and 30px for the fifth.

<div class="box">
  This is the line number one text.<br />
  This is the line number two text.<br />
  <span class="space1">This is the line number three text.</span><br />
  This is the line number four text.<br />
  <span class="space2">This is the line number five text.</span><br />
  This is the line number six text.
<div>

Hope this helps.

Vyoma · September 8, 2006

Adding to what Pyost has said, you could actually make the different borders (top, bottom, left, right) differently coloured. Using this you could actually create a sort of 3D effect to your bordered box. Now, how to specify these attributes induvidually you may ask. Instead of the code:

.box {   width: auto;   height: auto;   border: 1px solid #FFFFFF;   text-align: center;}

You have to use an altered one, where, instead on just one 'border' property for all the borders, you can have for specifics:

.box {   width: auto;   height: auto;   border-top: 1px solid #FF0000;   border-bottom: 1px solid #00FF00;   border-right: 1px solid #0000FF;   border-left: 1px solid #FFFF00;   text-align: center;}

Here ofcourse, I have chosen colours to be all different (red, green, blue and yellow - in that order), but that is just for illustration. What you could do was, if you had the box with background colour of blue, for the top and left, choose a light blue colour, for the right and bottom, choose a dark blue colour. That would give the effect as if the box was embosed and there was a source of light at top-left.

The choice of colours for seperate borders may also be used for other design methods.

lonebyrd · September 9, 2006

I like the idea of putting it in CSS, as I already have a small CSS file. I also like the idea of having a 3D type effect to the box. My only question is, can I align the text differently using this CSS method? What I'm trying to do is have the first line of text aligned left, next 3 or so lines about 10 spaces in, and the submit buttons aligned to the right. Is this possible with CSS?

Arbitrary · September 9, 2006

Yeah, that is possible with CSS.

If you want to align the text either left or right, you can just use the text-align attribute and apply it to whichever block of text you want, like this:

<div class="left"></div>

First create the class and call it what you please...

Then in the CSS code, you can label the class with:

div.left {	 text-align: left;}

Other attributes for text-align are right, center and justify.

I guess if you wanted to have the next 3 lines 10 spaces in you could always specify a blockquote, like this:
<blockquote>your text here</blockquote> Then you can use CSS to decorate the blockquote to suit your needs (i.e. add a border on the left to show its indentation or something. Then for your submit regions to be aligned right you can add another <div class="right"></div> and then specify styles for that. I suppose if you wanted you could do the same with a <p class="left"></p> if you don't want to use <div>s in your form.

lonebyrd · September 9, 2006

I've looked at this for like an hour now and can't figure out why it's not working. I've done what is suggested here, and even looked at a few sites I've found through google, but nothing. Here is the code I have:

Just the div code in my page

<div class="box">Conformation Page</br></br><span class="space1">You Have Chosen:   Public Access - Level 1</span></br><span class="space2">You are allowed:   1 Set</span></br><span class="space3">4 Crew</span></br><span class="space4"> Advertisments</span></br><span class="space5">   Total Cost: $$$$$$$</span></br><span class="space6">		 Do you want to continue with this transaction?</span></br><p align="right"><FORM METHOD="LINK" ACTION="http://forums.xisto.com/no_longer_exists/ TYPE="submit" VALUE="Yes"></FORM><FORM METHOD="LINK" ACTION="http://forums.xisto.com/no_longer_exists/ TYPE="submit" VALUE="No"></FORM></align></div>

CSS

.box {   width: auto;   height: auto;   border: 1px solid #FF0000;   padding: 2px;   margin: 2px;   }.space1 {   padding-left: 5px;}.space2 {   padding-left: 5px;}.space3 {   padding-left: 15px;}.space4 {   padding-left: 15px;}.space5 {   padding-left: 5px;}.space6 {   padding-left: 20px;}

Does anyone see what is wrong??

kaputnik · September 9, 2006

What I normally do, and something that really puts in a whole lot of structure into all my web pages is to use tables. Simple HTML will sort this out. To Create a box, all you need is a table with 1 row and 1 column. To keep this in the center, you just need to set the alignment attribute to "center". In fact you can have tables within tables to keep your layout exactly as you want it. What's more - you can specify width and height and - like you['re looking out to doing, set the borders with light and dark colours so that it gives a great 3D effect.

From what you've written, Table in the center of the page, with a colour, 3D borders - can be sorted out with something like this:

<TABLE WIDTH = "200" HEIGHT = "100" ALIGN = "center" BGCOLOR = "blue" CELLPADDING = "2" BORDER= "3"  BORDER-STYLE = "ridge">   <TBODY>	<TR>			  <TD>	<CENTER>	<Font Color = "White" SIZE = "5">Hope this works out for you..!!</FONT>	</CENTER>	</TD>	  	</TR>  </TBODY></TABLE>

Placed in a web page, what this will instantly do is give you a box in the middle of the page with a width of 200 px a height of 100 px; gives you a 3D border (you can get into more detailing with the border properties).. You've got a blue background with the writing int he center and sized to 5.

When you make a table - you need to keep in mind that you need to use the TBODY (shows the start of the body of the table, the TR (to designate the start of a row) and the TD attribute which will tell the system that there is a bit of data (like maybe some text or an image). Of course, if you get into detailing some more there are a huge many possibilities to getting your tables just as you want them.

pyost · September 9, 2006

While it would work, it doesn't use CSS nor is it XHTML correct, which is like a standard nowadays.As for your code, lonebyrd, first I have a few suggestions.1. In the HTML code, use all lowercase letters2. Don't put numerous spaces after that <span> tag, as it will be seperated by the CSS3. Always use relative URLs, in case you change the web site address (i.e. get a domain)I don't really see the problem, since it's working (rather) fine for me. I don't know what exactly what you want, but the only real problem I can see is the box width. Auto/nothing obviously sets it to 100%, so you ought to use width: 300px, or some other value. And yeah, you also closed the <p> tag with </align> instead of </p> :)Anyway, if you can draw what you want in Photoshop, I'd be more than glad to make it myself, since that way I improve my skills.

lonebyrd · September 10, 2006

Is this maybe an IE thing, me not being able to see the box? Are you using FireFox Pyost? I thought I read somewhere while googleing that in IE, you cant use width or height. I don't know how true that was or where I read it. On this computer I am using IE version 6.0. Is that the newest version? I don't like to do too many updates on this computer as it isn't mine. Mine is being fixed again...CPU fan I guess. But could IE be the reason my page isn't appearing right to me?

pyost · September 10, 2006

I wouldn't be worried about that. IE tends to get a little (too) buggy. I also have IE version 6, and I can see the box. Here's an example of the mentioned IE bugginess. On my Joomla! powered web sites, IE doesn't display images inside modules - but just on my computer. All the other people who have IE6 see the image.So, for testing purposes, use Firefox, since it interprets the CSS code properly. After you're done tweaking your site, fire up IE, and see what is being displayed as it should be. IE has always had problems with CSS, so you will probably need to modify the CSS file so the site looks the same in all browsers.

iGuest · September 10, 2006

The Opera browser is also a good browser to build sites with since it is similarly more compliant with the standards. All browsers display the code a "little" differently from each other, but I have found that the FF and Opera browsers are the most compliant "popular" browsers. And IE6 has a 'few' bugs in it, so only worry about IE after it works as designed in FF/Opera.Another thing, if you download the FF browser, also download the Web Developer Extension for it. There are some pretty handy features included with it. Check it out.

lonebyrd · September 11, 2006

My computer that is getting fix has FireFox with the web developers extension. I had just got the extension on my machine when the CPU fan went. But the guy who has my computer takes forever to get to things, so I wont have my PC back for a few weeks probably, and it's already been a couple of weeks. I hate not knowing how to repair my computer! This is the third time something has gone wrong with that machine that I've had to spend money on it. If I had more money, I'd just buy a new one.

Sign In

How Do I Make A Box To Surround My Text?

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information