4 replies to this topic

[Gems]

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;

[Karl53]

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.

[Gems]

no sadly I've tried that previously (and again after reading your reply) and it didn't work Ive been stuck on this and have no idea what could be causing it.

[Gems]

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!

[Gems]

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.