Page 1 of 1
Header Format
Posted: Mon Jun 22, 2009 1:42 pm
by 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>
Re: Header Format
Posted: Mon Jun 22, 2009 2:42 pm
by mwolf
Try taking out the '<' before 'Call Us: 1-800-840-3610'.
Re: Header Format
Posted: Mon Jun 22, 2009 2:52 pm
by 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...
Re: Header Format
Posted: Mon Jun 22, 2009 2:57 pm
by mwolf
Do you have a URL you can include so I can take a closer look?
Re: Header Format
Posted: Mon Jun 22, 2009 3:18 pm
by 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!
Re: Header Format
Posted: Mon Jun 22, 2009 3:34 pm
by 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.
Re: Header Format
Posted: Mon Jun 22, 2009 3:59 pm
by 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.
Re: Header Format
Posted: Mon Jun 22, 2009 4:12 pm
by 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.
Re: Header Format
Posted: Tue Jun 23, 2009 8:11 am
by 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>
Re: Header Format
Posted: Tue Jun 23, 2009 10:26 am
by Ben
Thanks for the help guys, that took care of the problem!!!!!!!
specified the % in the TD and everything snapped right into place!
Re: Header Format
Posted: Tue Jun 23, 2009 1:56 pm
by 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.
Re: Header Format
Posted: Tue Jun 23, 2009 3:36 pm
by 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!!!!!!!
Re: Header Format
Posted: Tue Jun 23, 2009 7:18 pm
by mwolf
Glad you got it displaying nicely now.