Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Quick tip: Header area bigger than header itself

Quick tip: Header area bigger than header itself

Locked

Views: 3,562

Results 1 to 18 of 18
This thread is locked. New replies are disabled.
31 Jul 2007, 10:08 PM
#1
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Quick tip: Header area bigger than header itself

If you go to joyeriasuny.com/joyeria you'll notice that there's an empty space to the left and right of the flash object .

<div id="logoWrapper" align="center">

		
		 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="678" height="331">
              <param name="movie" value="/prueba/flash/BIG.swf">
              <param name="quality" value="high">
              <embed src="/prueba/flash/BIG.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" ></embed>
		    </object>
		
    </div>

This is how I've placed the object in Flash. I've been searching inside de tpl_header/mainpage files as well as the stylesheets but I can't find a configuration for this problem. I suppose this is simple so you guys should understand this. Thanks a lot!

EDIT 1: edited the address, it was previously joyeriasuny.com/prueba

1 Aug 2007, 12:56 AM
#2
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

I found this ```
*/
#logoWrapper{
background-image: none;
background-repeat: repeat-x;
background-color: #522900;
height:45px;
}


When I set the height to 0px the problem dissappears but the main page goes to the top (The  Home categories bit).
3 Aug 2007, 4:34 AM
#3
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

Wow thanks a lot for your support "Totally Zenned" ones. You've been pretty quick when needed. :dontgetit

4 Aug 2007, 10:00 PM
#4
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

I've looked at your site but I'm afraid I fail to understand what the problem is. Can you provide a mock-up of the way you want the site to look?

BrandTim

6 Aug 2007, 12:51 AM
#5
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,763
Plugin Contributions:
9

Re: Quick tip: Header area bigger than header itself

Agreed. And you might make the site link an actual link. Our older eyes sometimes miss the non-link when looking through the trifocals.

6 Aug 2007, 12:58 AM
#6
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,763
Plugin Contributions:
9

Re: Quick tip: Header area bigger than header itself

Not sure if this will help what's wrong but the current page source shows```php

<div id="headerWrapper"> <!--bof-navigation display--> <!--<div id="navMainWrapper"> <div id="navMain"> <ul class="back"> <li><a href="http://joyeriasuny.com/joyeria/">Home</a></li> <li><a href="http://joyeriasuny.com/joyeria/index.php?main_page=login&zenid=***DELETED***">Log In</a></li> </ul> </div>>--<!-- <div id="navMainSearch"></div> <br class="clearBoth" /><-- </div> <!--<!--eof-navigation display <!--bof-branding display--> <div id="logoWrapper" align="center"> ```The items in red are incorrect methods of commenting.> <div id="headerWrapper"> > <!--bof-navigation display--> > <!--<div id="navMainWrapper"> > <div id="navMain"> > <ul class="back"> > <li><a href="http://joyeriasuny.com/joyeria/">Home</a></li> > <li><a href="http://joyeriasuny.com/joyeria/index.php?main_page=login&zenid=***DELETED***">Log In</a></li> > </ul> > </div>>--<!-- > <div id="navMainSearch"></div> > <br class="clearBoth" /><-- > </div> > <!--<!--eof-navigation display > <!--bof-branding display--> > <div id="logoWrapper" align="center">Hope this helps some.
6 Aug 2007, 1:08 AM
#7
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

Sorry. I have attached two pictures. One shows the working version, without the empty brown space to the left and to the left of the flash header, and one that blends the flash header seamlessly into the design (no empty space). Thanks again for your time.

I can't edit those comments out, it screws up what I intend to do, as that adds a bar with items to the top and it doesn't correct the problem anyway. I thank you for the suggestion but that's not the problem I've highlighted with the pictures. Thanks!

6 Aug 2007, 1:21 AM
#8
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,763
Plugin Contributions:
9

Re: Quick tip: Header area bigger than header itself

in the css, change> /wrappers - page or section containers/

#mainWrapper {
background-color: #522900;
text-align: center;
width: 960px;
vertical-align: top;

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

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}*/ to > /wrappers - page or section containers/
#mainWrapper {
/background-color: #522900;/
text-align: center;
width: 960px;
vertical-align: top;

}

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

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
/background-color: #ffffff;/
height:75px;
}

6 Aug 2007, 1:47 AM
#9
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

After making those changes, the "Home. Categories" part would show up at 75 pixels below the top. I made the arrangements for it to show 331 px down and it works like a charm. Thanks a lot for the suggestion. It worked perfectly.

6 Aug 2007, 2:11 AM
#10
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,763
Plugin Contributions:
9

Re: Quick tip: Header area bigger than header itself

Glad to help. Invest in a copy of FireFox with the Firebug add-on. It will help you to see where items are inheriting color, size, etc. from other parts of the stylesheet. Should also help discover why the shift between the Flash and the main content.

And...they're both FREE!

6 Aug 2007, 4:28 AM
#11
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

Wow Firefox gets even better. I have solved that problem thanks to you. I have another problem though. If you try accessing http://www.joyeriasuny.com/joyeria you'll see how "Home - There are no Categories" will appear right below the tables I inserted. I inserted these tables in the tpl_mainpage.php file. This is how it goes:

<?php
/**
 * Common Template - tpl_main_page.php
 *
 * Governs the overall layout of an entire page<br />
 * Normally consisting of a header, left side column. center column. right side column and footer<br />
 * For customizing, this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * - make a directory /templates/my_template/privacy<br />
 * - copy /templates/templates_defaults/common/tpl_main_page.php to /templates/my_template/privacy/tpl_main_page.php<br />
 * <br />
 * to override the global settings and turn off columns un-comment the lines below for the correct column to turn off<br />
 * to turn off the header and/or footer uncomment the lines below<br />
 * Note: header can be disabled in the tpl_header.php<br />
 * Note: footer can be disabled in the tpl_footer.php<br />
 * <br />
 * $flag_disable_header = true;<br />
 * $flag_disable_left = true;<br />
 * $flag_disable_right = true;<br />
 * $flag_disable_footer = true;<br />
 * <br />
 * // example to not display right column on main page when Always Show Categories is OFF<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 * <br />
 * example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_main_page.php 6564 2007-07-05 20:35:51Z drbyte $
 */

// the following IF statement can be duplicated/modified as needed to set additional flags

  if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
    $flag_disable_right = true;
  }


  $header_template = 'tpl_header.php';
  $footer_template = 'tpl_footer.php';
  $left_column_file = 'column_left.php';
  $right_column_file = 'column_right.php';
  $body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<?php
  if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>


<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>





  <tr>
<?php
if (COLUMN_LEFT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) {
  // global disable of column_left
  $flag_disable_left = true;
}
if (!isset($flag_disable_left) || !$flag_disable_left) {
?>

 <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<?php
 /**
  * prepares and displays left column sideboxes
  *
  */
?>
<table width="100%" height="100%"  border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
    
    <td width="680" height="100%" valign="top" align="center" background="images/back-right.jpg" style="background-repeat:repeat-x;background-position:top">
		<table width="680" height="100%"  border="0" cellspacing="0" cellpadding="0">
		
			<td height="100%" valign="top" align="center">
				<table width="678" height="100%"  border="0" cellspacing="0" cellpadding="0" background="/prueba/images/back-end.jpg" style="background-repeat:repeat-y;background-position:top">
				<tr>
					<td width="678" height="500" valign="top">
						<table width="678" height="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="339" height="500" valign="top" background="/prueba/images/back-tab.jpg" style="background-repeat:repeat;background-position:top left;padding-left:12px"> </td>
							
						  <td width="1" height="100%" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="1"></td>
							
							<td width="338" height="100%" valign="top" align="left" background="/prueba/images/back-tab.jpg" style="background-repeat:no-repeat;background-position:top right"> </td>							
						</tr>
						</table>
					</td>
				</tr>				
				<tr>
					<td><img src="/prueba/images/line-1.jpg" width="678" height="11"></td>
				</tr>
				<tr>
					<td height="100%" valign="top" align="center" style="color:#000000;font-size:9px">
						<div style=" padding-top:7px;padding-bottom:0px">
							<TABLE WIDTH=278 height="22" BORDER=0 CELLPADDING=0 CELLSPACING=0>
								<TR>
									<TD><a href="index-1.html"><IMG SRC="/prueba/images/case-10.jpg" WIDTH=50 HEIGHT=22 ALT=""></a></TD>
									<TD><a href="index-2.html"><IMG SRC="/prueba/images/case-11.jpg" WIDTH=56 HEIGHT=22 ALT=""></a></TD>
									<TD><a href="index-3.html"><IMG SRC="/prueba/images/case-12.jpg" WIDTH=62 HEIGHT=22 ALT=""></a></TD>
									<TD><a href="index-4.html"><IMG SRC="/prueba/images/case-13.jpg" WIDTH=57 HEIGHT=22 ALT=""></a></TD>
									<TD><a href="index-5.html"><IMG SRC="/prueba/images/case-14.jpg" WIDTH=53 HEIGHT=22 ALT=""></a></TD>
								</TR>
							</TABLE>
						</div>
						<span class="style1">2007 © Joyeria Suny, inc. All rights reserved. Read <a href="#" style="color:#E4E5E7">Legal policy</a> and <a href="index-6.html" style="color:#E4E5E7">Privacy policy.</a>					    </span></td>
				</tr>
				</table>
			</td>
		</tr>				
		</table>
	</td>
    
</tr>
</table>
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td>
<?php
}
?>
    <td valign="top">
<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

<?php
  if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<!-- bof upload alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<!-- eof upload alerts -->

<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>

<?php
  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?></td>


<?php
if (COLUMN_RIGHT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) {
  // global disable of column_right
  $flag_disable_right = true;
}
if (!isset($flag_disable_right) || !$flag_disable_right) {
?>
<td id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">
<?php
 /**
  * prepares and displays right column sideboxes
  *
  */
?>
<div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div></td>
<?php
}
?>
  </tr>
</table>

<?php
 /**
  * prepares and displays footer output
  *
  */
  require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
</div>
<!--bof- parse time display -->
<?php
  if (DISPLAY_PAGE_PARSE_TIME == 'true') {
?>
<div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>
<?php
  }
?>
<!--eof- parse time display -->
<!--bof- banner #6 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof- banner #6 display -->
</body>

I want that text(and all categories and all other store pages to show up on TOP of the layout tables I created. How am I supposed to do that? Thanks!

6 Aug 2007, 4:59 AM
#12
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

Just in case you didn't understand (I can't edit the other post) what I want is the text to be inside those tables, because that's my site design, not actually ON TOP as that m ay imply having the message above the tables. Thanks again.

6 Aug 2007, 5:32 AM
#13
brandtim avatar

brandtim

Zen Follower

Join Date:
Apr 2006
Posts:
250
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

Again, a little unclear as to what you are trying to accomplish.

The main content is from these lines:
<td valign="top">

<!-- bof breadcrumb -->

to these lines:

<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div> <?php } } ?></td>

So you can just put all of that in whatever table cell you want. Except that you've put your 4-levels deep tables inside the left sidebar.

It might be easier for you to move your tables to right after the <body> tag, populate your site, then see what php code generates what display. Much easier to move stuff into the appropriate place then.

Also, check this out:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fjoyeriasuny.com%2Fjoyeria%2F

106 errors in your markup. It will be a lot easier for you down the road if you get your markup valid. (Especially fixing those comments that dbltoe mentioned. Yes, it breaks things when you remove them but you've done them very wrong and that's going to screw your cross-browser compatibility.)

Give yourself a little time to explore how ZC generates a page and it will dramatically shorten the time you spend trying to fudge things into place later...

BrandTim

6 Aug 2007, 6:07 AM
#14
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

I see... By "patching things up" I may make my work harder down the line. I'll look into that. In the meantime, I will try to explain as best as possible.

My layout consists of TEST PAGE As you can see, there's the flash header and right below it the table that you can see at the Zen-Cart Store. What I want to do is make that layout the default for every page in joyeriasuny.com. Now, in order for zen-cart to recognize those gray tables, I need to place them somewhere in the tpl_mainpage.php file. In the picture below, you will see what happens when I try to insert the table code right after the ```

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>> ``` part. If I put it down below, I get the header at the top, the "Categories text" after that and then below that the tables. So if you're following me, what I want to do is have the "Categories" text in place so that the gray table is the default content background that houses all the text, categories, images, etc. It seems that anywhere I put it, it either gets it on top or below the tables. If you still don't understand, try and see the other picture. That's how I want the store to look like. Thanks a lot for your patience and time, Zenners.
11 Aug 2007, 8:55 PM
#15
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

I can't be anymore clear to you. Not being familiar with css and php, I just needed a few things to iron out the main page so that I could start working on categories,images and products. I've explained my troubles and thank for the help you've given me, but if you're asking me to explain things to you and then you just ignore this thread for the next week, why does this exist, then? This is very important to me, and every week I take is lost money and time. Between college and other responsibilities, I try to accommodate time so I can deal with some zen-cart troubleshooting, but if you don't help me out , then this official stylesheet forum is simply not what it should be. I think I don't need to explain anything else regarding what I want. Thank you.

12 Aug 2007, 12:15 AM
#16
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,763
Plugin Contributions:
9

Re: Quick tip: Header area bigger than header itself

You mention that you are unfamiliar with css and php. That is obvious in that you appear to be trying to lay out the description of categories with no categories even in your cart. You should not have to include any tables in the layout pages of Zen-Cart to "match your cart." php is a server-side language and, in this case mainly setups up the framework for pages. The css is set up with wrappers that literally wrap the area and help to make it look like you want. Neither of these requires any manipulating of core files. There are defines for descriptions, categories, etc. elsewhere in the system without trying to add html coding to other pages. Admin switches control numbers and placement of category and other descriptions.

You have apparently followed all suggestions with another foray into the code to "fix" something. Yes, you ARE only making things harder for your self in the long run.

You are also going to make it very difficult for anyone to want to help when you complain that you are not getting quick enough responses. Those of us who have a little time to respond are volunteers and, like it or not, if I want to go fishing for two or three days, you are on your own. No one here is your employee and therefore you cannot demand service. If your project is so important, head on over to commercial help wanted and enter your request. I doubt you will find many willing to sit, fingers poised, over the keyboard even with them as an employee.

Why is it that when someone says I can't be any clearer, it's generally because someone said they didn't understand. Well, I've looked at what you have said and don't understand either.

If you'll read the link in my sig, it describes for you what might help you in the future since, in your opinion, brandtim and I are unable to fathom clear thought.

15 Aug 2007, 5:03 PM
#17
xlopez avatar

xlopez

New Zenner

Join Date:
Jul 2007
Posts:
13
Plugin Contributions:
0

Re: Quick tip: Header area bigger than header itself

Regarding the waiting time for response, I am sorry. I thought you were a kind of official moderators that hang out here in your free time, so I thought it would have been irresponsible if you asked questions and ignored the case for days. I have no idea why you don't understand what I want to do, but maybe it's just that you know so much, that doing what I want to do is so stupid you don't know what I'm saying! The only thing I wanted, is the layout of the Zen-Cart Store(directory) to match the design of the main page that isn't actually a store. But oh well, I think I'll give up zen-cart, or just try a default template where I don't have to customize tables so much, like most people. I thank you for all the suggestions you have given me, and I will not forget them. Again, I am sorry for acting so demanding of assistance, when you're just a regular guy like me that knows a lot. Thank you.

15 Aug 2007, 7:37 PM
#18
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Quick tip: Header area bigger than header itself

As far as I can tell, you are still trying to put your tables in one block and then wishing other content would go inside them.
You need to put your table code around the content that you want inside, as brandtim says in post 13.

Any other shopping cart program is going to require the same kind of treatment, too. What you are trying to do isn't all that complicated; you just need some understanding of how code works.