A CHEAP LAYOUT BUDDY

XEN0 0 Tallied Votes 446 Views Share

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;
}
Member Avatar for LastMitch
LastMitch

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

JorgeM 958 Problem Solver Team Colleague Featured Poster

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.

XEN0 -5 Newbie Poster

@ 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!

XEN0 -5 Newbie Poster

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 */
Member Avatar for LastMitch
LastMitch

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

XEN0 commented: Thanks problem fixed tho set margin left and right for header ,footer,centerbody to 0 +1
XEN0 -5 Newbie Poster

my layout continues to be cheap. :P

XEN0 -5 Newbie Poster

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

XEN0 -5 Newbie Poster

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

XEN0 -5 Newbie Poster

here is what i was using it for locally
bd9ed2809735501b70cb0b54c76d4731

XEN0 -5 Newbie Poster

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

Assembly Guy 72 Posting Whiz

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

XEN0 -5 Newbie Poster

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.