Solved

CSS with header, footer, left column, body

Posted on 2004-04-01
18
607 Views
Last Modified: 2010-05-18
I need a CSS that has 4 parts:

left column (for buttons) 190 x 768
header: 834 x 150
body: 834 x 540
footer: 834 x 78

Total page size is 1024 x 768
0
Comment
Question by:omom
  • 9
  • 9
18 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 250 total points
ID: 10740252
This is the basic setup:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>CSS Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body    {
      margin:0;
      padding:0;
      font-family: verdana, arial, helvetica, sans-serif;
      color: #000;
      background-color: #fff;
      }

#menu   {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 10px;
      border: 5px solid #666;
      background: #ccc;
      height: 768px;
      width: 190px;
      /* ie5win fudge begins */
      voice-family: "\"}\"";
      voice-family:inherit;
      height: 738px;
      width: 160px;
      }

html>body #menu {
      height: 738px;
      width: 160px;
      /* ie5win fudge ends */
      }


#header {
      margin: 0 0 0 190px;
      padding: 10px;
      border: 5px solid #666;
      background: #ccc;
      width:834px;
      height: 150px;
      /* ie5win fudge begins */
      voice-family: "\"}\"";
      voice-family:inherit;
      width:804px;
      height: 120px;
      }

html>body #header {
      width:804px;
      height: 120px;
      /* ie5win fudge ends */
      }


#content {
      margin: 0 0 0 190px;
      padding: 10px;
      border: 5px solid #666;
      background: #ccc;
      width:834px;
      height: 540px;
      /* ie5win fudge begins */
      voice-family: "\"}\"";
      voice-family:inherit;
      width : 804px;
      height: 510px;
      }

html>body #content {
      width : 804px;
      height: 510px;
      /* ie5win fudge ends */
      }

#footer {
      margin: 0 0 0 190px;
      padding: 10px;
      border: 5px solid #666;
      background: #ccc;
      width : 834px;
      height: 78px;
      /* ie5win fudge begins */
      voice-family: "\"}\"";
      voice-family:inherit;
      width : 804px;
      height: 48px;
      }

html>body #footer {
      width : 804px;
      height: 48px;
      /* ie5win fudge ends */
      }

</style>
</head>
<body>

<div id="menu">
Menu : 190 x 768
</div>

<div id="header">
Header : 834 x 150
</div>

<div id="content">
Content : 834 x 540
</div>

<div id="footer">
Footer : 834 x 78
</div>

</body>
</html>

1. The content obviously will be cutoff for smaller screens.
2. There are 5 pixel borders for all the areas - by adjusting or removing these, and then modifying the width and height values, you'll get an idea of how to work with the columns.

Thanks,
Sean
0
 

Author Comment

by:omom
ID: 10742007
thanks.
If i have a file menu.htm, how would i get it to appear in the menu part of the css?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10742177
I assume you're referring to reusing menu.htm in all the pages, yes?
That depends on your server and which lannguage it suuports.
You can use server-side includes for ASP/PHP, etc, or the FrontPage include component if you use that software.
0
 

Author Comment

by:omom
ID: 10742375
Yes, menu.htm in all pages.
I will be using PHP for other things like submitting a form, but is it necessary to use PHP to include menu.htm, or can it be done using only html?'
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10742420
No, not just with html - it must be a specific server language that dynamically includes that content on all the pages. HTML can't do this by itself :-)

Once you've decided the best way for you to do it, just ask a question in the appropriate Technical Area for advice on the best way to handle it, for example:

http://www.experts-exchange.com/Web/Web_Languages/PHP/
or
http://www.experts-exchange.com/Web/Web_Languages/ASP/

Thanks,
Sean
0
 

Author Comment

by:omom
ID: 10758493
I'm wondering if this CSS is not right.
The footer displays correctly but there are problems with the header and the menu.
i would expect to see the top left corner of the menu at (0,0), but it is not, the title is there. And I expect to see the body and the menu side by side, but the body is below the menu.  can you see any reason for this?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10758504
Do you have a link to a page I can see...
0
 

Author Comment

by:omom
ID: 10758582
no.  here's the page source
(i removed the display of the body to isolate the menu/header problem)

<html>
<head>

<title>My page title</title>
<style type="text/css" media="screen">@import "mycss.css";</style>

<script LANGUAGE="JavaScript">
<!--

// swap image
// img is part of the name of file left of the '.'
// on = 0 -> use original image
// on = 1 -> use 'over' image
// images must be named in format like:
// myImage.gif & myImageOver.gif
function swap(img,on)
{
 // document.write ('swap: img = ' + img + '  on = ' + on + '<br>');
  if (!document.images)
  {
    return; // not supported
  }
  document.images[img].src='images/' + img+((on)?'Over':'')+'.gif'
}

-->

</script>
</head>

<body>

<div class="header">
  <img src="images/logo.gif" width="233" height="44">
</div>

<div class="menu"  
><table border="0" width=100>
<tr>
      <td valign=top align=center>
      <table>

      <tr><td align=center>
      <img src="images/mylogo.gif" border="0"></a>

      </td></tr>

      <tr><td>
      <br> <!-- space between logo and the buttons -->
      </td></tr>

      <tr><td>
      <a href="html/main.html" target="main_frame"
      onMouseOver =" swap('homeBtn', 1)"
      onMouseOut ="  swap('homeBtn', 0)">
      <img src="images/homeBtn.gif" border="0" name="homeBtn">

      </a>
      </td></tr>

      <tr><td>
      <a href="html/description.html" target="main_frame"
      onMouseOver =" swap('whatIsItBtn', 1)"
      onMouseOut ="  swap('whatIsItBtn', 0)">
      <img src="images/whatIsItBtn.gif" border="0" name="whatIsItBtn">
      </a>
      </td></tr>

      <tr><td>

      <a href="html/download.html" target="main_frame"
      onMouseOver =" swap('downloadBtn', 1)"
      onMouseOut ="  swap('downloadBtn', 0)">
       <img src="images/downloadBtn.gif" border="0" alt="Download!" name="downloadBtn">
       </a>
       </td></tr>

       <tr><td>
      <a href="html/news.html" target="main_frame"
      onMouseOver =" swap('newsBtn', 1)"
      onMouseOut ="  swap('newsBtn', 0)">
      <img src="images/newsBtn.gif" border="0" name="newsBtn">
       </a>

       </td></tr>

       <tr><td>
      <a href="html/discussion.html" target="main_frame"
      onMouseOver =" swap('discussionBtn', 1)"
      onMouseOut ="  swap('discussionBtn', 0)">
      <img src="images/discussionBtn.gif" border="0" name="discussionBtn">
      </a>
      </td></tr>

      <tr><td>
      <a href="html/comments.html" target="main_frame"
      onMouseOver =" swap('commentsBtn', 1)"
      onMouseOut ="  swap('commentsBtn', 0)">

      <img src="images/commentsBtn.gif" border="0" name="commentsBtn">
      </a>
      </td></tr>

      <tr><td>
      <a href="html/publications.html" target="main_frame"
      onMouseOver =" swap('publicationsBtn', 1)"
      onMouseOut ="  swap('publicationsBtn', 0)">
      <img src="images/publicationsBtn.gif" border="0" name="publicationsBtn">
      </a>
      </td></tr>

      <tr><td>
      <a href="html/qa.html" target="main_frame"
      onMouseOver =" swap('qaBtn', 1)"
      onMouseOut ="  swap('qaBtn', 0)">
      <img src="images/qaBtn.gif" border="0" name="qaBtn">
      </a>
      </td></tr>

      <tr><td>
      <a href="html/links.html" target="main_frame"
      onMouseOver =" swap('linksBtn', 1)"
      onMouseOut ="  swap('linksBtn', 0)">
      <img src="images/linksBtn.gif" border="0" name="linksBtn">

      </a>
      </td></tr>

      <tr><td>
      <a href="html/demo1.html" target="main_frame"
      onMouseOver =" swap('demoBtn', 1)"
      onMouseOut ="  swap('demoBtn', 0)">
      <img src="images/demoBtn.gif" border="0" name="demoBtn">
      </a>
      </td></tr>

      </table>

      </td>
</tr>

</table>
 
</div>

<div id="footer">
  Contact us: FAX (505) 646-5889 |
<a href="mailto:myemail@myplace.edu"  size=-1 >
myemail@myplace.edu</a>
</div>

</body>

</html>

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10758870
Well that's just the html, which won't tell me too much.

1. Did you change the stylesheet code that I posted at all?

2. You must use this at the top of your page - before <html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:omom
ID: 10758919
i cut and pasted the code you gave into a .css file.  i changed nothing.
0
 

Author Comment

by:omom
ID: 10758964
file that uses the css file:

<html>
 <head>
 <title>MyPage</title>
 <style type="text/css" media="screen">@import "mycss.css";</style>
 </head>
 
 <body>
 
 <div class="header">
 <?php require('html/header.htm'); ?>
 </div>
 
 <div class="menu">
 <?php require('html/menu.htm'); ?>
 </div>
 

 <div id="footer">
 <?php require('html/footer.htm'); ?>
 </div>
 
 </body>
 </html>
 
header.htm and footer.htm are one line of code each, e.g.
<img src="images/mylogo2.gif" width="233" height="44">
and menu.htm is a table of buttons (an html 'snippet', not a full html file with <head> and <body> tags
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10759193
Are you using the doctyype?
0
 

Author Comment

by:omom
ID: 10761459
yes, originally i had it in the css file, but when i didn't see it show up in the page source, i moved it to the php file.  Now it shows up in the page source, but either way, the page still does not display correctly.

If you are certain that the problem is not in the css file, then please just say so and I'll look elsewhere (which i'm already doing)

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10761632
>>yes, originally i had it in the css file

Don't like the sound of that :-)

The doctype goes here, right before the html tag on the very first line of your document.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

...not in the css file.

If you had a link to your page that I could look at it would help, if possible...
0
 

Author Comment

by:omom
ID: 10762066
here is the problem code reduced to its essence.
i've name the css code you gave as csstest.css

index.htm ------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 <html>
<head>
<?php
    $pagetitle = "My page title";
?>

<title><?php echo $pagetitle ?></title>
<style type="text/css" media="screen">@import "csstest.css";</style>

</script>

</head>

<body>


<div class="header">
  <?php @ require_once ("header.htm"); ?>
</div>

<div class="menu"  
<?php @ require_once ("menu.htm"); ?>
</div>

<div id="footer">
  <?php @ require_once ("footer.htm"); ?>
</div>

</body>

</html>

header.htm --------------------------------
This is the header

footer.htm ---------------------------------
This is the footer

menu.htm -----------------------------------
<table border="0" width=100>
<tr>
      <td valign=top align=center>
      <table>

      <tr><td align=center>
       Button 1
      </td></tr>

      <tr><td>
       Button 2
      </td></tr>

      <tr><td>
       Button 3
      </td></tr>

      <tr><td>
       Button 4
       </td></tr>

      </table>
      </td>
</tr>

</table>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10764987
Okay - couple things...

1. If you use class="someclass", then the style must be .someclass  If you use id="someclass", then the style must be #someclass

so

class: use a dot
id: use a #

2. You need a content div for the main content area.

Here is the revised page, with the corrected code. I left the footer as # since that's how it's called in your code above...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 <html>
<head>
<title>Title</title>
<style type="text/css">

body    {
     margin:0;
     padding:0;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #000;
     background-color: #fff;
     }

.menu   {
     position: absolute;
     top: 0;
     left: 0;
     margin: 0;
     padding: 10px;
     border: 5px solid #666;
     background: #ccc;
     height: 768px;
     width: 190px;
     /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     height: 738px;
     width: 160px;
     }

html>body .menu {
     height: 738px;
     width: 160px;
     /* ie5win fudge ends */
     }


.header {
     margin: 0 0 0 190px;
     padding: 10px;
     border: 5px solid #666;
     background: #ccc;
     width:834px;
     height: 150px;
     /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width:804px;
     height: 120px;
     }

html>body .header {
     width:804px;
     height: 120px;
     /* ie5win fudge ends */
     }


.content {
     margin: 0 0 0 190px;
     padding: 10px;
     border: 5px solid #666;
     background: #ccc;
     width:834px;
     height: 540px;
     /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width : 804px;
     height: 510px;
     }

html>body .content {
     width : 804px;
     height: 510px;
     /* ie5win fudge ends */
     }

#footer {
     margin: 0 0 0 190px;
     padding: 10px;
     border: 5px solid #666;
     background: #ccc;
     width : 834px;
     height: 78px;
     /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width : 804px;
     height: 48px;
     }

html>body #footer {
     width : 804px;
     height: 48px;
     /* ie5win fudge ends */
     }


</style>

</script>
</head>

<body>

<div class="header">
This is the header
</div>

<div class="menu">
<table border="0" width=100>
  <tr>
    <td valign=top align=center>
    <table>
      <tr>
        <td align=center>Button 1</td>
      </tr>
      <tr>
        <td>Button 2</td>
      </tr>
      <tr>
        <td>Button 3</td>
      </tr>
      <tr>
        <td>Button 4</td>
      </tr>
    </table></td>
  </tr>
</table>
</div>

<div class="content">
This is the content
</div>

<div id="footer">
This is the footer
</div>

</body>
</html>
0
 

Author Comment

by:omom
ID: 10766721
thank you, very much
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10766733
You're very welcome :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now