header with tables.

I put a header in the top row in my whole page sized table. Now I want to add text on top of my header, but I don't know how.

Also, how do I use layers inside of tables so that they will be fine for different screen resolutions (if possible).  I switched to frames because I didn't want to have trouble controlling what happens to layers when switching screen resolutions.
LVL 7
weikelbobAsked:
Who is Participating?
 
seanpowellConnect With a Mentor Commented:
Well, 760 pixels would be the minimum width because of the size of your header image. Other than that, this layout is completely flexible:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

body
{
      margin:0;
      padding:0;
      font:13px arial, verdana, sans-serif;
}

#header
{
      background-color:#cccccc;
      text-align:center;
      height:57px;
}

#header img
{
      display:block;
}

#leftcol
{
      float:left;
      width:32%;
}

#centercol
{
      float:left;
      width:35%;
      text-align:center;
}

#rightcol
{
      float:left;
      width:32%;
}

.spacer
{
      padding:10px 20px;
}

#leftcol p, #rightcol p
{
      text-align:justify;
}

img
{
      border:none;
}

a:link, a:visited, a:hover, a:active
{
      text-decoration:none;
}

</style>
</head>

<body>
<div id="header">
      <img src="images/1header1-nonsliced.jpg" width="780" height="245">
</div>

<div id="leftcol">
      <div class="spacer">
      <p>I offer really nice home pages and personal pages at the price of $30 a site. I start with really nice templates from <a href="boxedart.com">BoxedArt</a>, so I am able to keep my prices down.</p>
      <p align="justify">I should be able to have your site available in one week or less. Send me a payment, then <a href="contact/contact-just-sliced.html">contact</a> me (if you haven't already) to tell me what you want on your site.</p>
      <p>I use PayPal for all my money transactions, so you have extremely high encryption protecting your information.</p>
      <p>PayPal even takes checks, but the turnaround time is 1-2 weeks as opposed to 3-4 days for credit card purchases.</p>
      </div>
</div>

<div id="centercol">
      <div class="spacer">
      <p>You get one new Yahoo e-mail with each site that you purchase. It's nice to have a couple of e-mails.</p>
      <p><img src="woman-on-computer.jpg" width="146" height="105"></p>
      <p style="margin-top:60px;">Your web site address will be like this:<br />
      name.B-Transfers.com<br />
      Your e-mail will be of the form:<br />
      <a href="mailto:yourname@b-transfers.com">yourname@b-transfers.com</a></p>
      </div>
</div>

<div id="rightcol">
      <div class="spacer">
      <p>My name is Bob. I am a web designer that runs B-Transfers out of my parent's home. I'm 30 years old and&nbsp; I spend a lot of my time running B-Transfers. I like making personal pages.</p>
      <p>I offer home pages for just about anyone who wants one. I also make personal pages for people that have different uses for them, like improving your resume.</p>
      <p>If you are looking for a business site, I build them too. Go to <a href="b-transfers.com">B-Transfers.com</a> for a business page.</p>
      <p>If you still have questions, send me an e-mail through my <a href="contact.html">contact</a> page.</p>
      </div>
</div>

</body>
</html>
0
 
seanpowellCommented:
To answer your first question, I'd need to see what your header is made up from. Is this online?

As to the second, I assume you're talking about div's. Using tables to layout your page is really not a good idea, and using div's inside the cells is even worse. The whole deal about screen resolution is to setup your layout with percentages and make it flexible from a design standpoint. But I don't know what you're working on so I can't be specific...
0
 
weikelbobAuthor Commented:
If I don't use tables or layers (the blue boxes in FrontPage2003)

to lay out my page, how else can I do it and remain compatable to all visitors?

Bob
0
 
seanpowellCommented:
By using divs (layers as FrontPage calls them) and css to layout the page.

If you can show me an example of your page, I can show you how it should be setup.
0
 
weikelbobAuthor Commented:
So by using CSS you can have the layers compatable to all browser?

Here's a tables page.


<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>I offer really nice home pages a</title>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!-- MSTableType="layout" -->
      <tr>
            <th valign="top" colspan="3" height="57" bgcolor="#CCCCCC">
            <!-- MSCellType="ContentHead" -->
            <p align="center">
            <img border="0" src="images/1header1-nonsliced.jpg" width="780" height="245"></th>
      </tr>
      <tr>
            <td valign="top" width="30%" height="423">
            <!-- MSCellType="NavBody" -->
            <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
                  <!-- MSCellFormattingTableID="6" -->
                  <tr>
                        <td height="100%" width="100%">
                        <!-- MSCellFormattingType="content" -->
                        <table border="0" width="100%" height="100%" cellpadding="20" cellspacing="0">
                              <tr>
                                    <td width="30%" height="100%" valign="top">
            <p align="justify"><font size="2">I </font><font face="Arial" size="2">
            offer really nice home pages and personal pages at the price of $30 a site. I start with
            really nice templates from <a href="boxedart.com">BoxedArt</a>, so I am
            able to keep my prices down.</font></p>
            <p align="justify"><font face="Arial" size="2">I should be able to have
            your site available in one week or less. Send me a payment, then
            <a href="contact/contact-just-sliced.html">contact<span style="text-decoration: none">
            <font color="#000000">me</font></span></a> (if you haven't already) to tell me what you want on your site.
            </font></p>
            <p align="justify"><font face="Arial" size="2">I use PayPal for all my
            money transactions, so you have extremely high encryption protecting
            your information.</font></p>
            <p align="justify"><font face="Arial" size="2">PayPal even takes checks,
            but the turnaround time is 1-2 weeks as opposed to 3-4 days for credit
            card purchases.</font></p>
            &nbsp;</td>
                              </tr>
                        </table>
                        </td>
                  </tr>
            </table>
            </td>
            <td valign="top" width="35%" height="423" align="center">
            <!-- MSCellType="ContentBody" -->
            <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
                  <!-- MSCellFormattingTableID="7" -->
                  <tr>
                        <td height="100%" width="100%">
                        <!-- MSCellFormattingType="content" -->
                        <table border="0" width="100%" height="100%" cellpadding="20" cellspacing="0">
                              <tr>
                                    <td width="35%" height="100%" valign="top">
                                    <p align="center">
                        <font face="Arial" size="2">You get one new Yahoo e-mail with
                        each site that you purchase. It's nice to have a couple of
                        e-mails. </font></p>
                                    <div align="center">
                                          <table border="0" width="100%" id="table1" cellpadding="0">
                                                <tr>
                                                      <td width="100%">
                                                      <p align="center">
                                                      <img border="0" src="woman-on-computer.jpg" width="146" height="105"></td>
                                                </tr>
                                          </table>
                                    </div>
                                    <p align="center">&nbsp;</p>
                                    <p align="center">&nbsp;</p>
                                    <p align="center">&nbsp;</p>
                                    <p align="center"><font face="Arial" size="2">Your web site address will be
                              like this: name.B-Transfers.com Your e-mail will be of the form:<span style="text-decoration: none"><font color="#000000"><a href="mailto:yourname@b-transfers.com">yourname@b-transfers.com</a></font></span></font></p>
                              <p style="margin-top: -1px; margin-bottom: -1px" align="justify">&nbsp;</p>
                              <p style="margin-top: -1px; margin-bottom: -1px" align="justify">&nbsp;</p>
                              <p style="margin-top: -1px; margin-bottom: -1px">&nbsp;</td>
                              </tr>
                        </table>
                        </td>
                  </tr>
            </table>
            </td>
            <td valign="top" width="35%" height="423">
            <!-- MSCellType="NavBody2" -->
            <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
                  <!-- MSCellFormattingTableID="8" -->
                  <tr>
                        <td height="100%" width="100%">
                        <!-- MSCellFormattingType="content" -->
                        <table border="0" width="100%" height="100%" cellpadding="20" cellspacing="0">
                              <tr>
                                    <td width="35%" height="100%" valign="top">
                                    <p align="justify">
      <font face="Arial" size="2">My name is Bob. I am a web designer that runs
      B-Transfers out of my parent's home. I'm 30 years old and&nbsp; I spend a
      lot of my time running B-Transfers. I like making personal pages.</font></p>
                                    <p align="justify">
      <font face="Arial" size="2">I offer home pages for just about anyone who
      wants one. I also make personal pages for people that have different uses
      for them, like improving your resume.</font></p>
      <p align="justify"><font face="Arial" size="2">If you are looking for a business site, I
      build them too.&nbsp; Go to <a href="b-transfers.com">B-Transfers.com</a>
      for a business page.</font></p>
      <p align="justify">If you still have questions, send me an e-mail through my
      <a href="contact.html">contact</a> page.&nbsp;</td>
                              </tr>
                        </table>
                        </td>
                  </tr>
            </table>
            </td>
      </tr>
      <tr>
            <td valign="top" colspan="3" height="39">
            <!-- MSCellType="ContentFoot" -->
            &nbsp;</td>
      </tr>
</table>

</body>

</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.