Solved

CSS with header, footer, left column, body

Posted on 2004-04-01
18
618 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

867 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

12 Experts available now in Live!

Get 1:1 Help Now