Jump to content

Need help with header/footer structure

jaidanwolf

By jaidanwolf
in CSS

Recommended Posts

jaidanwolf Newbie

jaidanwolf

Posted
Posted

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.shtmlPage 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">  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.   <a href="about.shtml">Read More</a></p></body></html>

The CSS 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;}

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Hello Jaidanwolf,I see you're starting the website project and honestly I see too many things in your HTML and CSS codes to start taking it apart and figure out what's going on; trying to understand someone else's code when there's already too much to go through is just too time consuming.However, for what I saw from your HTML and CSS codes I think you are better off starting from scratch with correct and very clean codes.If you want to do this, which I strongly suggest you do, you can use this template and modify it to your needs, believe me, you'll be so relieved when starting with clean code. Besides, you'll learn more.Here's the link: http://www.tjkdesign.com/articles/liquid/4.aspHope this helps.Let us know,

Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted

Hi Ricardo, thanks so much but I'm really happy with the layout as it is now. The only thing giving me trouble is the header/footer situation, and I can't imagine that starting over with another template would help me much since I would need to add in most of the same code both to the main page and stylesheet anyway.If it helps, I cleaned up both sets of codes above and edited my initial post with them. Should be much easier to make sense of now :*)

Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted
Did you change the site?
Sorry, I think I've missed something...what are you referring to?And thanks for the link...I just followed it and had a glance and there are a few hundred "errors" in there. I'm not even sure where to begin or how to fix them...web design isn't really my forte, I just needed to get this site together for my own project, but unfortunately my knowledge is very limited :)
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
If it helps, I cleaned up both sets of codes above and edited my initial post with them.
I meant did you change the actual site's code to the cleaned version, but I think you were saying that you deleted the irrelevant bits so don't worry.
And thanks for the link...I just followed it and had a glance and there are a few hundred "errors" in there.
Invalid markup can confuse browsers. I see you got rid of all but 15 though, so good work! :)Your break tags need to be in lowercase with a / at the end, i.e. <br />Ampersands need to be encoded as &All the other errors are consequential, so that should fix everything in terms of validation.Hmm... may I suggest rethinking the position:fixed; approach? It seems sort of confusing, and you can achieve similar things with relatively positioned elements and overflow:auto;
Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted

Hey, thanks so much for the recommendations! Heh...I'm really not meant to be a web designer, this is just a one-time thing I really wanted to put together...I guess it's quite obvious! At any rate, now it's only giving me eight errors when I try to validate, which is good. But I'm not exactly sure how to fix them (again). Could you possibly have a look and let me know? I'd really appreciate it :*)Thanks to someone's help last night, I sorted out the issues I was having at the beginning of this thread (header/footer frustrations). That's all fixed now. If I can just get those 8 errors out of the way, I should be good to go. Updated Page: http://www.tigersjunkyard.com/xilon/main.shtmlI'd also love any help you can offer in the way of cleaning up the code overall, if you think it should be done. Some people were saying to not use the "strict xhtml" but I'm not sure exactly how to change that, or what to change it to.My Stylesheet: http://www.tigersjunkyard.com/xilon/xilon.cssThanks again!

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Your title "The Xilon Project" looks off in Firefox. And your navigation bar looks hidden in Ffox too and in IE6/7.Also, your header and footer work as 'fixed' in Firefox but not in IE6/7.I'm not sure this is what you want but wanted to let you know.There's an image tag that needs to end with a />: ... trans/welcome.jpg" alt="welcome" />And probably the ID #wrapper is not closed.Let us know how it goes.

Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted

Hi Ricardo, you were right, it seems that the wrapper wasn't closed. I've fixed that, as well as the image tag, and have reuploaded the page. Can you let me know how it works for you? On both my laptop and desktop, the whole layout looks fine both in IE7 and Firefox now...does anything still seem off to you?

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

As I said:

Your title "The Xilon Project" looks off in Firefox. And your navigation bar looks hidden in Ffox too and in IE6/7.Also, your header and footer work as 'fixed' in Firefox but not in IE6/7.

You need to test in the following browsers yourself:

  • Firefox
  • IE6 and 7
  • Opera
  • Safari

Go download them :) Yes, it validates now, good :)

Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted

Like I said, it's working in IE7 and Firefox now, and validating, so I think I'm set :*)Thanks again, everyone! I have some sprucing questions but I'll post in a new thread as they're very different issues...I really appreciate everyone's time here!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...