Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default 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).

    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:
    Code:
    <!--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:
    Code:
    .roundButtons {
    	padding: 0px;
    	margin: 0px;
    	position: relative;
    	top: 0px;
    	left: 580px;
    	}
    Currently using ZEN CART v. 1.3.6

  2. #2
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default 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?
    Currently using ZEN CART v. 1.3.6

  3. #3
    Join Date
    Jan 2005
    Location
    Lake Havasu, AZ
    Posts
    1,149
    Plugin Contributions
    0

    Default 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 :)
    When the world gets in my face I say Have A Nice Day.
    * I DO Think and I HAVE BEEN Zenned - therefore, I AM * I donate - do you?
    Custom Templates and Zen Services CRS Designs, Inc.

  4. #4
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default 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.

    Code:
    .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!
    Currently using ZEN CART v. 1.3.6

  5. #5
    Join Date
    Dec 2005
    Posts
    1,059
    Plugin Contributions
    2

    Default 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;
    }
    [FONT=Arial]Country Kitty Crafts[/FONT][FONT=Arial]
    [/FONT] [FONT=Garamond]
    [/FONT]

  6. #6
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default Re: Extra images - alignment in header

    Thanks TShooters, I fixed that, but the problem still remains...
    Currently using ZEN CART v. 1.3.6

  7. #7
    Join Date
    Jan 2005
    Location
    Lake Havasu, AZ
    Posts
    1,149
    Plugin Contributions
    0

    Default 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 ?
    When the world gets in my face I say Have A Nice Day.
    * I DO Think and I HAVE BEEN Zenned - therefore, I AM * I donate - do you?
    Custom Templates and Zen Services CRS Designs, Inc.

  8. #8
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default 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:
    Code:
    .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?
    Currently using ZEN CART v. 1.3.6

  9. #9
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default Re: Extra images - alignment in header

    Here's my view source for that area:

    Code:
    <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&amp;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?
    Currently using ZEN CART v. 1.3.6

  10. #10
    Join Date
    Aug 2005
    Posts
    336
    Plugin Contributions
    0

    Default 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:
    Code:
    <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" />
    Currently using ZEN CART v. 1.3.6

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Adding extra images to the header (like flags & logos)
    By theAymen in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 9 Aug 2010, 09:26 PM
  2. header alignment
    By justerrt in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 6 Jul 2010, 02:48 PM
  3. Header alignment
    By webby2009 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 18 Dec 2009, 10:33 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR