Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Centering Header


mturner333

Recommended Posts

Ok folks, I'm at wits end with this header thing. I still can't get my header to stretch. I have followed the folling instructions with no luck at all as well as many others...

 

To center & size Shop

 

At the very start of header.php add:

 

<div id="content">

 

then at the very bottom of footer.php add:

 

</div>

 

then add to your css:

 

#content {

width: 900; margin: auto;

border: 1px solid #999999;

text-align:center;

}

 

and add to the BODY tag

 

text-align:center;

 

Obviously set width above to whatever you need.

 

Thats It!!

 

The attached has same plus technique for different width header/footer to content:

 

Works with all osC versions

 

 

Is my image too small or what? Nothing seems to be working and I need some help.

The rest of my shop stretches fine except for the header. What am I doing wrong?

My site is still under major construction but I am needing to get all this worked out before moving my catalog to the root.

I'm aware that this has been asked thousands of times and I have read over and tried so many methods my eyes are crossed.

If you happen to spot any other bugs, feel free to let me know so I can fix those as well but now Im worried about the header.

Nitro Toys & Hobbies

Thanks in advance!

Link to comment
Share on other sites

looking at your source there's no sign of the <div> etc, have you placed them in the html area or within the php tags, if the latter it wont work.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Sorry, I had set everything back to normal... my mistake. Here is the code I am using now

 

Header.php

<div id="header"><?php

/*

$Id: header.php,v 1.19 2002/04/13 16:11:52 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2002 osCommerce

 

Released under the GNU General Public License

*/

 

if ($messageStack->size > 0) {

echo $messageStack->output();

}

?>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td><?php echo tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce', '204', '50'); ?></td>

<td align="right"><?php echo '<a href="http://www.oscommerce.com" target="_blank">' . tep_image(DIR_WS_IMAGES . 'header_support.gif', HEADER_TITLE_SUPPORT_SITE, '50', '50') . '</a>  <a href="' . tep_catalog_href_link() . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_ONLINE_CATALOG, '53', '50') . '</a>  <a href="' . tep_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_administration.gif', HEADER_TITLE_ADMINISTRATION, '50', '50') . '</a>'; ?>  </td>

</tr>

<tr class="headerBar">

<td class="headerBarContent">  <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '" class="headerLink">' . HEADER_TITLE_TOP . '</a>'; ?></td>

<td class="headerBarContent" align="right"><?php echo '<a href="http://www.oscommerce.com" class="headerLink">' . HEADER_TITLE_SUPPORT_SITE . '</a>  |  <a href="' . tep_catalog_href_link() . '" class="headerLink">' . HEADER_TITLE_ONLINE_CATALOG . '</a>  |  <a href="' . tep_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '" class="headerLink">' . HEADER_TITLE_ADMINISTRATION . '</a>'; ?>  </td>

</tr>

</table>

</div>

What I changed is in bold!

 

Stylesheet.css

/*

$Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 11px; }

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 11px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 11px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 11px; color: #70d250; text-decoration: underline; }

 

#header {

width: 100%; margin: auto;

border: 0px solid #999999;

text-align:center;

}

BODY {

background: #ffffff;

color: #000000;

margin: 0px;

}

 

A {

color: #000000;

text-decoration: none;

}

 

A:hover {

color: #AABBDD;

text-decoration: underline;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #ffffff;

}

 

TR.headerNavigation {

background: #bbc3d3;

}

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #ffffff;

}

 

TR.headerError {

background: #ff0000;

}

 

TD.headerError {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 11px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

 

TR.headerInfo {

background: #00ff00;

}

 

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 11px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

 

TR.footer {

background: #bbc3d3;

}

 

TD.footer {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

background: #bbc3d3;

color: #ffffff;

font-weight: bold;

}

 

.infoBox {

background: #b6b7cb;

}

 

.infoBoxContents {

background: #f8f8f9;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

.infoBoxNotice {

background: #FF8E90;

}

 

.infoBoxNoticeContents {

background: #FFE6E6;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

font-weight: bold;

background: #bbc3d3;

color: #ffffff;

}

 

TD.infoBox, SPAN.infoBox {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #f8f8f9;

}

 

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #f8f8f9;

}

 

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 1px;

}

 

.productListing-heading {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

background: #b6b7cb;

color: #FFFFFF;

font-weight: bold;

}

 

TD.productListing-data {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

A.pageResults {

color: #0000FF;

}

 

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

 

TD.pageHeading, DIV.pageHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 20px;

font-weight: bold;

color: #9a9a9a;

}

 

TR.subBar {

background: #f4f7fd;

}

 

TD.subBar {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

color: #000000;

}

 

TD.main, P.main {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

line-height: 1.5;

}

 

TD.smallText, SPAN.smallText, P.smallText {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

TD.accountCategory {

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

color: #aabbdd;

}

 

TD.fieldKey {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

 

TD.fieldValue {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

 

TD.tableHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

 

SPAN.newItemInCart {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

color: #ff0000;

}

 

CHECKBOX, INPUT, RADIO, SELECT {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

TEXTAREA {

width: 100%;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

SPAN.greetUser {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #f0a480;

font-weight: bold;

}

 

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

 

TD.formAreaTitle {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

 

SPAN.markProductOutOfStock {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

color: #c76170;

font-weight: bold;

}

 

SPAN.productSpecialPrice {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

 

SPAN.errorText {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

 

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

 

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #000000; }

 

/* message box */

 

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 12px; }

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 11px; background-color: #99ff00; }

 

/* input requirement */

 

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #ff0000; }

 

 

I tried what else was in the instruction here...

If you want different width header/footer to content:

 

At the very start of header.php add:

 

<div id="header">

 

then at the very bottom of header.php add:

 

</div><div id="content">

 

 

At the very start of footer.php add:

 

</div><div id="footer">

 

 

then at the very bottom of footer.php add:

 

</div>

 

then add to your css:

 

#content {

width: 900; margin: auto;

border: 0px solid #999999;

text-align:center;

}

#header {

width: 100%; margin: auto;

border: 0px solid #999999;

text-align:center;

}

#footer {

width: 100%; margin: auto;

border: 0px solid #999999;

text-align:center;

}

 

 

and add to the BODY tag

 

text-align:center;

 

Obviously set width above to whatever you need.

I only inserted the portion for the header instead of centering the whole shop. Can I do that?

Link to comment
Share on other sites

Sorry I posted the wrong code and can't edit my original post... below is the code for my includes/header.php i had the admin/includes/header in the previous post...

 

<div id="header"><?php

/*

$Id: header.php,v 1.42 2003/06/10 18:20:38 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

// check if the 'install' directory exists, and warn of its existence

if (WARN_INSTALL_EXISTENCE == 'true') {

if (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/install')) {

$messageStack->add('header', WARNING_INSTALL_DIRECTORY_EXISTS, 'warning');

}

}

 

// check if the configure.php file is writeable

if (WARN_CONFIG_WRITEABLE == 'true') {

if ( (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) && (is_writeable(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) ) {

$messageStack->add('header', WARNING_CONFIG_FILE_WRITEABLE, 'warning');

}

}

 

// check if the session folder is writeable

if (WARN_SESSION_DIRECTORY_NOT_WRITEABLE == 'true') {

if (STORE_SESSIONS == '') {

if (!is_dir(tep_session_save_path())) {

$messageStack->add('header', WARNING_SESSION_DIRECTORY_NON_EXISTENT, 'warning');

} elseif (!is_writeable(tep_session_save_path())) {

$messageStack->add('header', WARNING_SESSION_DIRECTORY_NOT_WRITEABLE, 'warning');

}

}

}

 

// check session.auto_start is disabled

if ( (function_exists('ini_get')) && (WARN_SESSION_AUTO_START == 'true') ) {

if (ini_get('session.auto_start') == '1') {

$messageStack->add('header', WARNING_SESSION_AUTO_START, 'warning');

}

}

 

if ( (WARN_DOWNLOAD_DIRECTORY_NOT_READABLE == 'true') && (DOWNLOAD_ENABLED == 'true') ) {

if (!is_dir(DIR_FS_DOWNLOAD)) {

$messageStack->add('header', WARNING_DOWNLOAD_DIRECTORY_NON_EXISTENT, 'warning');

}

}

 

if ($messageStack->size('header') > 0) {

echo $messageStack->output('header');

}

?>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr class="header">

<td valign="middle" width="100%"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'nitrobanner.jpg', 'Nitro Banner') . '</a>'; ?></td>

<td align="middle" valign="bottom">

</tr>

</table>

<table border="0" width="100%" cellspacing="0" cellpadding="1">

<tr class="headerNavigation">

<td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>

<td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   </td>

</tr>

</table>

<?php

if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {

?>

<table border="0" width="100%" cellspacing="0" cellpadding="2">

<tr class="headerError">

<td class="headerError"><?php echo htmlspecialchars(urldecode($HTTP_GET_VARS['error_message'])); ?></td>

</tr>

</table>

<?php

}

 

if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {

?>

<table border="0" width="100%" cellspacing="0" cellpadding="2">

<tr class="headerInfo">

<td class="headerInfo"><?php echo htmlspecialchars($HTTP_GET_VARS['info_message']); ?></td>

</tr>

</table>

<?php

}

?>

</div>

Link to comment
Share on other sites

Well your not trying to center the page or header are you!! How can you center something that 100% wide.

 

In anycase, as detailed, to center a page in ie you must add text-align:center; to the BODY tag

 

In your case you want to center your image, set its cell class accordingly & make sure that has 100% width

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

One thing I was missing was the <align> statement... Now I have it aligned to the middle but even with 100% width it still doesn't stretch. Is it my image?

 

Here's the new portion I believe you were talking about

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header" align="middle" width="100%">
<td valign="middle" width="100%"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'nitrobanner.jpg', 'Nitro Banner') . '</a>'; ?></td>
<td align="middle" valign="bottom">
 </tr>
</table>

Link to comment
Share on other sites

Viewing the source of my page I see this...

 

<!-- header //-->
<div id="header"><table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header" align="middle" width="100%">
<td valign="middle" width="100%"><a href="http://www.nitrotoysandhobbies.com/oscommerce/index.php"><img src="images/nitrobanner.jpg" border="0" alt="Nitro Banner" title=" Nitro Banner " width="1005" height="140"></a></td>
<td align="middle" valign="bottom">
 </tr>
</table>

 

It shows a width of '1005' and height of '140' is that just the attributes of the image itself or is that what is keeping me from stretching it?

Link to comment
Share on other sites

Viewing the source of my page I see this...

 

<!-- header //-->
<div id="header"><table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header" align="middle" width="100%">
<td valign="middle" width="100%"><a href="http://www.nitrotoysandhobbies.com/oscommerce/index.php"><img src="images/nitrobanner.jpg" border="0" alt="Nitro Banner" title=" Nitro Banner " width="1005" height="140"></a></td>
<td align="middle" valign="bottom">
 </tr>
</table>

 

It shows a width of '1005' and height of '140' is that just the attributes of the image itself or is that what is keeping me from stretching it?

 

 

You should learn html first before trying to build sites.

 

whats this for? <td align="middle" valign="bottom">

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

It's pretty apparent obviously that I have no idea what that's for. If I take it out or change it then it does nothing. My mistake by asking a question, I thought that is what this forum was for. I might be new to this but I've tried my best to follow everything "by the book" and as a last resort I posted it here which is a no-no apparently. Can you just tell me what it is I'm doing wrong? I'm not here to burden anyone, I'm just looking for help.

Link to comment
Share on other sites

This forum is for support of osCommerce & related php/sql problems, its not about teaching basic html, there are plenty of places that do that.

 

Obviously we are going to get fed up when people come complaining stuff doesnt work & want all sorts of support when it turns out they've messed up, causing thier own error as they havent they faintest idea what their doing and are just wasting everyones time.

 

http://www.w3schools.com/html/DEFAULT.asp

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...