Header Format

[Ben]

Trying my best to get my phone number appear next to the logo and aligned left. Have played with css, html, and no matter what alignment is always in the middle. Just using a standard able header template. Only custom is adding my 800 number. Thanks in advance...

Code: Select all

<table id="storeHeader" cellpadding="0" cellspacing="0">
  <tr>
    <td class="logo"><a href="~/Default.aspx" >[[ConLib:StoreLogo]]</a>
</td><td align="left" valign="middle" style="text-align: left"><Call Us: 1-800-840-3610</span></td>

    <td class="headerContent" align="right" valign="top"><div class="shortcuts"> #if($customer.IsAnonymous) <a href="~/Login.aspx" class="login">Login</a> #else <a href="~/Logout.aspx" class="login">Logout</a> #end <a href="~/Members/MyAccount.aspx" class="acct">Account</a> <a href="~/Members/MyWishlist.aspx" class="wishlist">Wishlist</a> <a href="~/Basket.aspx" class="basket">Cart</a> #if($customer.IsAdmin) <a href="~/Admin/Default.aspx" class="admin">Admin</a> #end </div>
	        <div class="search"> [[ConLib:SimpleSearch]] </div></td>
    
  </tr>
  <tr>
    <td class="navigation" colspan="3"><div class="content" style="float:left;"> <a href="~/Default.aspx" class="tab">Home</a> <a href="~/Search.aspx" class="tab">Product Finder</a> <a href="~/AdvancedSearch.aspx" class="tab">Advanced Search</a> #if ($store.Currencies.Count > 1 ) <a href="~/Currencies.aspx" class="tab">Currencies</a> #end <a href="~/ContactUs.aspx" class="tab">Contact Us</a> </div></td>
  </tr>
</table>

[mwolf]

Try taking out the '<' before 'Call Us: 1-800-840-3610'.

[Ben]

ehh.. that was my error in the copy and paste. All tags are closed where they need to be. I've combed this code through and through...

[mwolf]

Do you have a URL you can include so I can take a closer look?

[Ben]

http://216.139.230.176/resources.aspx

Just trying to get the text to stick the the left side by the logo. Maybe put a nice 4px padding afterwards, but definitely not center aligned on the whole header. Thanks for looking!

[afm]

Hey Ben,

Add FireBug to your FireFox browser, load the page, and then select Tools > FireBug > Inspect Element. As you move the cursor over "Call Us" you will see FireBug outline the table cell and see that "Call Us" is very tightly aligned to the left. Then move the cursor over the logo and notice that the table cell has empty space to the right of the logo. That space is causing the misalignment.

[Ben]

thanks for tip. I installed the plug-in and see this nested spacing.... however I am clueless where this resides in the code. I checked the CSS and there are no spacers that I can see.

[afm]

If you don't specific the width of a table cell (you don't as far as I can see) the browser will try to calculate a width that accomodates the contents of all rows (2 in your case).

Basically, the browser is giving the first column more width than you want. So you have to tell it what you want.

[mwolf]

I added a width to the first table cell and some padding... I think this should display how you need it to.

Code: Select all

<table id="storeHeader" cellpadding="0" cellspacing="0">
  <tr>
    <td class="logo" style="width:20%;padding-right:6px;"><a href="~/Default.aspx" >[[ConLib:StoreLogo]]</a></td>
    <td align="left" valign="middle" style="text-align: left">Call Us: 1-800-840-3610</span></td>
    <td class="headerContent" align="right" valign="top">
<div class="shortcuts"> #if($customer.IsAnonymous) <a href="~/Login.aspx" class="login">Login</a> #else <a href="~/Logout.aspx" class="login">Logout</a> #end <a href="~/Members/MyAccount.aspx" class="acct">Account</a> <a href="~/Members/MyWishlist.aspx" class="wishlist">Wishlist</a> <a href="~/Basket.aspx" class="basket">Cart</a> #if($customer.IsAdmin) <a href="~/Admin/Default.aspx" class="admin">Admin</a> #end </div>
    <div class="search"> [[ConLib:SimpleSearch]] </div>
    </td>
   
  </tr>
  <tr>
    <td class="navigation" colspan="3"><div class="content" style="float:left;"> <a href="~/Default.aspx" class="tab">Home</a> <a href="~/Search.aspx" class="tab">Product Finder</a> <a href="~/AdvancedSearch.aspx" class="tab">Advanced Search</a> #if ($store.Currencies.Count > 1 ) <a href="~/Currencies.aspx" class="tab">Currencies</a> #end <a href="~/ContactUs.aspx" class="tab">Contact Us</a> </div></td>
  </tr>
</table>

[Ben]

Thanks for the help guys, that took care of the problem!!!!!!!

specified the % in the TD and everything snapped right into place!

[mwolf]

You should also put some padding to the right because on my screen the text is bunched up right against the header logo. Try adjusting the width of your browser and you will see what I am talking about.

[Ben]

Good call, im spoiled by my 22" which made it look perfect. Changed the style to adjust both td width and the padding together. Much better results. Thank you!!!!!!!

[mwolf]

Glad you got it displaying nicely now.