<!DOCTYPE HTML>
<html>
<head>
<title>A Digital Whirlwind Portal</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<header>
A Digital Whirlwind Portal
</header>
<body>
<div id="centerbody">
</div>
</body>
<footer>
<?php
echo dyn_menu($parent_menu, $sub_menu, "menu", "nav", "subnav");
?>
</footer>
</html>

header
{
 background-repeat:no-repeat;
 margin-top:-16px;
 margin-left:-500px;
 margin-right:-500px;
 background-color:#b4bec3;
 font-size:40px;
 text-align:center;
 height:100px;
 width:auto;
}
body
{
 background-color:#cccccc;
 height:950px;
}
#centerbody
{
  margin-top:-16px;
 margin-left:-500px;
 margin-right:-500px;
 background-color:#82949c;
 font-size:40px;
 text-align:center;
 height:800px;
 width:auto;
 background-repeat:no-repeat;
}
footer
{
  text-align:center;
  margin-top:-16px;
 margin-left:-500px;
 margin-right:-500px;
 background-color:#435a60;
 font-size:40px;
 text-align:center;
 height:400px;
 width:auto;
}
4
Contributors
12
Replies
105
Views
4 Years
Discussion Span
Last Post by XEN0
0

It doesn't work. Maybe I didn't run this correctly but it doesn't work.

0

I am not sure I understand the layout, but in any case as a side note, the <header> and <footer> elements are HTML5 so if you want to style them in IE <9, you'll have to include the HTML5Shiv. Unlike other browsers, IE will not style unknown elements by default.

0

@ LastMitch there are a few left over style elements that do not need to be there try taking them out.
First the php in the footer tag, background-reapeat:norepeat in,header,centerbody div.@JorgeM Thanks for the heads up i didnt take any of the styling opcode into consideration due to just being a local project. As it stands its cheap,but you can build of it i say!

0

Ok here is an updated version of my custom layout.

<!DOCTYPE HTML>
<html>
<head>
<title>A Digital Whirlwind Portal - Down for maintenance.</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<header>Your Page Title Here</header>
<body>
//navigation header
<div id="centerbody03">
<a href="./index.php" class="inlined">Home</a>
</div>
<div id="centerbody02">
<a href="./index.php" class="inlined">Home</a>
</div>
<div id="centerbody01">
<a href="./index.php" class="inlined">Home</a>
</div>
<div id="centerbody">
<h3>Server Status</h3>
Down for maintenence.
</div>
<p>Your Body Content Here</p> 
<div id ="status">
</div>

</body>
<footer>
<div id="fmenu">
Your Page Title - Navigation
<br>
<a href="./index.php" class="inlined">Home</a>
<a href="./about.php" class="inlined">About</a>
<a href="mailto:abigbanana1@hotmail.com" class="inlined">Contact</a><br\>
</div>
</footer>
</html>
//start css
header
{
 color:black;
 background-repeat:no-repeat;
 margin-top:-8px;
 margin-left:-500px;
 margin-right:-500px;
 background-color:#b4bec3;
 font-size:40px;
 text-align:center;
 height:150px;
 width:auto;
 z-index:0;
}
body
{
 background-color:#82949c;
}

#centerbody03
{
  color:black;
  margin-top:-40px;
 margin-left:580px;
 margin-right:660px;
 background-color:#82949c;
 font-size:20px;
 text-align:center;
 height:400px;
 width:200px;
 z-index:1;
}
#centerbody02
{
  color:black;
  margin-top:-399px;
 margin-left:240px;
 margin-right:140px;
 background-color:#82949c;
 font-size:20px;
 text-align:center;
 height:400px;
 width:200px;
 z-index:1;
}
#centerbody01
{
  color:black;
  margin-top:-399px;
 margin-left:10px;
 margin-right:100px;
 background-color:#82949c;
 font-size:20px;
 text-align:center;
 height:400px;
 width:200px;
 z-index:1;
}
#centerbody
{
 color:black;
 margin-top:-302px;
 margin-left:auto;
 margin-right:-7px;
 background-color:#b4bec3;
 font-size:20px;
 text-align:center;
 height:400px;
 width:200px;
 border-width:15px;
 z-index:1;
}
#register
{
  color:black;
  margin-top:-90px;
 margin-left:580px;
 margin-right:660px;
 background-color:#82949c;
 font-size:20px;
 text-align:center;
 height:400px;
 width:200px;
 z-index:1;
}
footer
{ 
  color:black;
  text-align:center;
  margin-top:-16px;
  margin-bottom:-50px;
 margin-left:-500px;
 margin-right:-500px;
 background-color:#435a60;
 font-size:20px;
 text-align:center;
 height:400px;
 width:auto;
}
a.inlined {
    display: inline;
}
a:link {color:#cccccc;}      /* unvisited link */
a:visited {color:#ffffff;}  /* visited link */
a:hover {color:#ffffff;}  /* mouse over link */
a:active {color:#cccccc;}  /* selected link */
1

Ok here is an updated version of my custom layout.

May I ask what are you doing?

This is not good organized code snippet.

The website shouldn't have a scroll bar going rightward, if the scroll bar is downward is fine but not like this:

6a199aea065568fb48705b35a536c9d7

Votes + Comments
Thanks problem fixed tho set margin left and right for header ,footer,centerbody to 0
0

ok so you found bugs i will have to set backup locally.

0

lastmitch throw some php in there for me, and show me.

Edited by XEN0

0

Heres layout without horizontal scrolling.
What does anyone think? 97ca1d7c1445ad1b3e9b4f6b24bebe64

0

As far as I am aware, <header> and <footer> are to be used inside <body>.

Edited by Assembly Guy

0

Oh well i just updated it lazily thanks for the heads up,Assembly Guy.
Also here is another screen shot with some css3. dc243de33ec44221008cc4b0fe0d5a64

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.