TD.headernavigation...please help me

[adamsleath]

hello all.

 

here is code from my stylesheet.css in osc2.2

 

#content {

width: 1200; margin: auto;

border: 1px solid #ffffff;

text-align:center;

 

TD.headerNavigation {

font-family: Arial, sans-serif;

font-size: 14px;

background-image: url('images/navbarheader1.png');

background-repeat: no-repeat;

width: 900;

height:34px;

color: #ffffff;

font-weight : bold;

padding: 5px;

}

A.headerNavigation {

color: #fff;

}

 

A.headerNavigation:hover {

color: #1262BF;

}

 

my problem is that my nav. header image is repeating, i cannot get the image to go the full 1200 px from one side to the other without repeating; it is as though some maximum width has been set on the background image.... perhaps in another file?? :'(

 

i am very new to this, any help on the osc files/variables/ syntax... would be appreciated.

 

thankyou.

[Guest]

Without seeing your site I can only guess.

In a stock osc there are 2 table celles in the header navigation, eg: the breadcrumb trail and the links for My Account and so on.

Your image is not repeating rather it is being put in for each <td> with that class.

[adamsleath]

i see; that makes sense. thankyou for your reply! :)

 

im only testing oscommerce2.2 on a local xampp server at this point in time...

 

is there a way to amalgamate the two table cells, while keeping the cell data as is? so as to require only one image?...where/which files is the relevant table cell data/code to be found????

 

thanks for any help.

 

adam.

[Guest]

Adam,

 

You will find the header information in catalog>includes>header.php

 

 

 

Chris

[adamsleath]

Adam,

 

You will find the header information in catalog>includes>header.php

 

 

 

Chris

thanks chris ill see what i can doo :blush:

 

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

<tr class="header">

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.gif', STORE_NAME) . '</a>'; ?></td>

<td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>  <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>  <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>  </td>

</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>

 

here is the code...er um :lol: i'll try googling "amalgamate table data cells" i spose :'( im just guessing right now...

[adamsleath]

</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>

 

would deleting the bolded text create one table that works?? im guessing...

mm tried it it didnt work :lol:

[adamsleath]

...can someone teach me how to modify the 2 cells into one???

 

:)

 

<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>

 

are these the two cells?

[adamsleath]

<td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?><a 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>

 

i changed the code to this -^, but "My Account|Cart Contents|Checkout" is now squished over to the left immediately adjacent to the "Catalog 'directory text'" in the navigationheader. i do however have only one navbar background image showing, which is partially what i wanted...

 

so now the prob is to reposition the "My Account|Cart Contents|Checkout" text to the far right of the navbar image...?? any help?

 

...is there a parameter that sets the width of the table row?

[adamsleath]

<td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?><a 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>

 

i changed the code to this -^, but "My Account|Cart Contents|Checkout" is now squished over to the left immediately adjacent to the "Catalog 'directory text'" in the navigationheader. i do however have only one navbar background image showing, which is partially what i wanted...

 

so now the prob is to reposition the "My Account|Cart Contents|Checkout" text to the far right of the navbar image...?? any help?

 

...is there a parameter that sets the width of the table row?

 

http://www.htmlcodetutorial.com/help/archive.php/o_t__t_3052__both-left-and-right-align.html

 

now im wondering whether i can enclose a portion of the table cell to be right justified internally...

[jhande]

I'm still waiting for my morning coffee Adam, but what about using DIV tags to align the links?

 

Something like:

 

<td><div align="left">breadcrumb trail</div><div align="right">account links</div></td>

 

Another thought...

 

Try taking the background image out of the table cell and adding it to a row.

 

Something like this:

 

Stylesheet

TD.headerNavigation {
font-family: Arial, sans-serif;
font-size: 14px;
width: 900;
height:34px;
color: #ffffff;
font-weight : bold;
padding: 5px;
}

TR.headerNavigation {
background-image: url('images/navbarheader1.png');
background-repeat: no-repeat;
}

 

HTML

<tr class="headerNavigation">
<td class="headerNavigation"><div align="left">  <?php echo $breadcrumb->trail(' » '); ?></div>
<div 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>   </div></td>
</tr>

[adamsleath]

I'm still waiting for my morning coffee Adam, but what about using DIV tags to align the links?

 

Something like:

 

<td><div align="left">breadcrumb trail</div><div align="right">account links</div></td>

 

Another thought...

 

Try taking the background image out of the table cell and adding it to a row.

 

Something like this:

 

Stylesheet

TD.headerNavigation {
font-family: Arial, sans-serif;
font-size: 14px;
width: 900;
height:34px;
color: #ffffff;
font-weight : bold;
padding: 5px;
}

TR.headerNavigation {
background-image: url('images/navbarheader1.png');
background-repeat: no-repeat;
}

 

HTML

<tr class="headerNavigation">
<td class="headerNavigation"><div align="left">  <?php echo $breadcrumb->trail(' » '); ?></div>
<div 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>   </div></td>
</tr>

 

 

yeah mate it dawned on me just before i read your post!!! lol of putting the image in the tr.headernavigation part of the stylesheet.css...i gave the div/p/span, etc tags away as i just dont know enough coding to get it right. i did try though with span tags like this:

<td class="headerNavigation"><span class="alignleft">   <?php echo $breadcrumb->trail(' » '); ?></span> <a class="headerNavigation"><span class="alignright">   <?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>   </span></td>

 

but i have a feeling my ignorance of coding has made it all borked/ wrong syntax, etc...

 

 

so ive gone back to the 2 cells of the orig. osc2.2. although i am now intrigued as to exactly how to subdivide a single cell to have both left and right justified parts... >_< :blink:

 

thanks again.

 

obviously simpler solutions are more efficient, but the div solution is more interesting :D

[adamsleath]

btw; i tried inserting your code for the 'div' solution, and it almost worked; ie the text justified left and right as per your div's' however a slight problem with the text being on separate lines.

 

http://www.webmasterworld.com/forum83/7882.htm

 

i tried this guys solution, to no avail, but you can see they encountered similar problems with the text appearing on different lines.

 

although the table Row approach is the k.i.s.s. solution; i'd still be interested to find a solution to the single cell 'display formatting problem'

 

anywho; thanks again.

[jhande]

Hey Adam,

 

Had my coffee LOL

 

Two ways to accomplish what you're trying to do.

 

Simplest:

Leave the table structure as is (two table cells) and cut your background image into two pieces; i.e. - left & right.

I'm assuming you are trying to use a single, non-repeating background image because both sides must look different??

Just align the background image to each cell.

 

CSS and single cell (more difficult):

Your going to have to use some sort of "element" to contain your text, one for left and one for right.

While still using the DIV tags (not SPAN) you'll have to play around with "floating" the left and right "elements".

 

Try a Google search for "CSS floating text".

I found a few that might be a helpful start -

http://www.yourhtmlsource.com/stylesheets/csslayout.html

http://www.w3schools.com/css/css_align.asp

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

 

[Guest]

Use the <div> tags as Jum said above. Set the first like this

<div style="float:left; margin-left:5px;">

Set the second like this

<div style="text-align:right; margin-right:5px;">

[jhande]

Use the <div> tags as Jum said above. Set the first like this

<div style="float:left; margin-left:5px;">

Set the second like this

<div style="text-align:right; margin-right:5px;">

 

Thanks for chiming in again Brian

 

Only had one cup of coffee, need my second!

 

LOL

 

[Guest]

Thanks for chiming in again Brian

 

Only had one cup of coffee, need my second!

 

LOL

 

No coffee for me. I did however have 1 24oz bottle of Pepsi and thinking of getting another one. :D

 

Probably have 3 or 4 total before I go to bed tonite. :-"

 

Wonder why I don't sleep more than 5 hours. :'(

[jhande]

No coffee for me. I did however have 1 24oz bottle of Pepsi and thinking of getting another one.

 

Probably have 3 or 4 total before I go to bed tonite.

 

Wonder why I don't sleep more than 5 hours.

 

Sleep! What's that?

 

Sugar + caffine + my meds = watching the sun come up.

[adamsleath]

Sleep! What's that?

 

Sugar + caffine + my meds = watching the sun come up.

 

thanks for getting back guys; it's a learning experience.. :thumbsup:

+1 yes to the meds and caffeine and sleeping at odd times :lol:

 

adam.

[knifeman]

btw; i tried inserting your code for the 'div' solution, and it almost worked; ie the text justified left and right as per your div's' however a slight problem with the text being on separate lines.

 

I actually forced one of my sites to have the breadcrumb on one line and the other links on a second line. Actually the breadcrumb is second.

 

On line one right justified is 'view all products' 'my account' and 'cart contents'. This takes up a third of my width.

Then when you go into subcategories and products, the breadcrumb would run into the other links, so they are on line 2 left justified.

 

Tim