Trouble with Fixed Header

Trying to get a header/footer to work proving more trouble than intend

Page 1 of 1

10 Replies - 4106 Views - Last Post: 04 September 2009 - 09:15 AM

#1 NubileDIYer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Trouble with Fixed Header

Post icon  Posted 02 September 2009 - 11:19 AM

Hi all, I am working on a site for musician Joe Cassady. I like the use of the fixed header (attached as a transparent PMG) that is currently in place on the old site, but not much else. The current site was created by him within the host, HostBaby, and, as you can tell, favors simplicity over proper coding etiquette (ala MySpace..). The header and footer work perfectly here, but as I work on a template for a completely revamped site, I find I am having trouble replicating this seemingly simple effect (note that the footer expands as content grows). Here's what I got so far:

HTML
<table align="center" width="910" border="0" cellpadding="0" cellspacing="0"><!--This table contains the banner and header-->
  <tr>
	<td align="center" valign="top"><img src="images/newmenu.jpg" width="800" height="100" border="0" usemap="#Map"></td><!--Banner-->
  </tr>  
  <tr>
  <td align="left" valign="bottom"><img src="images/header.png" width="404" height="126"></td> <!--Header-->
  </tr>
</table>

<table align="center" width="800" border="0" cellpadding="0" cellspacing="0"> <!--This table contains content, and should match up seemlessly with the corner of the header (in a perfect world)-->
  <tr> 
	<td width="404" align="center" valign="center"><img src="images/photos/band_onrocks.jpg" alt="band on rocks" width="404" height="603"></td>
	<td>Nevermind this junk</td>
  </tr>
  <tr>
	<td id="whitefont" align="center" valign="top"><a href="home.html">Home</a> | <a href="bio.html">Bio</a> | Media | <a href="shows.html">Calendar</a> | <a href="merchandise.html">Store</a> | Links | Contact </td>
	<td align="left" valign="top" bgcolor="#333333"><font size="1" face="Arial, Helvetica, sans-serif"><font color="#CCCCCC">All content copyright 2001-2009, Joe Cassady</font></font></td>
  </tr>
</table>



I have an inkling I need to fix the content table accordingly, but I'm not sure. I also am considering converting the tables to Divs, since the page I am basing this template on was created in 2006 and is a bit outdated. Any suggestions will receive big time snaps.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Trouble with Fixed Header

#2 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Trouble with Fixed Header

Posted 02 September 2009 - 12:16 PM

First off - your developing it all wrong - no offense. You should ditch the tables unless you have tabular data. You should be combining the layout with CSS which will aid in making it so that your header and footer can have backgrounds and give you complete positioning control.

Ex:

<div id="wrapper">
	  <div id="header"></div>
	  <div id="body"></div>
	  <div id="footer"></div>
</div>



CSS for above layout:

#wrapper {
	width: 800px;}

#header {
	  background: url(crazyGraphic.png) top left no-repeat;}

#body {
	   padding: 10px;}

#footer {
	   background: url(crazyGraphic2.png) bottom right no-repeat;}



Obviously there is a lot more work to do - but if you have any more questions - let us know.

--

Greg
Was This Post Helpful? 1
  • +
  • -

#3 NubileDIYer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: Trouble with Fixed Header

Posted 02 September 2009 - 12:34 PM

Update: I have the vertical alignment I was looking for using CSS:
#divcontent {
	position: absolute;
	top: 185px;
	left: 10%;	
}



I am designing for 1024x768, and it works (more or less) at this res, but I can't get it right for my res (1280x1024). I know that 10% left positioning is causing me trouble, but my brain isn't working too well right now, and I can't recall how to remedy this situation..

Updated HTML:

<body bgcolor="000000">
<div>
<table position="fixed" align="center" width="910" height="226" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td align="center" valign="top"><img src="images/newmenu.jpg" width="800" height="100" border="0" usemap="#Map"></td><!--Menu-->
  </tr>
  
  <tr>
  <td align="left" valign="top"><img src="images/header.png" width="404" height="126"></td> <!--this is the header-->
  </tr>
</table>
</div>

<map name="Map">
  <area shape="rect" coords="253,23,330,47" href="home.html" target="Content">
  <area shape="rect" coords="357,23,405,47" href="bio.html" target="Content">
  <area shape="rect" coords="434,23,520,47" href="shows.html" target="Content">
  <area shape="rect" coords="550,23,646,48" href="lyrics.html" target="Content">
  <area shape="rect" coords="675,23,773,47" href="photos.html" target="Content">
  <area shape="rect" coords="252,54,415,79" href="merchandise.html" target="Content">
  <area shape="rect" coords="441,55,589,81" href="#" onclick="MM_openBrWindow('http://www.purevolume.com/joecassadyandthewestendsound','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
  <area shape="rect" coords="617,58,725,80" href="#" onclick="MM_openBrWindow('http://www.myspace.com/joecassady','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
</map>

<div id="divcontent" width="800">
<table align="center" border="0" cellpadding="0" cellspacing="0">
  <tr> 
	<td width="404" align="center" valign="center"><img src="images/photos/band_onrocks.jpg" alt="band on rocks" width="404" height="603"></td>
	<td width="361" align="left" valign="top" bgcolor="#CCCCCC">
	  <strong>Joe Cassady</strong> - Vocals &amp; Rhythm Guitar<br>
	  <a href="http://www.shunakamura.com"><strong>Shu Nakamura</strong> - Lead Guitar </a><br>
	  <strong>Aaron Gardner</strong> - Bass<br>
	  <strong>Robert Bonhomme</strong> - Drums<br>
	  <strong>Melissa Masser</strong> - Backing Vocals
		<p><strong>FOR BOOKING INFORMATION:</strong></p>
	  <p>Please contact Joe Cassady<br>
		<a href="mailto:[email protected]">[email protected]</a><br>
		or Melissa<br>
		<a href="mailto:[email protected]">[email protected]</a><br>
		<br>
		<strong>BY MAIL:</strong><br>
		<br>
		Joe Cassady<br>
		C/O: Avenue A Records<br>
		P.O. Box 51<br>
		High Bridge, NJ<br>
	08829</p></td>
  </tr>
  <tr>
	<td id="whitefont" align="center" valign="top"><a href="home.html">Home</a> | <a href="bio.html">Bio</a> | Media | <a href="shows.html">Calendar</a> | <a href="merchandise.html">Store</a> | Links | Contact </td>
	<td align="left" valign="top" bgcolor="#333333"><font size="1" face="Arial, Helvetica, sans-serif"><font color="#CCCCCC">All content copyright &copy;2001-2009, Joe Cassady</font></font></td>
  </tr>
</table>
</div>



Thanks in advance!
Was This Post Helpful? 0
  • +
  • -

#4 NubileDIYer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: Trouble with Fixed Header

Posted 02 September 2009 - 01:57 PM

View Postgregwhitworth, on 2 Sep, 2009 - 11:16 AM, said:

First off - your developing it all wrong - no offense. You should ditch the tables unless you have tabular data. You should be combining the layout with CSS which will aid in making it so that your header and footer can have backgrounds and give you complete positioning control.


Greg, No offense taken! I signed up here because I can bumble through code at a snail's pace, but would love to learn more than the cursory knowledge I obtained in college.

Thanks for your help so far, I agree that tables are not the best choice, but when I am unsure, I revert back to simpler forms. Here's what I've adopted from your suggestions:
<body>
<div align="center" id="wrapper">
	  <div id="menu"><img src="images/newmenu.jpg" border="0" usemap="#Map"></div>
	  <div id="header">Header </div>
	  <div id="body">
		  <table>
		<tr>
		<td>
			<div id="contentleft"><img src="images/photos/band_onrocks.jpg" alt="band on rocks"></div>
		</td>
		
		<td>
			<div id="contentright"><h3>More Dummy Text</h3></div>
		</td>
		<tr>
		<td><div id="sitemap">
		  <h3><a href="home.html">Home</a> | <a href="bio.html">Bio</a> | Media | <a href="shows.html">Calendar</a> <br> <a href="merchandise.html">Store</a> | Links | Contact </h3>

		</div></td>
		
		<td><div id="copyright"><h3>All content copyright &copy;2001-2009, Joe Cassady </h3>
		</div></td>
		</tr>
		</table>
  </div>
	 <div id="footer">fg</div>
</div>
<map name="Map">
  <area shape="rect" coords="253,23,330,47" href="home.html" target="Content">
  <area shape="rect" coords="357,23,405,47" href="bio.html" target="Content">
  <area shape="rect" coords="434,23,520,47" href="shows.html" target="Content">
  <area shape="rect" coords="550,23,646,48" href="lyrics.html" target="Content">
  <area shape="rect" coords="675,23,773,47" href="photos.html" target="Content">
  <area shape="rect" coords="252,54,415,79" href="merchandise.html" target="Content">
  <area shape="rect" coords="441,55,589,81" href="#" onclick="MM_openBrWindow('http://www.purevolume.com/joecassadyandthewestendsound','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">

  <area shape="rect" coords="617,58,725,80" href="#" onclick="MM_openBrWindow('http://www.myspace.com/joecassady','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
</map>
</body>



I know, that doesn't completely remove the table, but I think it organizes it a little better. And my CSS:
#wrapper {
	width: 810px;
}

#menu {
	background-image: url(images/newmenu.jpg);
	height: 100px;
	width: 805px;
}

#header {
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	float: left;
	width: 404px;
	height: 126px;
	
}

#body {
	top: 185px;
	position: absolute;
	
}
	   
#contentleft {
	width: 405px;
	height: 606;
	float: left;
}

#contentright {
	width: 395px;
	float: right;
	text-align: center;
	vertical-align: top;
}

#footer {
	   background: url(images/footer.png);
	   vertical-align: bottom;
	   float: right; 
	   background-repeat: no-repeat;
	   width: 404px;
	   height: 126px;	   
}
	   

#blackfont {
	font-size: 10pt;
	face: Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
}
#divcontent {
	position: absolute;
	top: 185px;
	left: 10%;	
}
h3 {
	color: #FFFFFF;
	font-size: 10pt;
	font-variant: small-caps;
	text-transform: uppercase;
}


Now I got the header in position, but can't nudge the body div into position. And now, the footer appears next to the header. My guess is I have contradictory styles counteracting each other, but I can't start to guess where.

Positioning has always confused me for some reason, even if you could only point me to a good tut, I would appreciate it.
Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Trouble with Fixed Header

Posted 03 September 2009 - 08:13 AM

Would you be willing to upload a test version, as I rebuilt your page and I can't see what you have going on since so much of your site is relying on graphics.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#6 NubileDIYer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: Trouble with Fixed Header

Posted 03 September 2009 - 08:40 AM

Sure! I tweaked it a bit more, and really I'm only crawling along via trial-and-error, so please bear with me.

Joe Cassady

I hope that link works, I've never used Apple's hosting directly off my computer before. Only pay attention to the index2.html page, as once I have that working, I will make it a template and base all other pages off it. As you can see, the index2 page creates the frameset, based off menu.html and home.html (Not sure I used that terminology correctly..) Don't worry about the style, I'm still working with Joe to see what he likes best.
Was This Post Helpful? 0
  • +
  • -

#7 W3bDev   User is offline

  • D.I.C Regular
  • member icon

Reputation: 42
  • View blog
  • Posts: 379
  • Joined: 15-March 09

Re: Trouble with Fixed Header

Posted 03 September 2009 - 01:55 PM

Reply to this thread, there is an attachment option for you, upload your html file so it can be tweaked, your webserver is not working.
Was This Post Helpful? 0
  • +
  • -

#8 NubileDIYer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: Trouble with Fixed Header

Posted 03 September 2009 - 02:33 PM

Yeah I had a feeling that wouldn't work. Attached are the index and CSS, as well as header and footer. Any other graphics are unimportant.

Appreciate it,
Chris

Attached image(s)

  • Attached Image
  • Attached Image

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#9 W3bDev   User is offline

  • D.I.C Regular
  • member icon

Reputation: 42
  • View blog
  • Posts: 379
  • Joined: 15-March 09

Re: Trouble with Fixed Header

Posted 04 September 2009 - 06:48 AM

View PostNubileDIYer, on 3 Sep, 2009 - 01:33 PM, said:

Yeah I had a feeling that wouldn't work. Attached are the index and CSS, as well as header and footer. Any other graphics are unimportant.

Appreciate it,
Chris



The page included is a frameset, and doesn't have the html code for your actual pages, just the placeholders for the menu.html and home.html pages. I highly recommend not using frames, this is no longer practical, and a very bad implementation. You will need to include the menu.html and home.html for this to be re factored.
Was This Post Helpful? 0
  • +
  • -

#10 NubileDIYer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 11-August 09

Re: Trouble with Fixed Header

Posted 04 September 2009 - 09:08 AM

Thanks for the advice. I'm updating a site they paid way too much for in 2006, and the more I get into it, the more I want to just scrap it and completely revamp it. If no frameset, what would you recommend to keep the menu locked in place and the content scrollable?

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#11 W3bDev   User is offline

  • D.I.C Regular
  • member icon

Reputation: 42
  • View blog
  • Posts: 379
  • Joined: 15-March 09

Re: Trouble with Fixed Header

Posted 04 September 2009 - 09:15 AM

View PostNubileDIYer, on 4 Sep, 2009 - 08:08 AM, said:

Thanks for the advice. I'm updating a site they paid way too much for in 2006, and the more I get into it, the more I want to just scrap it and completely revamp it. If no frameset, what would you recommend to keep the menu locked in place and the content scrollable?


Yes, truthfully, it needs to be fully recoded. As I looked into the code, it's using very ancient coding even for 2006. If you want content scrollable, set a fixed position for the top menu, and the z-index to something higher than 1, and you should be good for the content to scroll.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1