User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 429,749 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,030 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 717 | Replies: 2 | Solved
Reply
•
•
Join Date: Jun 2008
Posts: 1
Reputation: jaidanwolf is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
jaidanwolf jaidanwolf is offline Offline
Newbie Poster

Problem with page width and header/footer overlap

  #1  
Jun 16th, 2008
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:
Help with Code Tags 
<!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
Help with Code Tags 
/* 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;}
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jun 2007
Posts: 181
Reputation: macneato is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 13
macneato's Avatar
macneato macneato is offline Offline
Junior Poster

Re: Problem with page width and header/footer overlap

  #2  
Jun 17th, 2008
Hi Wolf,

What your main issue is, that when designing, you went for a liquid layout.

What i would suggest. Add a container and set the width. You would probably have to re-work a few css classes and graphics. But it will do the trick.

Regards
Last edited by macneato : Jun 17th, 2008 at 6:00 am. Reason: typo - as usual
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote  
•
•
Join Date: May 2008
Location: Hyderabad, India
Posts: 261
Reputation: sreein1986 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 30
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz in Training

Re: Problem with page width and header/footer overlap

  #3  
Jun 17th, 2008
Hi,

First you didn't give align for div tags. so, pls give alignment and mention div tag size after then check
Thanx,
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

Other Threads in the HTML and CSS Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 3:15 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC