...

View Full Version : How can I validly centre my header?



effpeetee
07-18-2007, 11:11 AM
How can I validly centre my header?

I cannot validate my index page completely as it does not like the way that I centre it. Namely I just put <center> before the print command.

I have removed the command from the enclosed code but I cannot find another way to centre the header.

I would appreciate any help.

The page with the invalid <center> command still in can be seen here.

http://www.exitfegs.co.uk

Frank - alias effpeetee


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Website/Page Title</title>

<script type="text/javascript" src="include.js">
</script>
<script type="text/javascript">


function greet() {
var todaydate = new Date();
var timeis = todaydate.getTime();
todaydate.setTime(timeis);
var houris = todaydate.getHours();
if (houris >17) display = "Evening";
else if (houris >11) display = "Afternoon";
else display = "Morning";
var title = document.title;
var welcome = ("Good " + display + ". Welcome to the Taylor Website");
document.write(welcome);

}

</script>
<style type="text/css">

body {
margin: 0;
padding: 0;
}

#clockbox0{
position: absolute;
left:1em;
font-weight:bold;
color:#fff;
}
#clockbox1{
position: absolute;
right: 1em;
font-weight:bold;
color:white; }

#wrap {
position: relative;
width: 950px;
margin: auto;
}



body
{background-color: #220000;
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: bold;
}

a img {border: none;
}

#header {position: fixed;
left: 120px
}

#header h1 {
color:#ff0000;
text-align: center;
}

#content {font-size: 12px;}

#intro {
color: #0FF;
width: 200px;
float: left;
}

#main {
float: right;
width: 750px;
}
#main p {
clear: both;
width: auto; /* reverting the width set in #content p */
}
#main a img {border: 2px solid white;}

#main a:hover img {border-color: orange;}

#imgcaption {
text-align: center;
color: #0FF;
}
.previewlink {}
.previewimage {
width: 700px;
float: left;
}

#links {
clear: left;
}
#links ul {
margin: 0;
padding: 0;
list-style: none;
}
#links ul a {
color: white;
font-size:1.2em;
font-weight: normal;
text-decoration: none;
}
#links ul a:hover {text-decoration: underline;}

#footer {<h4>
}

h1 {color:#f00;}

</style>
</head>
<body>
<div id="wrap"><span id="clockbox0"></span><span id="clockbox1"></span><br /></div>

<h1 id="greet"><script type="text/javascript">

greet();

</script></h1>

<div id="content">
<div id="intro">
<p>Some pictures are hyperlinks. They move on to a new picture. Click them and see!</p>
<p>Just a bit of family fun. Don't take it too seriously. Enjoy.</p>
</div>
<div id="main" style="Z-INDEX: 100; LEFT: 232px; POSITION: absolute; TOP: 103px">
<p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</p>
<p>The picture is randomly selected and will change every 45 seconds.Pressing the F5 key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you choose to move on</p>
</div>
<div id="links">
<ul>
<li><a href="two.html">Betty and Frank.</a></li>
<li><a href="three.html">Little Ted and Dmitri.</a></li>
<li><a href="four.html">Lovely Betty and Pussycat.</a></li>
<li><a href="five.html">Betty and the Bears.</a></li>
<li><a href="seven.html">Steven and Joyce and Mark.</a></li>
<li><a href="twelve.html">Ritcroft family group.</a></li>
<li><a href="Eddie.html">Eddie, relaxing at home.</a></li>
<li><a href="Bluebell1.html">Steven at ease.</a></li>
<li><a href="Steveintrain.html">Steve on the Bluebell Line.</a></li>
<li><a href="steveviewing.html">Steve at the box.</a></li>
<li><a href="dadatpub.html">'Smile please'</a></li>
<li><a href="Barker.html">Claire, Yvonne and Susan.</a></li>
<li><a href="xmas2006.html">Christmas 2006 at Yvonne's.</a></li>
<li><a href="nine.html">Family photos.</a></li>
<li><a href="hol1.html">Holiday snaps.</a></li>
<li><a href="LittleBoyBlue.html">Little Boy Blue</a></li>
<li><a href="Tarantella.html">Do you remember an inn.</a></li>
<li>(One of Betty's favourite poems.)</li>
</ul>
<br />


<ul>
<li><a href="Picchoose.html">Picture menu - all.</a></li>
<li><a href="Picchoosea.html">Picture menu 1.</a></li>
<li><a href="Picchooseb.html">Picture menu 2.</a></li>
<li><a href="Picchoosec.html">Picture menu 3.</a></li>

<li><a href="steve.html">Steven.</a></li>
<li><a href="aaind.html">Random pictures - full screen.</a></li>
</ul>
<br /></div>
<p >Website Builder - Frank Taylor<br />
Assisted by "Coding Forums"<br />
Updated 17th July,2007</p>
</div>
</body>
</html>

_Aerospace_Eng_
07-18-2007, 11:14 AM
Haven't we been over this already? I'm pretty sure we have.

h1#greet {
text-align:center;
}

effpeetee
07-18-2007, 11:32 AM
Haven't we been over this already? I'm pretty sure we have.

h1#greet {
text-align:center;
}
Yes, thank you friend.
I accidently erased a wrong file.
Had a problem with my server.
Re-uploaded several files including a faulty back-up.

It's what my collegue blames on the 'C-Nile' virus!

This has put it right now.

But my validator doesn;t seem to like this:-
It doesn't reject it but highlights it.

#footer {<h4>
}

h1 {color:#f00;}
h1#greet {
text-align:center;
}

Can you think why?

Regards and thanks again/

Frank

_Aerospace_Eng_
07-18-2007, 11:42 AM
Umm yeah, you can't put html inside of CSS. Just remove <h4>.

effpeetee
07-18-2007, 11:49 AM
Umm yeah, you can't put html inside of CSS. Just remove <h4>.
Done so.
Now OK.

Thanks,

You're a brick.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum