Quick tip: Header area bigger than header itself

[xlopez]

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

[xlopez]

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

[xlopez]

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

[brandtim]

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

[dbltoe]

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

[dbltoe]

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

<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&amp;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&amp;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.

[xlopez]

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!

[dbltoe]

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;
}

[xlopez]

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.

[dbltoe]

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!