Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How can I validly centre my header?

    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

    Code:
    <!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>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Haven't we been over this already? I'm pretty sure we have.
    Code:
    h1#greet {
    text-align:center;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Haven't we been over this already? I'm pretty sure we have.
    Code:
    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
    Last edited by effpeetee; 07-18-2007 at 11:41 AM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Umm yeah, you can't put html inside of CSS. Just remove <h4>.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Umm yeah, you can't put html inside of CSS. Just remove <h4>.
    Done so.
    Now OK.

    Thanks,

    You're a brick.

    Frank
    Last edited by effpeetee; 07-18-2007 at 04:19 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •