CSS Forum

**jaidanwolf** · 06-16-2008, 11:11 PM

Hi guys, I put this site together for a personal project I've got in progress and am having some issues with the header and footer.

My resolution is 1280 x 800, and when my browser is full screen, the page looks perfect.

However, if I make the browser window smaller, two problematic things happen...one, the header squishes to accomodate the smaller window and overlaps the main content. Two, the footer text gets cut off on both ends and also overlaps the main body scrollbar.

If I view the page on a larger screen, there is a black space between the header/footer and the content scrollbar.

So my question is, is there a way to set a fixed size for the page, so that it stays the same no matter what sized window it's being viewed in (ie. if the browser window is small, then there would be a standard horizontal scrollbar on the bottom as opposed to the page resizing)? I'd basically just like to have the header and footer exactly lined up with the edge of the main content scrollbar at all times, regardless of screen resolution/browser window size.

Everything but the header and footer seems fine. If anyone can help me fix this issue, I'd really, really appreciate it.

The page: http://www.tigersjunkyard.com/xilon/main.shtml

Page code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Xilon Project</title>
<link rel="stylesheet" href="xilon.css" type="text/css" />
</head>
 
<body>
<div id="head">
<div id="pad1"></div>
The Xilon Project</div>
 
<div id="foot">
<div id="pad3"></div>
<br>
Do not use anything from this site without the express permission of the owners.<BR>
All conceptual elements belong to and are copyright to Reese Nanavati. All artwork belongs to and is copyright to the individual 
artists.</div>
<div id="left">
<div class="pad2"></div>
<!--#include virtual="menu.inc"--></div>
<div id="content">
<div class="pad2"></div>
<BR>
<h2 class="title">&nbsp; Welcome to the Aeradisphere</h2>
<p>This is a collaborative online exhibition that displays artwork depicting a fictional region of the universe called the Xilon 
System. The images here were created by a range of artists, based on detailed descriptions of this imaginative corner of the 
sky. &nbsp;&nbsp;<a href="about.shtml">Read More</a></p>
</body>
</html>

The CSS code

Code:

/* BASIC INFO */
html {
height:100%; 
max-height:100%;  
padding:0; 
margin:0; 
border:0; 
font-size:76%; 
font-family: Georgia 
background:#fff url(.jpg) -18px 0 no-repeat; 
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ }
 
/* GENERAL LAYOUT */
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:165px; position:relative; z-index:3; background: #000000; color: #ffffff;}
#head {position:fixed; margin:0; top:0; right:13px; display:block; width:100%; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;}
#foot {position:fixed; margin:0; bottom:0px; right:12px; left:85px; display:block; width:92.3%; height:50px; background: #660000; color:#ffffff; text-align:center; font-size:10; z-index:4; font-family: verdana;}
 
/* TITLES */
h1, h2, h3 {
 font-weight: normal;
 color: CBA61A;
}
h1 {
 letter-spacing: -2px;
 font-size: 3em;
}
h2 {
 letter-spacing: -1px;
 font-size: 2em;
 color: #CBA61A;
}
h3 {
 font-size: 1em;
}
p, ul, ol {
 line-height: 150%;
}
.title {
 margin: 0;
 border-bottom: 2px solid #0F0F0F;
}
body {
 margin: 0;
 padding: 0;
 background: #000000;
 font-size: 13px;
 color: #ffffff
}
body, th, td, input, textarea, select, option {
 font-family: Georgia;
}
 
/* LINKS WITHIN BODY */
a {text-decoration: none; color: #3AA0B9;}
a:visited {text-decoration: none; color: #3AA0B9;}
a:active {text-decoration: none; color: #3AA0B9;}
a:hover {text-decoration: overline underline; color: #660000;}
  p.link a:hover {background-color: #2B2E21;color:#fff;}
  p.link a:link span{display: none;}
  p.link a:visited span{display: none;}
  p.link a:hover span {
  position: absolute;
  margin:15px 0px 0px 20px;
  background-color: #ffffff;
  max-width:300;
  padding: 2px 10px 2px 10px;
  border: 5px solid #660000;
  font: normal 16px verdana;
  color: #000000;
  text-align:left;
  display: block;}
 
/* IMAGE GALLERY STRUCTURE AND HOVER CODES */
div.img
{
  margin: 0px;
  border: 1px solid #3AA0B9;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
} 
div.img img
{
  display: inline;
  margin: 0px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #660000;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 0px;
}
img.floatLeft { 
 float: left; 
 margin: 4px; 
}
img.floatRight { 
 float: right; 
 margin: 4px; 
}
 
/* POSITION */
#left {position:fixed; left:0; top:0; height:100%; width:150px; background:url(images/stars.gif) #aaa; background-position:0 100px;; font-size:1em; color:#fff;z-index:4;}
* html #head, * html #foot,* html #left {position:absolute;}
#pad1 {display:block; width:175px; height:100px; float:left;}
#pad3 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:100px; color: #ffffff;}
#content p {padding:5px;}
 
/* SIDE MENU */
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:right; height:360px; background:url(images/stars.gif) #000000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000000 url(slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#000000 url(slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#ffffff; font-family:Arial; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#000000;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #660000;}
#menu :hover ul li, #menu :hover ul li a {background:#000000; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#660000; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#000000;}
#menu :hover ul :hover ul :hover ul li {background:#660000; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #000000  url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#660000; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#000000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#000000;}
#menu :hover ul :hover ul :hover ul :hover {background:#660000; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

**wayfarer07** · 06-16-2008, 11:51 PM

Your layout doesn't seem to be working at smaller window widths either. I think the easiest answer for you is to have a fixed-width wrapper instead of a full page liquid layout.

**jaidanwolf** · 06-17-2008, 12:07 AM

Quote:

Originally Posted by wayfarer07

Your layout doesn't seem to be working at smaller window widths either. I think the easiest answer for you is to have a fixed-width wrapper instead of a full page liquid layout.

Hey...yeah, like I said, the main problem is at smaller window widths. The larger widths are just a bit annoying and ugly because the edges of the header and footer don't line up properly with the edge of the scrollbar. But the smaller windows are where the real problems arise, since it squishes the header text onto separate lines and cuts off the footer.

Could you possibly tell me how to set up a fixed-width wrapper (ie. any necessary codes, exactly where in the page they go, and what to remove or alter in the stylesheet)? I can't tell you how much I'd appreciate it!

**Arenlor** · 06-17-2008, 12:39 AM

You don't need a fixed width wrapper. You do need a wrapper though. The problem you're seeing though is from position:fixed; which you have on your header, footer, and left side. Wrappers work like so:

HTML Code:

<div id="wrapper"><div id="header"><p>I'm the header, yay! I'm so happy!</p></div><div id="container"><div id="left"><ul><li><a href="link1.html">Links go here</li></ul></div><div id="main"><p>I'm the main content!</p></div><div id="footer"><p>I'm the footer, I go at the bottom.</p></div></div></div>

Code:

/* CSS 2.1 */
html,body {height:100%;}
div#wrapper {height:100%;}
div#header {height:100px;}
div#container {height:100%;}
div#left {float:left;height:100%;}
div#main {}
div#footer {height:100px;position:absolute;bottom:0px;}

**jaidanwolf** · 01:19 AM

Quote:

Originally Posted by Arenlor

You don't need a fixed width wrapper. You do need a wrapper though. The problem you're seeing though is from position:fixed; which you have on your header, footer, and left side.

Hi Arlenor, thanks for taking the time to respond! I tried adding in the codes you suggested but it seemed to cause a lot of problems, everything on the page just sort of shifted and some things, like the header and footer, disappeared

Perhaps I was doing it wrong, though. Or it might be clashing with other codes already in there. Looking at the page code and css I included in my initial post, do you think you'd be able to tell me how to use the wrapper specifically with my layout? And aside from the "/* CSS 2.1 */" code you gave, what exactly needs to be added to, removed from or altered in the stylesheet? I think that's where I'm running into trouble...

Thanks again, I really appreciate your help!

**Arenlor** · 06-17-2008, 07:07 AM

Don't use overflow: hidden; with your html and body tags for starters. But can I see your updated CSS?

**jaidanwolf** · 10:50 AM

Actually, the problem is now solved!

Updated page: www.tigersjunkyard.com/xilon/main.shtml

Updated CSS: www.tigersjunkyard.com/xilon/xilon.css

Thanks for your input, guys! I'm still getting 8 minor validation errors, but I think someone is helping me with that so hopefully those will be sorted out soon too.

**Arenlor** · 06-17-2008, 12:57 PM

Hrmm I think I'll suggest LadnRed to take a look at your CSS and see what she thinks of it.

**wayfarer07** · 06-17-2008, 01:13 PM

May I ask why you are using Conditional Comments to send tables to IE6 and below throughout your code? That seems rather inefficient and time consuming to me...

**LadynRed** · 06-17-2008, 03:34 PM

Abel, that's how one of the menu authors makes those menus work, I've seen it before and it's why I won't use it.

To the OP - horizontal scrolling is BAD. My screen is 1280x1024 and I have to scroll sideways on your site. I hate it, as do most people. I would not stick around to even look at what you've got because of it.

A couple of other things:
- you have display:block on most of your divs. Totally unnecessary since a div IS a block-level element.
- position:fixed is NOT supported by IE6 and it IS one of the reasons your layout isn't working as you wanted it to.
-all that positioning just isn't necessary