Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / HELP needed on link ovelapped and not working

HELP needed on link ovelapped and not working

Locked

Views: 1,083

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
6 Jun 2009, 8:01 AM
#1
khuankhuan avatar

khuankhuan

New Zenner

Join Date:
Jun 2009
Posts:
2
Plugin Contributions:
0

HELP needed on link ovelapped and not working

I faced a problem whereby the link of my logo does not work as it is being overlapped by some sort of invisible things (i am not quite sure how to call or what it is) whereby i cannot click on my logo where it'll redirect me back to my homepage.

The link to my main page is:
http://yourjmart.com/

Sorry for the long codes posted here, but i was afraid that i might missing out the key to solve the problem.

Thanks for helping!

the code for the tpl_header.php is:

<!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="headerWrapper"> <div id="headerpic"> <!--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> <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?> <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> <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?> </div> <br class="clearBoth" /> <!--eof-branding display--> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul> <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li> <li><a href="http://yourjmart.com/">Help</a></li> <li><a href="http://yourjmart.com/index.php?main_page=contact_us">Contact Us</a></li> <?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<?php } else { if (STORE_STATUS == '0') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?> <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?> </ul> </div> <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div> <br class="clearBoth" /> </div> <!--eof-navigation display--> </div><!-- headerpic --> <div id="topmenubar"> <!--bof-header ezpage links--> <?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?> <?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?> <?php } ?> <!--eof-header ezpage links--> </div> <!--eof-header logo and navigation display--> <!--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--> </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 } } ?>

the related codes for my stylsheet.css are:

body {
color:#555;
font: 12px verdana, sans-serif;
background-color:#414042;
margin:0 15px;
/* background-image: url("../images/bg.gif"); */

}

#mainWrapper {
text-align: left;
vertical-align: top;
width:850px; /* sets the width of the store /
background-color:#fff; /
gives the store a white background */
margin-bottom: 10px;
}

#mainWrapper {
text-align: left;
vertical-align: top;
}

/* main content area */
#contentMainWrapper {
margin:0;
padding: 0;
}

#headerpic {
position: relative;
background: url('../images/header-bg.gif');
background-repeat: repeat-x;
height: 78px;
width: 850px;
}

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#headerWrapper {
margin-bottom: 20px;
padding: 0em;
background-color: #fff;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #csNotifications, #navEZPagesTOCWrapper {
margin: 10px 0px;
width: 46%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/* HEADER */
#navMainWrapper {
color: #fff;
position: absolute;
padding-top: 55px;

top: 0px;
left:0;
}

#navMainWrapper a:link , #navMainWrapper a:visited {
color: #fff;
text-decoration:none;

}

#navMainWrapper a:hover {
color: #675C45;

}

#nameWrapper {
padding:25px 0 10px 30px;
}

#nameWrapper a, #nameWrapper a:visited {
font-size:25px;
text-decoration:none;
color:#fff;
font-weight:normal;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#topmenubar {
/* background: url("../images/menubar.gif");
background-repeat: no-repeat;

width: 850px;
height: 55px;
*/
color: #8B0C40;
background-color: #000;
height: 25px;
}

#navMainSearch {
margin:3px 15px 0 0;
text-align: right;
}

#navMainSearch input {
font-size: 11px;
}

#navMainSearch .topsearchbutton {
border:1px solid #D5CAB2;
color: #fff;
background-color: #675c45;
}

#navMainSearch .topsearchfield {
border:1px solid #675C45;
color: #8C8370;
padding: 1px;
background: #fff;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
font-weight: normal;
height: 1%;
width: 100%;
}

#navMain {
padding-right: 7px;
}

#navMain ul {
margin: 0;
padding: 2px 5px;
list-style-type: none;
text-align: right;
line-height: 18px;
}

#navSupp ul, #navCatTabs ul {
margin: 0;
padding: 2px 5px;
list-style-type: none;
text-align: center;
line-height: 18px;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
white-space: nowrap;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
}

#navMain ul li {

}

6 Jun 2009, 8:35 AM
#2
aliepinieks avatar

aliepinieks

Zen Follower

Join Date:
Jun 2009
Location:
Brisbane, QLD AUS
Posts:
209
Plugin Contributions:
0

Re: HELP needed on link ovelapped and not working

to be honest i'm just about to sign off for the evening, but i had the same problem a little while ago and it had to do with the CSS, not the PHP.

it was the the order each container is loaded, and one div just happenned to overlap the other but was placed on-top. unfortunately i needed the whitespace (or transparent space), however you may not. containers in your page (to the best of my knowledge) are loaded sequentially, so if you have a container further down in the page, it will appear "in front" of other containers should your CSS positioning dictate this. hence you need to do one of two things: a), re-assign the z-index on the offending container or the affected container (which may be a problem if both contain links), or alternatively, find out where the additional whitespace (or transparent space) is coming from and fix it.

sorry for the very ambiguous reply, but i gotta go!

good luck
andrejs

6 Jun 2009, 10:33 AM
#3
khuankhuan avatar

khuankhuan

New Zenner

Join Date:
Jun 2009
Posts:
2
Plugin Contributions:
0

Re: HELP needed on link ovelapped and not working

Yea i knew its the problem with the css stylesheet, as when i replaced the stylesheet with default there are no such problem. Thanks for the z-index suggestion, i did managed to solve the problem. However, can you show me which line or code that made the white space? so that i can avoid doing so next time. Thanks again!

8 Jun 2009, 5:25 AM
#4
aliepinieks avatar

aliepinieks

Zen Follower

Join Date:
Jun 2009
Location:
Brisbane, QLD AUS
Posts:
209
Plugin Contributions:
0

Re: HELP needed on link ovelapped and not working

to be honest i still have the same problem, and spent hours looking for a reason without success. changing the z-index was the only thing i could find to work, so at this point i simply accepted it, and intend addressing this in a few weeks. so while i don't have an answer for you now, i can assure you if and when i find it, i will reply to this post then. for now however i have to say sorry!

andrejs

8 Jun 2009, 7:12 AM
#5
bgallagher avatar

bgallagher

New Zenner

Join Date:
Feb 2008
Posts:
41
Plugin Contributions:
0

Re: HELP needed on link ovelapped and not working

Divs that overlaping most likely will prevent a link from functioning properly even when you set z-indexs.
Make sure that none of your div areas are overlaping.
Your best bet at this point is to add borders to the div tag styles that make up your containers / wrappers and look to see exactly where all of your divs are lining up on your pages then methodicly manupulate your div classes attributes to move the information around on the page untill everything is in the places where you want them.
When your doing this make the divs with and hight are exactly the same as the width and height of the areas of information that will be seen.
you may need to clear some of the attributes set in place by previous divs. this can be done by adding clear:all; or clear:both; to the div style.

The overlaping of the divs and links can be a nasty thing to deal with when customizing Zen Cart.