I Need Help With My Header!

mkswanson · May 13, 2009

I've been fighting for a while with trying to get me header to display correctly, and I just can't seem to get it! I don't know what I am doing incorrectly.

I would like my store centered, and I would like the header to tie in with the rest of the site. I have tried to accomplish this with manual coding as well as using the contributions that center the store, and I just can't get my header to look right.

I am getting desparate, and starting to feel incredibly dumb. Any assistance would be greatly appreciated. I am willing to pay for the assistance if necessary, but I don't think this should be very difficult.

I am trying to include the following header code (this is taken from an html version of the header that I want to add, so I know this code has additional code that isn't required), and I want the store to be restricted in width so that my header doesn't get stretched out.

<html>
<head>
<!-- ImageReady Preload Script (header.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
	rslt = new Image();
	rslt.src = arg;
	return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
	for (var i=0; i<changeImages.arguments.length; i+=2) {
		document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
	}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
	Home_over = newImage("images/Home-over.jpg");
	Who_We_Are_over = newImage("images/Who-We-Are-over.jpg");
	Our_Herd_over = newImage("images/Our-Herd-over.jpg");
	Our_Products_over = newImage("images/Our-Products-over.jpg");
	Contacts_over = newImage("images/Contacts-over.jpg");
	My_Cart_over = newImage("images/My-Cart-over.jpg");
	Checkout_over = newImage("images/Checkout-over.jpg");
	My_Account_over = newImage("images/My-Account-over.jpg");
	preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
background-color: #555957;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<div align="center">
 <!-- ImageReady Slices (header.psd) -->
 <table id="Table_01" width="775" height="235" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td colspan="3">
       <img src="images/header_01.jpg" width="226" height="163" alt=""></td>
    <td colspan="3">
	    <img src="images/header_02.jpg" width="182" height="163" alt=""></td>
    <td colspan="7">
	    <img src="images/header_03.jpg" width="367" height="163" alt=""></td>
  </tr>
   <tr>
     <td>
       <a href="/home.htm"
			onmouseover="changeImages('Home', 'images/Home-over.jpg'); return true;"
			onmouseout="changeImages('Home', 'images/Home.jpg'); return true;"
			onmousedown="changeImages('Home', 'images/Home-over.jpg'); return true;"
			onmouseup="changeImages('Home', 'images/Home-over.jpg'); return true;">
         <img name="Home" src="images/Home.jpg" width="82" height="33" border="0" alt="Home"></a></td>
    <td>
	    <img src="images/header_05.jpg" width="65" height="33" alt=""></td>
    <td colspan="2">
	    <a href="/about-us.htm"
			onmouseover="changeImages('Who_We_Are', 'images/Who-We-Are-over.jpg'); return true;"
			onmouseout="changeImages('Who_We_Are', 'images/Who-We-Are.jpg'); return true;"
			onmousedown="changeImages('Who_We_Are', 'images/Who-We-Are-over.jpg'); return true;"
			onmouseup="changeImages('Who_We_Are', 'images/Who-We-Are-over.jpg'); return true;">
	      <img name="Who_We_Are" src="images/Who-We-Are.jpg" width="123" height="33" border="0" alt="Who We Are"></a></td>
    <td>
	    <img src="images/header_07.jpg" width="54" height="33" alt=""></td>
    <td colspan="2">
	    <a href="http://alpacanation.com/farmsandbreeders/03_viewfarm.asp?name=17162" target="_blank"
			onmouseover="changeImages('Our_Herd', 'images/Our-Herd-over.jpg'); return true;"
			onmouseout="changeImages('Our_Herd', 'images/Our-Herd.jpg'); return true;"
			onmousedown="changeImages('Our_Herd', 'images/Our-Herd-over.jpg'); return true;"
			onmouseup="changeImages('Our_Herd', 'images/Our-Herd-over.jpg'); return true;">
	      <img name="Our_Herd" src="images/Our-Herd.jpg" width="105" height="33" border="0" alt="Our Herd"></a></td>
    <td>
	    <img src="images/header_09.jpg" width="54" height="33" alt=""></td>
    <td colspan="2">
	    <a href="/shop/index.php"
			onmouseover="changeImages('Our_Products', 'images/Our-Products-over.jpg'); return true;"
			onmouseout="changeImages('Our_Products', 'images/Our-Products.jpg'); return true;"
			onmousedown="changeImages('Our_Products', 'images/Our-Products-over.jpg'); return true;"
			onmouseup="changeImages('Our_Products', 'images/Our-Products-over.jpg'); return true;">
	      <img name="Our_Products" src="images/Our-Products.jpg" width="140" height="33" border="0" alt="Our Products"></a></td>
    <td>
	    <img src="images/header_11.jpg" width="44" height="33" alt=""></td>
    <td colspan="2">
	    <a href="/contact-us.htm"
			onmouseover="changeImages('Contacts', 'images/Contacts-over.jpg'); return true;"
			onmouseout="changeImages('Contacts', 'images/Contacts.jpg'); return true;"
			onmousedown="changeImages('Contacts', 'images/Contacts-over.jpg'); return true;"
			onmouseup="changeImages('Contacts', 'images/Contacts-over.jpg'); return true;">
	      <img name="Contacts" src="images/Contacts.jpg" width="108" height="33" border="0" alt="Contacts"></a></td>
  </tr>
   <tr>
     <td colspan="6" rowspan="2">
       <img src="images/header_13.jpg" width="408" height="38" alt=""></td>
    <td colspan="3">
	    <img src="images/header_14.jpg" width="119" height="2" alt=""></td>
    <td rowspan="2">
	    <a href="/shop/shopping_cart.php"
			onmouseover="changeImages('My_Cart', 'images/My-Cart-over.jpg'); return true;"
			onmouseout="changeImages('My_Cart', 'images/My-Cart.jpg'); return true;"
			onmousedown="changeImages('My_Cart', 'images/My-Cart-over.jpg'); return true;"
			onmouseup="changeImages('My_Cart', 'images/My-Cart-over.jpg'); return true;">
	      <img name="My_Cart" src="images/My-Cart.jpg" width="96" height="38" border="0" alt="My Cart"></a></td>
    <td colspan="2" rowspan="2">
	    <a href="/shop/checkout_shipping.php"
			onmouseover="changeImages('Checkout', 'images/Checkout-over.jpg'); return true;"
			onmouseout="changeImages('Checkout', 'images/Checkout.jpg'); return true;"
			onmousedown="changeImages('Checkout', 'images/Checkout-over.jpg'); return true;"
			onmouseup="changeImages('Checkout', 'images/Checkout-over.jpg'); return true;">
	      <img name="Checkout" src="images/Checkout.jpg" width="103" height="38" border="0" alt="Checkout"></a></td>
    <td rowspan="2">
	    <img src="images/header_17.jpg" width="49" height="38" alt=""></td>
  </tr>
   <tr>
     <td colspan="3">
       <a href="/shop/account.php"
			onmouseover="changeImages('My_Account', 'images/My-Account-over.jpg'); return true;"
			onmouseout="changeImages('My_Account', 'images/My-Account.jpg'); return true;"
			onmousedown="changeImages('My_Account', 'images/My-Account-over.jpg'); return true;"
			onmouseup="changeImages('My_Account', 'images/My-Account-over.jpg'); return true;">
         <img name="My_Account" src="images/My-Account.jpg" width="119" height="36" border="0" alt="My Account"></a></td>
  </tr>
   <tr>
     <td>
       <img src="images/spacer.gif" width="82" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="65" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="79" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="54" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="84" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="21" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="54" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="96" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="59" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="49" height="1" alt=""></td>
  </tr>
 </table>
 <!-- End ImageReady Slices -->
</div>
</body>
</html>

Can anyone please help me?

steve_s · May 13, 2009

I've been fighting for a while with trying to get me header to display correctly, and I just can't seem to get it! I don't know what I am doing incorrectly.

I would like my store centered, and I would like the header to tie in with the rest of the site. I have tried to accomplish this with manual coding as well as using the contributions that center the store, and I just can't get my header to look right.

I am getting desparate, and starting to feel incredibly dumb. Any assistance would be greatly appreciated. I am willing to pay for the assistance if necessary, but I don't think this should be very difficult.

I am trying to include the following header code (this is taken from an html version of the header that I want to add, so I know this code has additional code that isn't required), and I want the store to be restricted in width so that my header doesn't get stretched out.

<html>
<head>
<!-- ImageReady Preload Script (header.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
	rslt = new Image();
	rslt.src = arg;
	return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
	for (var i=0; i<changeImages.arguments.length; i+=2) {
		document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
	}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
	Home_over = newImage("images/Home-over.jpg");
	Who_We_Are_over = newImage("images/Who-We-Are-over.jpg");
	Our_Herd_over = newImage("images/Our-Herd-over.jpg");
	Our_Products_over = newImage("images/Our-Products-over.jpg");
	Contacts_over = newImage("images/Contacts-over.jpg");
	My_Cart_over = newImage("images/My-Cart-over.jpg");
	Checkout_over = newImage("images/Checkout-over.jpg");
	My_Account_over = newImage("images/My-Account-over.jpg");
	preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
background-color: #555957;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<div align="center">
 <!-- ImageReady Slices (header.psd) -->
 <table id="Table_01" width="775" height="235" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td colspan="3">
       <img src="images/header_01.jpg" width="226" height="163" alt=""></td>
    <td colspan="3">
	    <img src="images/header_02.jpg" width="182" height="163" alt=""></td>
    <td colspan="7">
	    <img src="images/header_03.jpg" width="367" height="163" alt=""></td>
  </tr>
   <tr>
     <td>
       <a href="/home.htm"
			onmouseover="changeImages('Home', 'images/Home-over.jpg'); return true;"
			onmouseout="changeImages('Home', 'images/Home.jpg'); return true;"
			onmousedown="changeImages('Home', 'images/Home-over.jpg'); return true;"
			onmouseup="changeImages('Home', 'images/Home-over.jpg'); return true;">
         <img name="Home" src="images/Home.jpg" width="82" height="33" border="0" alt="Home"></a></td>
    <td>
	    <img src="images/header_05.jpg" width="65" height="33" alt=""></td>
    <td colspan="2">
	    <a href="/about-us.htm"
			onmouseover="changeImages('Who_We_Are', 'images/Who-We-Are-over.jpg'); return true;"
			onmouseout="changeImages('Who_We_Are', 'images/Who-We-Are.jpg'); return true;"
			onmousedown="changeImages('Who_We_Are', 'images/Who-We-Are-over.jpg'); return true;"
			onmouseup="changeImages('Who_We_Are', 'images/Who-We-Are-over.jpg'); return true;">
	      <img name="Who_We_Are" src="images/Who-We-Are.jpg" width="123" height="33" border="0" alt="Who We Are"></a></td>
    <td>
	    <img src="images/header_07.jpg" width="54" height="33" alt=""></td>
    <td colspan="2">
	    <a href="http://alpacanation.com/farmsandbreeders/03_viewfarm.asp?name=17162" target="_blank"
			onmouseover="changeImages('Our_Herd', 'images/Our-Herd-over.jpg'); return true;"
			onmouseout="changeImages('Our_Herd', 'images/Our-Herd.jpg'); return true;"
			onmousedown="changeImages('Our_Herd', 'images/Our-Herd-over.jpg'); return true;"
			onmouseup="changeImages('Our_Herd', 'images/Our-Herd-over.jpg'); return true;">
	      <img name="Our_Herd" src="images/Our-Herd.jpg" width="105" height="33" border="0" alt="Our Herd"></a></td>
    <td>
	    <img src="images/header_09.jpg" width="54" height="33" alt=""></td>
    <td colspan="2">
	    <a href="/shop/index.php"
			onmouseover="changeImages('Our_Products', 'images/Our-Products-over.jpg'); return true;"
			onmouseout="changeImages('Our_Products', 'images/Our-Products.jpg'); return true;"
			onmousedown="changeImages('Our_Products', 'images/Our-Products-over.jpg'); return true;"
			onmouseup="changeImages('Our_Products', 'images/Our-Products-over.jpg'); return true;">
	      <img name="Our_Products" src="images/Our-Products.jpg" width="140" height="33" border="0" alt="Our Products"></a></td>
    <td>
	    <img src="images/header_11.jpg" width="44" height="33" alt=""></td>
    <td colspan="2">
	    <a href="/contact-us.htm"
			onmouseover="changeImages('Contacts', 'images/Contacts-over.jpg'); return true;"
			onmouseout="changeImages('Contacts', 'images/Contacts.jpg'); return true;"
			onmousedown="changeImages('Contacts', 'images/Contacts-over.jpg'); return true;"
			onmouseup="changeImages('Contacts', 'images/Contacts-over.jpg'); return true;">
	      <img name="Contacts" src="images/Contacts.jpg" width="108" height="33" border="0" alt="Contacts"></a></td>
  </tr>
   <tr>
     <td colspan="6" rowspan="2">
       <img src="images/header_13.jpg" width="408" height="38" alt=""></td>
    <td colspan="3">
	    <img src="images/header_14.jpg" width="119" height="2" alt=""></td>
    <td rowspan="2">
	    <a href="/shop/shopping_cart.php"
			onmouseover="changeImages('My_Cart', 'images/My-Cart-over.jpg'); return true;"
			onmouseout="changeImages('My_Cart', 'images/My-Cart.jpg'); return true;"
			onmousedown="changeImages('My_Cart', 'images/My-Cart-over.jpg'); return true;"
			onmouseup="changeImages('My_Cart', 'images/My-Cart-over.jpg'); return true;">
	      <img name="My_Cart" src="images/My-Cart.jpg" width="96" height="38" border="0" alt="My Cart"></a></td>
    <td colspan="2" rowspan="2">
	    <a href="/shop/checkout_shipping.php"
			onmouseover="changeImages('Checkout', 'images/Checkout-over.jpg'); return true;"
			onmouseout="changeImages('Checkout', 'images/Checkout.jpg'); return true;"
			onmousedown="changeImages('Checkout', 'images/Checkout-over.jpg'); return true;"
			onmouseup="changeImages('Checkout', 'images/Checkout-over.jpg'); return true;">
	      <img name="Checkout" src="images/Checkout.jpg" width="103" height="38" border="0" alt="Checkout"></a></td>
    <td rowspan="2">
	    <img src="images/header_17.jpg" width="49" height="38" alt=""></td>
  </tr>
   <tr>
     <td colspan="3">
       <a href="/shop/account.php"
			onmouseover="changeImages('My_Account', 'images/My-Account-over.jpg'); return true;"
			onmouseout="changeImages('My_Account', 'images/My-Account.jpg'); return true;"
			onmousedown="changeImages('My_Account', 'images/My-Account-over.jpg'); return true;"
			onmouseup="changeImages('My_Account', 'images/My-Account-over.jpg'); return true;">
         <img name="My_Account" src="images/My-Account.jpg" width="119" height="36" border="0" alt="My Account"></a></td>
  </tr>
   <tr>
     <td>
       <img src="images/spacer.gif" width="82" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="65" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="79" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="54" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="84" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="21" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="54" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="96" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="44" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="59" height="1" alt=""></td>
    <td>
	    <img src="images/spacer.gif" width="49" height="1" alt=""></td>
  </tr>
 </table>
 <!-- End ImageReady Slices -->
</div>
</body>
</html>

Can anyone please help me?

for a start remove from the header unless this has been removed from each of your files at top

<html>
<head>
<style type="text/css">
<!--
body {
background-color: #555957;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">

</body>
</html>

that might be causing your problem

following needs to be added to each file unless you have changed the files

<style type="text/css">
<!--
body {
background-color: #555957;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">

I Need Help With My Header!

Recommended Posts

mkswanson

steve_s

Archived

Browse

Activity