weikelbob
asked on
CSS with Frontpage 2003 and php
Seanpowell said in a previous question that if I was working with the header, I make the changes there instead of inline
I don't know exactly what I'm talking about, maybe my script will help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Langua ge" 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%;
}
#footer
{
background-color:#cccccc;
text-align:center;
height:57px;
}
#footer img2
{
display:block;
}
.spacer
{
padding:10px 20px;
}
#leftcol p, #rightcol p
{
text-align:justify;
}
img
{
border:none;
}
img2
{
border:none;
}
a:link, a:visited, a:hover, a:active
{
text-decoration:none;
}
</style>
</head>
<body>
<div id="header" style="width: 989px; height: 111px">
<img border="0" src="../Smaller-header-for -all-pages gif.gif" width="780" height="166"></div>
<div id="leftcol">
<div class="spacer">
<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-j ust-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>
<p> </p>
<p> </p>
<p> </div>
</div>
<div id="centercol" style="width: 346px; height: 255px">
<div class="spacer">
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="text-align: justify; margin-top: -1px; margin-bottom: -1px">
<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>
<p style="text-align: justify">
<img border="0" src="../man-in-yellow.jpg" width="148" height="107"></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">Your web site address will be
like this:</font></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">   ;
name.B-Transfers.com</font ></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify"> </p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">Your e-mail will be of the form:</font></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">   ;
<span style="text-decoration: none"><font color="#000000">
<a href="mailto:yourname@b-tr ansfers.co m">
yourname@b-transfers.com</ a></font>< /span></fo nt></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify"> </p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">I think you'll like what you get
from me.</font></p>
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px"> <p> </div >
</div>
<div id="rightcol" style="width: 316px; height: 130px">
<div class="spacer">
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px">
<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 I spend a
lot of my time running B-Transfers. I like making personal pages.</font></p>
<p>
<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><font face="Arial" size="2">If you are looking for a business site, I
build them too. Go to
<a href="../b-transfers.com"> B-Transfer s.com</a>
for a business page.</font></p>
<p>If you still have questions, send me an e-mail through my
<a href="../contact.html">con tact</a> page.<p> </div>
</div>
</body>
</html>
I don't know exactly what I'm talking about, maybe my script will help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Langua
<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%;
}
#footer
{
background-color:#cccccc;
text-align:center;
height:57px;
}
#footer img2
{
display:block;
}
.spacer
{
padding:10px 20px;
}
#leftcol p, #rightcol p
{
text-align:justify;
}
img
{
border:none;
}
img2
{
border:none;
}
a:link, a:visited, a:hover, a:active
{
text-decoration:none;
}
</style>
</head>
<body>
<div id="header" style="width: 989px; height: 111px">
<img border="0" src="../Smaller-header-for
<div id="leftcol">
<div class="spacer">
<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-j
contact<span style="text-decoration: none">
<font color="#000000">me</font><
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>
<p> </p>
<p> </p>
<p> </div>
</div>
<div id="centercol" style="width: 346px; height: 255px">
<div class="spacer">
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="text-align: justify; margin-top: -1px; margin-bottom: -1px">
<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>
<p style="text-align: justify">
<img border="0" src="../man-in-yellow.jpg"
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">Your web site address will be
like this:</font></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">  
name.B-Transfers.com</font
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">Your e-mail will be of the form:</font></p>
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">  
<span style="text-decoration: none"><font color="#000000">
<a href="mailto:yourname@b-tr
yourname@b-transfers.com</
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<p style="margin-top: -1px; margin-bottom: -1px; text-align:justify">
<font face="Arial" size="2">I think you'll like what you get
from me.</font></p>
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px"> <p> </div
</div>
<div id="rightcol" style="width: 316px; height: 130px">
<div class="spacer">
<p style="margin-top: -1px; margin-bottom: -1px"> </p>
<p style="margin-top: -1px; margin-bottom: -1px">
<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 I spend a
lot of my time running B-Transfers. I like making personal pages.</font></p>
<p>
<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><font face="Arial" size="2">If you are looking for a business site, I
build them too. Go to
<a href="../b-transfers.com">
for a business page.</font></p>
<p>If you still have questions, send me an e-mail through my
<a href="../contact.html">con
</div>
</body>
</html>
ASKER
It makes some sense as I am new with CSS. ,It looks good in IE 6.0 but in Netscape 7.1 the header overlaps the body of the page and is justified to the left
Here's a piece of my code, is this right?
<body>
<div id="header">
<img border="0" src="../Smaller-header-for -all-pages gif.gif" width="780" height="166"></div>
<div id="leftcol">
Here's a piece of my code, is this right?
<body>
<div id="header">
<img border="0" src="../Smaller-header-for
<div id="leftcol">
Almost... like this:
#header
{
background-color:#cccccc;
text-align:center;
height:166px;
width: 989px;
}
#header img
{
margin:0 auto;
display:block;
}
And then:
<div id="header">
<img border="0" src="../Smaller-header-for -all-pages gif.gif" width="780" height="166">
</div>
But note that your header is now specified with an exact width (989 pxels) instead of not specifying any width and having it run the full width of the page, which may be better...
#header
{
background-color:#cccccc;
text-align:center;
height:166px;
width: 989px;
}
#header img
{
margin:0 auto;
display:block;
}
And then:
<div id="header">
<img border="0" src="../Smaller-header-for
</div>
But note that your header is now specified with an exact width (989 pxels) instead of not specifying any width and having it run the full width of the page, which may be better...
ASKER
I still cannot get my header to work.
Maybe I should include the code by showing it in pieces.
For now, here's the whole code of my page.
The header does not center in the screen unless I'm in a full page.
Thank you. I'm new to CSS/divs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Langua ge" 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;
width: 989px;
height:111px;
}
#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">
<p>
<img border="0" src="../Smaller-header-for -all-pages gif.gif" width="780" height="166"></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.ht ml">
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;">Y our 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-tr ansfers.co m">yournam e@b-transf ers.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 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>
Maybe I should include the code by showing it in pieces.
For now, here's the whole code of my page.
The header does not center in the screen unless I'm in a full page.
Thank you. I'm new to CSS/divs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Langua
<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;
width: 989px;
height:111px;
}
#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">
<p>
<img border="0" src="../Smaller-header-for
<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
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
<p style="margin-top:60px;">Y
name.B-Transfers.com<br />
Your e-mail will be of the form:<br />
<a href="mailto:yourname@b-tr
</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 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>
ASKER
I missed your last comment before I submitted my comment above. I guess the header is set that way on purpose. I'd like it to be centered all of the time.
This works, is it OK to do this?
#header
{
background-color:#cccccc;
text-align:center;
height:166px;
width: 100%;
}
This works, is it OK to do this?
#header
{
background-color:#cccccc;
text-align:center;
height:166px;
width: 100%;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<div id="header" style="width: 989px; height: 111px">
Change the stylesheet code to this:
#header
{
background-color:#cccccc;
text-align:center;
width: 989px;
height:111px;
}
and leave the actual div with only the id:
<div id="header">
Does that make sense?