?
Solved

CSS with header, footer, left column, body

Posted on 2004-04-01
18
Medium Priority
?
653 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 9
18 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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
 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month8 days, 20 hours left to enroll

765 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