Header section not coming together right
|
moogen
Joined: 2005-05-29
Posts: 4 |
Posted: Mon, 2005-05-30 16:59
|
|
My boyfriend finally found a work around to my problem for now, but it doesnt look exactly how I like it. What I was trying to do is insert my header section (which is a table plus some javascripting for mouse overs... i took the javascripting out of this example just for simplicity) into the global.tpl file (located in the local folder). The issue that I am having, is that for some reason, there is a small space in between the images. I'm sure there is some easy solutions to this... but we just don't know exactly where we need to be looking. HERE IS THE CODE THAT I HAVE ALTERED {*
* $Revision: 1.61 $
* If you want to customize this file, do not edit it directly since future upgrades
* may overwrite it. Instead, copy it into a new directory called "local" and edit that
* version. Gallery will look for that file first and use it if it exists.
*}
{*
* This is the master template for G2. Every page will be rendered using
* this file, so if you make changes here, they'll apply everywhere.
*
* Blocks inside {curly brackets} are callbacks to the Smarty
* templating engine so you should handle those with care. We've put
* comments in below explaining what they are to help you figure out
* how to safely make changes.
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
{* This should help out users whose browsers are confused about the character set *}
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
{* Content that G2 wants to display inside the <head> element *}
{g->head}
</head>
<body class="gallery" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div id="gallery"{if $main.isRightToLeft} style="direction:rtl"{/if}>
<div id="gsHeader" style="height:96px;">
<table cellspacing=0 cellpadding=0 border=0 width=100% height=100%>
<tr><!--TOP OF PAGE-->
<td height="52" colspan=2 bgcolor="red" align="left" valign="top"><img src="http://www.familyupdates.info/images/enter-top.jpg" height="52" width="760"></td>
</tr>
<tr>
<td height="27" width=103 bgcolor="white" align="left" valign="top"><img src=images/enter-house-middle.jpg height="27" width="103"></td>
<td height="27" width=100% background="http://www.familyupdates.info/images/enter-middleBG.png" align="left" valign="top"><img src="http://www.familyupdates.info/images/enter-middle-top.jpg" width="657" height="9"><br><img src="http://www.familyupdates.info/images/transparentlarge.gif" width=300><a href="http://forum.familyupdates.info"><img src="http://www.familyupdates.info/images/forum1.png" border="0"></a><img src="http://www.familyupdates.info/images/transparentlarge.gif"><a href="http://gallery.familyupdates.info"><img src="http://www.familyupdates.info/images/gallery1.png" border="0"></a><img src="http://www.familyupdates.info/images/transparentlarge.gif"><a href="http://www.familyupdates.info/calendar.html"><img src="http://www.familyupdates.info/images/calendar1.png" border="0"></a><img src="http://www.familyupdates.info/images/transparentlarge.gif"><a href="http://www.familyupdates.info/contact.html"><img src="http://www.familyupdates.info/images/contact1.png" border="0"></a></td>
</tr>
<tr>
<td background="http://www.familyupdates.info/images/middlebottomBG.png" align="left" colspan=2 valign="top" height="17"><img src="http://www.familyupdates.info/images/enter-house-bottom.jpg" height="17" width="103"></td>
</tr>
</table>
</div>
{* Content that G2 wants to display inside the <body> element *}
{include file="gallery:`$main.viewBodyFile`" l10Domain=$main.viewL10Domain}
<div id="gsFooter">
<a href="{$main.validationUri}"><img
src="{g->url href="images/xhtml10.png"}"
alt="{g->text text="This page is valid XHTML 1.0"}"
style="border-style: none" width="80" height="15"/></a>
<a href="http://gallery.sourceforge.net"><img
src="{g->url href="images/gallery.gif"}"
alt="{g->text text="Gallery %s" arg1=$main.gallery.version}"
title="{g->text text="Gallery %s" arg1=$main.gallery.version}"
style="border-style: none" width="80" height="15"/></a>
<a href="{g->url href="modules/core/data/g2b3-bingo.wav"}"><img
style="border: 0px"
src="{g->url href="modules/core/data/g2b3-bingo.png"}"
alt="{g->text text="Gallery 2 - Beta 3: Bingo!"}"
height="15"
width="80"/></a>
</div>
</div>
{* If debugging or profiling is enabled, we'll display it here *}
{if isset($main.debug) || isset($main.profile)}
{include file="gallery:templates/debug.tpl"}
{/if}
</body>
</html>THIS IS A SCREENSHOT OF THE RESULT: The Problem I made the BG color of the table red so the gap would be more viewable. I think we may have changed the names of some of the images... so it looks very jumbled.. i can fix that later.... My MAIN concern is the gap that is in between the first layer of images and the next. We have tried everything that we can think of and stuck with a work around.. but i am not so pleased with the results in IE so i would really like to get our original header to work. THIS IS WHAT IT SHOULD LOOK LIKE: Any help is VERY much appreciated! |
|
Posts: 8601
hard to tell, but maybe style="display: block" on the big image would help.
Posts: 4
Hmmmmmmm.... well... it was a good try. It did succeed in closing the gap between the first two images. However, it unfortunately caused a gap between the remaining images. I added the code to them as well and it seemed to make it worse. :cry:
Any other suggestions?
Thanks :D