border around web page and bg color [Archive] - SEO Best Practices Search Engine Forums

View Full Version : border around web page and bg color

lynnepem

13-09-2003, 20:13/08:13PM

Hi

Help! I've searched this forum and also lots of various HTML websites but am still yet to find answers.

I'm preparing an HTML doc. to be used in email promotion. These are the queries I have...

1. I need to create a background color for just part of the text in the body?

2. I need to place a border around the whole of the page?

Hope somebody can help pretty quick as I have to have this email ready for our promoter on Monday.

Thanks,
Ray

qwerty

13-09-2003, 20:43/08:43PM

Ray,

I prefer actually doing this stuff myself before I tell people how, but I think this can be done pretty easily.

1) For the text with a background color, put it inside a <div> and set a background-color for the div.

2) To put a border around the whole page, make the page a table with a single cell and set border weights for it. If the page was already a table, just nest it inside a table with a single cell. I hate nesting tables, but I expect it will at least work.

qwerty

13-09-2003, 20:55/08:55PM

OK, very quick and dirty, but it seems to work:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>

</style>
</head>

<body>
<div align="center">
<center>
<table style="border-style:solid; border-width:6; border-collapse: collapse" cellpadding="0" cellspacing="0" width="95%" height="95%" border="9" bordercolorlight="#000000" bordercolordark="#000000">
<tr>
<td>
<p>blah blah blah</p>
<div class="color"><p>more blah blah blah</p></div>
</td>
</tr>
</table>
</center>
</div>
</body>

</html>

polarmate

13-09-2003, 21:00/09:00PM

border:10px solid #C00000;

This will place a 10 pixel width dark red border around your page. It will be around the scrollbars, too.

WebSavvy

14-09-2003, 12:27/12:27PM

I have a page that I've done that on a while ago. You can look at my source code to see how to do it:
http://arachnid.esubmit-it.com

:)

lynnepem

14-09-2003, 14:54/02:54PM

Hi

Thanks qwerty, polarmate and savvy1 -- much appreciated. :-)

All very helpful info and am rapidly using and trying out -- so far successfully.

One question -- how do you set the width between borders of the HTML doc.

I can't make width of doc the whole page as the person viewing the HTML email will have too much scrolling to do if he/she does not enlarge the email. (If you see what I mean)

I did check W3, searched this forum and a few other website tip areas but could not find info. Am still searching.

Well, putting this HTML email together is a long haul but the end result will be worth it as I will be able to use it in future promotions.

qwerty

14-09-2003, 16:29/04:29PM

I can't make width of doc the whole page as the person viewing the HTML email will have too much scrolling to do if he/she does not enlarge the email. (If you see what I mean)
I think that if you set it to be a certain percentage, it will fill that portion of the space of the window the user opens, no matter what size they choose to make it.

For example, if you make it 90% and the user opens the message in a window that's 600 px wide, the page will be 540 px wide. And if you make it 100% it will be the full 600 px. It's only if you set a width of a certain number of pixels and the window containing it is narrower than that amount that the user will have to scroll horizontally. That is, using my example, if the user opens it in a 600 px wide window, but you've set it to be 800 px wide.

lynnepem

14-09-2003, 16:54/04:54PM

Hi Bob,

Thanks for that.

Do you know the HTML code to set the width between borders?

I'm up and running on the background color for part of the text and placing a border around the page, from the info you and the other forum members gave.

Just need this final part and I'll be set.

Thanks for all your help and maybe I can give you some in return some day.

Best
Ray

qwerty

14-09-2003, 17:18/05:18PM

I'm not sure what you mean by the width between borders, if the border is a single one going around the edge of the page. If you mean the space between the border and the text next to, above, or below it, that depends on whether you're implementing this by using a single-celled table. If that's the case, you just have to set cell padding.

lynnepem

14-09-2003, 17:53/05:53PM

Hi Bob,

What I mean is the HTML code for the page width between borders. The width and the height of the page between borders.

I would then be able to make the page smaller or larger between borders.

Ray

qwerty

14-09-2003, 18:00/06:00PM

Well, there's the topmargin and leftmargin that can be set in the body tag: <body topmargin="100" leftmargin="40"> I suppose if you then centered your content by placing a <center> tag immediately after the body tag and a </center> immediately before </body> you'd be ok.

But I'm still not certain that's what you're talking about. Sorry.

lynnepem

14-09-2003, 18:08/06:08PM

Hi Bob,

It's me again -- just to elaborate a little more -- I want to decrease or increase the volume of the page within the borders by decreasing or increasing the measurements of the border around the page.

For example lets say I want to adjust the border, now 10" wide x 10" high to a 5" wide x 5" high or vice versa. Or whatever size: from 10" w x 15" h to 30" w x 50" h. or vice versa.

Above examples are hypothetical and have no bearing on web page sizes.

I need the HTML code so that I can adjust the width and height of the border as outlined in the above examples.

Best
Ray

qwerty

14-09-2003, 18:20/06:20PM

If you're using a table to contain the contents of the page, you can set the width and height of the table. Obviously, you can't use inches (which are irrelevant) but you can set it to a particular number of pixels.

But as I said earlier, I'd advise againt that, and recommend that you set the table height and width to percentages. That way your design will be more fluid, adjusting itself to that percentage of the size of the window.

If you're not using a table, stick the whole thing in a div (with a different class than the div with the background color) and set both a width and a border for that div. That should work fine.

qwerty

14-09-2003, 18:26/06:26PM

Here's another example:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<div style= "width: 80%; height=80%; border:10px solid #C00000">
<p>Some text in the normal paragraph. This is the paragraph that is not in the div which has a background color.</p>
<div style= "background-color: blue">
<p>And here we have text inside the div set to have a background color of blue.</p>
</div>
</div>
</body>

</html>

lynnepem

14-09-2003, 18:37/06:37PM

Hi Bob,

Appreciated. I will try it out and see if all is well -- this will be later today as I have to go out.

I'll let you know how it goes.

Thanks a lot.

Best,
Ray