Banner Problem

[zaandrei]

I have a problem with my banner. I have a left centered image, a pattern .png file, and another right aligned .png. The site logo .png is centered on the pattern part, when I want it to be offset by about 150 pixels from the left hand side. When i try to make the browser window small the pattern only gets retracted (squished) enough so that the logo file fits, it doesn't go smaller (width wise). I want it to be over the left aligned image!

Here is my Banner code:

<a name="top"></a>

<div id="wrapheader">
	<!-- IF ADS_1 -->{ADS_1}<br /><!-- ENDIF -->

	<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td>
			<table style="height:40;" width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td><img src="{T_THEME_PATH}/images/header/h11.png" width="40" height="40" alt="" /></td>
				<td><img src="{T_THEME_PATH}/images/header/h12.png" width="100" height="40" alt="" /></td>
				<td style="background:url({T_THEME_PATH}/images/header/h13.png) repeat;" width="100%" height="40"></td>
				<td><img src="{T_THEME_PATH}/images/header/h14.png" width="100" height="40" alt="" /></td>
				<td><img src="{T_THEME_PATH}/images/header/h15.png" width="40" height="40" alt="" /></td>
			</tr>
			</table>
			</td>
		</tr>
		<tr>
		<td>
			<table style="height:140;" width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td><img src="{T_THEME_PATH}/images/header/h21.png" width="40" height="140" alt="" /></td>
				<td><img src="{T_THEME_PATH}/images/header/h22.png" width="600" height="140" alt="" /></td>
				<td style="background:url({T_THEME_PATH}/images/header/h23.png) repeat;" width="100%" height="140">
			
					<div id="logodesc" style="text-align: center;">
						<table width="100%" cellspacing="0">
							<tr>
								<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
							</tr>
						</table>
					</div>
				</td>
				<td><img src="{T_THEME_PATH}/images/header/h24.png" width="200" height="140" alt="" /></td>
				<td><img src="{T_THEME_PATH}/images/header/h25.png" width="40" height="140" alt="" /></td>
			</tr>
			</table>
		</td>
		</tr>
		<tr>
		<td>

If you need more information... please ask!

 

[Murder he Wrote]

From what I can see,

This image = http://computergamingheaven.co.cc/style ... er/h22.png is 642px wide, your logo is then 480px wide and this one = http://computergamingheaven.co.cc/style ... er/h24.png = 200px.

So it gives the illusion that there pattern is the background image and there's a logo over it, when in fact the three are all next to each other. Because they're all next to eachother, the header is stuck at 1322px (and another 80px to account for the margins at the side).

So, here's how to sort the problem out....

Find and Delete:

<td width="100%" height="140" style="background: transparent url(./styles/X-Treme/theme/images/header/h23.png) repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
			
					<div style="text-align: center;" id="logodesc">
						<table width="100%" cellspacing="0">
							<tbody><tr>
								<td><a href="./index.php"><img width="480" height="80" title="" alt="" src="./styles/X-Treme/imageset/site_logo.png"/></a></td>
							</tr>
						</tbody></table>
					</div>
				</td>

Find:

<td><img width="600" height="140" alt="" src="./styles/X-Treme/theme/images/header/h22.png"/></td>

Replace with:

<td width="100%" colspan="2" style="background-image: url('./styles/X-Treme/theme/images/header/h22.png'); background-repeat: no-repeat; text-align: center;"><a href="./index.php"><img width="480" height="80" style="margin-left: 39%;" src="./styles/X-Treme/imageset/site_logo.png" alt="" title=""/></a></td>

Replace your h22.png with this one one (it will help to accommodate wide screens): http://a.imagehost.org/dl/d3c8d1dc3eb4b ... 625/22.png (So download that image, rename to h22.png and overwrite the old one).

That should make the banner scroll with the rest of the screen, as well as as off-center the logo.

Let me know how it works out. 🙂

 

[zaandrei]

I'm sorry but the first code box you supplied me with... I cannot find ANY of the information. I've been searching for about 20 minutes now. It is not placed in any of the code i supplied to you so i searched the whole overall_heaver.html file =/

The "Find & Delete" part

EDIT: Actually I couldn't find any of the "find" parts. I'm sorry but I'm very new at these things.

The closest thing I found was:

<td><img src="{T_THEME_PATH}/images/header/h22.png" width="600" height="140" alt="" /></td>

If you don't mind. Could you modify the script i gave you so that i just have to copy and paste it over the one i have right now? Because I think you are expecting me to know this... which i should. But I'm very newbie at this 😛 You help is GREATLY appreciated. Thank you!!! 😀

 

[Bapinder]

I think it is fine now.

 

[Murder he Wrote]

Ah of course, I was viewing your code through a firefox add-on, and forgot that most things would show up in the {T_THEME_PATH} format when you came to edit the files.

Still, looks as though you've been able to fix it 🙂

 

[zaandrei]

It is very close to what I want it to be but not exactly what I want. Could you left align the logo image so that it floats about 150 pixels from the left at all times? Because when i try to shrink the browser horizontally, at one point the banner is wider than the forums and the navigation bar!

 

[zaandrei]

Never mind! I was able to fix it myself after all. Now I have to find a way to make it shrink enough as that it goes as far as the Nav bar! Thank you guys for your help! I am so happy I'm actually learning how to use phpBB3 🙂

Hmm, when you are logged in the Nav bar is wider than it is when you are in guest mode.

 

[Murder he Wrote]

Well, on a 1024x768 resolution (the most common) it looks fine. The percenatage of users using 800x600 is around 4% according to W3C -> http://www.w3schools.com/browsers/browsers_display.asp

So really, there's nothing to worry about. It's not worth it really.

 

[zaandrei]

Hmm that is true. Thank you for the stats! I think I will make my forum centered and a specified number of pixels wide, that will fix ALL my problems! 😀

+rep! Thx!