We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS with header, footer, left column, body

omom
omom asked
on
Medium Priority
688 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
Comment
Watch Question

Top Expert 2004
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
thanks.
If i have a file menu.htm, how would i get it to appear in the menu part of the css?
Top Expert 2004

Commented:
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.

Author

Commented:
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?'
Top Expert 2004

Commented:
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:

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

Thanks,
Sean

Author

Commented:
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?
Top Expert 2004

Commented:
Do you have a link to a page I can see...

Author

Commented:
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>

Top Expert 2004

Commented:
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">

Author

Commented:
i cut and pasted the code you gave into a .css file.  i changed nothing.

Author

Commented:
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
Top Expert 2004

Commented:
Are you using the doctyype?

Author

Commented:
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)

Top Expert 2004

Commented:
>>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...

Author

Commented:
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>
Top Expert 2004

Commented:
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>

Author

Commented:
thank you, very much
Top Expert 2004

Commented:
You're very welcome :-)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.