Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Header Images have gaps


Gems

Recommended Posts

Hi everyone,

 

I have added multiple images into my header via header.php but i cant seem to get rid of the spaces between each image. Any help would be appreciated :)

 

My Site

 

 

code in header.php

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2010 osCommerce
 Released under the GNU General Public License
*/
 if ($messageStack->size('header') > 0) {
echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
 }
?>
<div id="header" class="grid_24 alpha omega header_background">
 <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>
<a href="http://islamicgems.com/shop/index.php?cPath=0">
<img src="http://www.islamicgems.com/shop/images/header2.png" alt="Collections"/>
</a>
<a href="http://islamicgems.com/shop/index.php?cPath=0">
<img src="http://www.islamicgems.com/shop/images/header3.png" alt="About"/>
</a>
<a href="http://islamicgems.com/shop/contact_us.php">
<img src="http://www.islamicgems.com/shop/images/header4.png" alt="About"/>
</a>
<a href="http://islamicgems.com/shop/contact_us.php">
<img src="http://www.islamicgems.com/shop/images/header5.png" alt="About"/>
</a>
'; ?></div>

 

code in stylesheet.css

#header {
 height: 69px;
 margin-top: 0px;
}

#storeLogo {
 float: left;
 margin-top: 5px;
}
#headerShortcuts {
 float: right;
 margin-top: 15px;
}
.headerShortcutLink {
background-color: transparent;
color:white;
padding: 8px;
margin-right:0px;
float: right;

Link to comment
Share on other sites

I see that no one has replied, so I'll take a stab at this.

 

Could the padding setting here:

 

 

.headerShortcutLink {

background-color: transparent;

color:white;

padding: 8px; <<<

 

be the problem? I didn't test it. You could try setting this to 0 and see what happens.

Link to comment
Share on other sites

ok i figured out what the problem is, i just dont know how to fix it :/

 

so this code below is linked to storelogo in stylesheet.css

<div id="header" class="grid_24 alpha omega header_background">
 <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>

 

and the below one is linked to headerShortcutLink in stylesheet.css

<div class="grid_24 alpha omega footer footer_background">
 <?php
 echo '<a class="headerShortcutLink" href="' . tep_href_link(FILENAME_SHOPPING_CART) . '" alt="" >' .($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : '') . HEADER_TITLE_CART_CONTENTS . '</a>' .
	 '<a class="headerShortcutLink" href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '" alt="" >' . HEADER_TITLE_CHECKOUT . '</a>' .
	 '<a class="headerShortcutLink" href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '" alt="" >' . HEADER_TITLE_MY_ACCOUNT . '</a>';

 if (tep_session_is_registered('customer_id')) {
   echo  '<a class="headerShortcutLink" href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '" alt="" >' . HEADER_TITLE_LOGOFF . '</a>';
 }
?>
</div>

 

so what i need is to link the below code to storeLogo in stylesheet.css and then adjust the margins and padding there.

<a href="http://islamicgems.com/shop/index.php?cPath=0"><img src="http://www.islamicgems.com/shop/images/header2.png" alt="Collections"/></a>
<a href="http://islamicgems.com/shop/index.php?cPath=0"><img src="http://www.islamicgems.com/shop/images/header3.png" alt="About"/></a>
<a href="http://islamicgems.com/shop/contact_us.php"><img src="http://www.islamicgems.com/shop/images/header4.png" alt="Contact"/></a>
<a href="http://islamicgems.com/shop/contact_us.php"><img src="http://www.islamicgems.com/shop/images/header5.png" alt="Press"/></a>

 

I just dont know how to do that :/ Would really appreciate any help at all.

Thanks in advance!

Link to comment
Share on other sites

I figured it out. Each code is on an individual line causing the break, i put them all in the same line and no break! Now i just need to figure out how to remove the extra space at the end towards the right. If i make the last image any bigger it goes to the next line. I'm assuming there is a margin or padding somewhere.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...