Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Extra images - alignment in header

Extra images - alignment in header

Locked

Views: 2,409

Results 1 to 12 of 12
This thread is locked. New replies are disabled.
28 Jul 2006, 4:09 PM
#1
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Extra images - alignment in header

I made the "classic" error when first upgrading to 1.3, by accidentally using the classic CSS and anyway, ended up creating a "zoo of css" (Dr. Byte's words). :cool:

Now, I'm starting over with the template_default (and Future Template) and I'm trying to put some buttons back in my header, to the right of the main header picture (our logo).

This is the way it should look:

This is the way it currently looks:

I can't figure out what CSS to use to get these sitting in the right spots. I started with divs around everything and then changed them to spans and I'm getting confused.

From my tpl_header:

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>

<!--eof-branding display-->

<!--eof-header logo and navigation display-->

<div class="roundButtons"><?php echo '<span class="' . strtolower(HEADER_TITLE_CATALOG) . '"><a href="' . zen_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '"></a></span>';?>
<?php if (isset($_SESSION['customer_id'])) { ?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_LOGOFF) . '"><a href="' . zen_href_link(FILENAME_LOGOFF, '', 'SSL') . '"></a></span>';?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_MY_ACCOUNT) . '"><a href="' . zen_href_link(FILENAME_ACCOUNT, '', 'SSL') . '"></a></span>';?>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_LOGIN) . '"><a href="' . zen_href_link(FILENAME_LOGIN, '', 'SSL') . '"></a></span>';?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_INFO) . '"><a href="' . zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL') . '"></a></span>';?>
<?php } } ?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_CART_CONTENTS) . '"><a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '"></a></span>';?>
<?php	    
  if ($_SESSION['languages_id'] == 1) {
	      $key = 'da';
	      } else {
	      $key = 'en';
	      }
	      echo '<span class="' . strtolower(HEADER_TITLE_LANGUAGE) . '"><a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '"></a></span>';?></div> 
                 
<div class="searchHeader"><?php require(DIR_WS_MODULES . 'sideboxes/' . 'search_header.php'); ?></div>
</div>
<br class="clearBoth" />
<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

And this is what I have in .roundButtons CSS:

.roundButtons {
	padding: 0px;
	margin: 0px;
	position: relative;
	top: 0px;
	left: 580px;
	}
29 Jul 2006, 1:25 PM
#2
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

I guess there are line breaks being added from the code - but, from where?? - nothing I add to the CSS changes the way it's displaying. It's just moving around the page in one block, each button on its own line.

Anybody have any ideas?

29 Jul 2006, 1:39 PM
#3
tinas avatar

tinas

Totally Zenned

Join Date:
Jan 2005
Location:
Lake Havasu, AZ
Posts:
1,090
Plugin Contributions:
0

Re: Extra images - alignment in header

Hi Hun -

Here's your problem -
.roundButtons {
padding: 0px;
margin: 0px;
position: relative;
top: 0px;
left: 580px;
}

You are telling all of your buttons to space at the left spot 580.

You should change the left:580px to be as this

.roundButtons {
padding: 0px;
margin: 0px;
position: relative;
top: 0px;
float:left
display: inline;
}

You might leave out the display and see if it fixes, but I believe it will need to be there.

Hope that helps :)

29 Jul 2006, 2:32 PM
#4
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

Oh TinaS, I was hoping so much that that was the solution, but unfortunately it didn't fix it.

.roundButtons {
padding: 0px;
margin: 0px;
position: relative;
top: 0px;
float:left
display: inline;
}

With the above, the buttons moved over to the left margin but still listing top to bottom, rather than next to each other. I removed display: inline, and it popped back to where it was after the logo -- but the buttons still listing down.

I have tried a lot of naive fiddling with the CSS and the code in that file -- and the buttons have ALWAYS displayed one below the other, like a block -- that's why I was wondering about line breaks in there somehow.

Thanks for the help, and feel free not to abandon me yet! :unsure:

29 Jul 2006, 2:47 PM
#5
tshooters avatar

tshooters

Totally Zenned

Join Date:
Dec 2005
Posts:
1,037
Plugin Contributions:
2

Re: Extra images - alignment in header

You're missing a ; after float:left

.roundButtons {
padding: 0px;
margin: 0px;
position: relative;
top: 0px;
float:left;
display: inline;
}

29 Jul 2006, 3:14 PM
#6
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

Thanks TShooters, I fixed that, but the problem still remains...

29 Jul 2006, 3:26 PM
#7
tinas avatar

tinas

Totally Zenned

Join Date:
Jan 2005
Location:
Lake Havasu, AZ
Posts:
1,090
Plugin Contributions:
0

Re: Extra images - alignment in header

Have you tried to float it to the right ?

Also are you sure that the content of that header when widths are added together is not wider than the wrapper?

Hmmm.... still thinking. But maybe one of those will help ?

29 Jul 2006, 4:09 PM
#8
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

I have tried float: right and it didn't work. It put the downward list of buttons on the right margin of the site. I removed a bunch of the buttons to check the "too long for wrapper" solution, and that didn't work either. They just won't budge from this up to down listing!

In addition to the row of buttons having the css .roundButtons, each button is also defined with its own CSS:

.hjem a, .home a, .login a, .kurv a, .sprog a {
	display: block;
	width: 40px;
	height: 43px;
	padding: 0px;
	margin: 0px;
	}
.hjem a {
	background-image: url(../images/hjem_button.gif);
	}

I put all of the button names (in both languages: home, hjem, etc...) together with the shared values and then each one has it's own listing to set the actual image.

It worked fine when I was using the classic table style, but maybe it affects something now with divs?

30 Jul 2006, 3:37 PM
#9
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

Here's my view source for that area:

<div class="roundButtons"><span class="hjem"><a href="http://mysite.com/shop/index.php?main_page=index"></a></span>		<span class="login"><a href="https://mysite.com/shop/index.php?main_page=login"></a></span>		<span class="info"><a href="http://mysite.com/shop/index.php?main_page=contact_us"></a></span>		<span class="kurv"><a href="http://mysite.com/shop/index.php?main_page=shopping_cart"></a></span><span class="sprog"><a href="http://mysite.com/shop/index.php?main_page=index&language=en"></a></span></div>
<div class="searchHeader"></div>
</div>
<br class="clearBoth" />

As you can see, there's space being placed between each button. Is this what could be causing the problem?

30 Jul 2006, 3:51 PM
#10
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

Okay, now I'm going to complain about the 7 minute time limit to edit a post. It's annoying! Okay, now I'm done.

Continuing from the previous post... I don't know why it's there nor how to remove that space between the buttons in the source. (If it's actually causing the problem)

Here's the code from the appropriate area in the tpl_header:

<div class="roundButtons"><?php echo '<span class="' . strtolower(HEADER_TITLE_CATALOG) . '"><a href="' . zen_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '"></a></span>';?>
<?php if (isset($_SESSION['customer_id'])) { ?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_LOGOFF) . '"><a href="' . zen_href_link(FILENAME_LOGOFF, '', 'SSL') . '"></a></span>';?><?php echo '<span class="' . strtolower(HEADER_TITLE_MY_ACCOUNT) . '"><a href="' . zen_href_link(FILENAME_ACCOUNT, '', 'SSL') . '"></a></span>';?>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_LOGIN) . '"><a href="' . zen_href_link(FILENAME_LOGIN, '', 'SSL') . '"></a></span>';?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_INFO) . '"><a href="' . zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL') . '"></a></span>';?>
<?php } } ?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_CART_CONTENTS) . '"><a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '"></a></span>';?>
<?php	    
  if ($_SESSION['languages_id'] == 1) {
	      $key = 'da';
	      } else {
	      $key = 'en';
	      }
	      echo '<span class="' . strtolower(HEADER_TITLE_LANGUAGE) . '"><a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '"></a></span>'; ?></div>
<div class="searchHeader"><?php require(DIR_WS_MODULES . 'sideboxes/' . 'search_header.php'); ?></div>
</div>
<br class="clearBoth" />
3 Aug 2006, 2:24 PM
#11
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

Anybody know if that whitespace between the buttons in the source is the reason each button is displayed on its own line? Or is it something else?
(You can see it in the post from July 30th 5:37 PM)

Sorry to ask the same question twice, but I have no idea how to search for the answer to this kind of question...

5 Aug 2006, 2:13 PM
#12
magicpants avatar

magicpants

Zen Follower

Join Date:
Aug 2005
Posts:
314
Plugin Contributions:
0

Re: Extra images - alignment in header

I've continued to try to figure this out, but haven't gotten anywhere.

To recap:

Buttons are displaying vertically next to my header logo, rather than horizontally. I had it working correctly with the classic template's files for 1.3, but without the table they just won't display the way I want.

Should be like this:

But, looks like this:

I've tried all the suggestions in this thread, and then some... nothing's solved it.

I noticed that when I view source, that area of code looks like this:

<div class="roundButtons"><span class="hjem"><a href="http://yellowman.dk/butik/index.php?main_page=index"></a></span>		<span class="login"><a href="https://yellowman.dk/butik/index.php?main_page=login"></a></span>		<span class="info"><a href="http://yellowman.dk/butik/index.php?main_page=contact_us"></a></span>		<span class="kurv"><a href="http://yellowman.dk/butik/index.php?main_page=shopping_cart"></a></span><span class="sprog"><a href="http://yellowman.dk/butik/index.php?main_page=index&language=en"></a></span></div>

Noticing that strange whitespace in there between all the button links, I was wondering if that could cause this problem. No one's responded yet so I still don't know.

If so, any suggestions on how to remove the whitespace? This is being generated from this code in the tpl_header:

<div class="roundButtons"><?php echo '<span class="' . strtolower(HEADER_TITLE_CATALOG) . '"><a href="' . zen_href_link(FILENAME_DEFAULT, '', 'NONSSL') . '"></a></span>';?>
<?php if (isset($_SESSION['customer_id'])) { ?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_LOGOFF) . '"><a href="' . zen_href_link(FILENAME_LOGOFF, '', 'SSL') . '"></a></span>';?><?php echo '<span class="' . strtolower(HEADER_TITLE_MY_ACCOUNT) . '"><a href="' . zen_href_link(FILENAME_ACCOUNT, '', 'SSL') . '"></a></span>';?>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_LOGIN) . '"><a href="' . zen_href_link(FILENAME_LOGIN, '', 'SSL') . '"></a></span>';?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_INFO) . '"><a href="' . zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL') . '"></a></span>';?>
<?php } } ?>
		<?php echo '<span class="' . strtolower(HEADER_TITLE_CART_CONTENTS) . '"><a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '"></a></span>';?>
<?php	    
  if ($_SESSION['languages_id'] == 1) {
	      $key = 'da';
	      } else {
	      $key = 'en';
	      }
	      echo '<span class="' . strtolower(HEADER_TITLE_LANGUAGE) . '"><a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '"></a></span>'; ?></div>
<div class="searchHeader"><?php require(DIR_WS_MODULES . 'sideboxes/' . 'search_header.php'); ?></div>
</div>
<br class="clearBoth" />

Sorry for the repost of info, but I'm baffled and kinda need a nudge in the right direction. Thanks in advance.