CHEAP LAYOUT
A Full width layout. Tada!
<!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;
}
It doesn't work. Maybe I didn't run this correctly but it doesn't work.
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.
@ 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!
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 */
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:
my layout continues to be cheap. :P
ok so you found bugs i will have to set backup locally.
here is what i was using it for locally
Heres layout without horizontal scrolling.
What does anyone think?
As far as I am aware, <header>
and <footer>
are to be used inside <body>
.
Oh well i just updated it lazily thanks for the heads up,Assembly Guy.
Also here is another screen shot with some css3.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.