I have 2 problems with my layout (please ignore the colors, they're bad but I used them for identification.)
1. In IE there's a small horizontal gap between logo and header.
2. I want the footer to appear at the bottom of the page, but if there is more material in the menu, the footer will appear to the right of it, directly below content. I would like the background color for content to extend down as far as menu, and then have the footer appear below both of them.
Something like this:
[tt]
------------------
|logo| header |
------------------
|menu| content |
|menu| |
|menu| |
|menu| |
|menu| |
------------------
| footer |
------------------
[/tt]
And here's the code:
-kaht
...looks like you don't have a job, so why don't you get out there and feed Tina.
![[rockband]](/data/assets/smilies/rockband.gif "[rockband] [rockband]")
1. In IE there's a small horizontal gap between logo and header.
2. I want the footer to appear at the bottom of the page, but if there is more material in the menu, the footer will appear to the right of it, directly below content. I would like the background color for content to extend down as far as menu, and then have the footer appear below both of them.
Something like this:
[tt]
------------------
|logo| header |
------------------
|menu| content |
|menu| |
|menu| |
|menu| |
|menu| |
------------------
| footer |
------------------
[/tt]
And here's the code:
Code:
<%@ LANGUAGE="JavaScript" %>
<!-- Include file for JScript ADO Constants -->
<!--#include File="test.inc"-->
<html>
<head>
<title>CCAP Login</title>
<script type="text/javascript" language="javascript">
</script>
<style type="text/css">
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
}
#logo {
width:200px;
height:100px;
margin:0px;
padding:0px;
float:left;
background-color:#ffff00;
overflow:hidden;
}
#header {
height:100px;
margin:0px;
margin:0px 0px 0px 200px;
background-color:#ffff00;
}
#menu {
width:200px;
margin:0px;
padding:0px;
float:left;
background-color:#aaaaaa;
}
#content {
margin:0px 0px 0px 200px;
padding:0px;
background-color:#cccccc;
}
#footer {
margin:0px;
padding:0px;
background-color:#ff0000;
text-align:center;
}
.loginButtons {
border:solid 1px #000000;
width:100px;
font-size:8pt;
}
</style>
</head>
<body>
<div id="headercontainer">
<div id="logo">
<img src="ccaplogo.jpg" style="border:0px; padding:0px; margin:0px" alt="This is the logo">
</div>
<div id="header">
Here's the header information
</div>
</div>
<div id="contentcontainer">
<div id="menu">
<form name="loginfrm" style="font-size:8pt; padding:2px">
<input type="text" name="loginid" class="loginButtons"> User ID<br>
<input type="password" name="pwd" class="loginButtons"> Password<br>
<input type="submit" value="Login">
</form>
</div>
<div id="content">
Here's the body info.
</div>
</div>
<div id="footer">
This is the footer.
</div>
</body>
</html>-kaht
...looks like you don't have a job, so why don't you get out there and feed Tina.