...

View Full Version : Hi all, need help...resizable header & footer with 3 images and 1 logo overlaid?



ArchangelX
06-03-2009, 04:59 AM
Hi all,

I have searched pretty far and wide on the internet looking for an answer to this coding snafu. I've got something that works halfway decent, but I just can't seem to get it fully right. It's a header for my vBulletin forum.

I basically want to have a 3-piece header & footer that expands dynamically with the resizing of the browser window, but keeps the overlaid "logo" in position. I've gotten it to work halfway decently, but I cannot seem to keep the logo/text centered within the header or footer. I've tried everything from using margin-left&right: auto, to absolute and relative to get the center logo to stay in the middle, but it's just not working.

You can see the shoddy results of what I'm trying to do here.

http://www.hawaiitalks.net/forums.php

I would really appreciate some help in this...as it's simply beyound my grasp of the coding. I'm not sure if the code I'm working with is even valid, it's just what I was able to do on my own and it seems to work in FF, Safari, and IE.

Here's the code I'm using, and I assume I can use it to do what I need in both the header and the footer:



<!-- logo -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://www.hawaiitalks.net/styles/htstyle/images/logoleft.gif" width="468" height="141" border="0" alt="Hawaii Talks - Hawaii's Online Community Forums"></a></td>
<td width="100%" style="background-image: url(http://www.hawaiitalks.net/styles/htstyle/images/headerfill.gif); background-repeat: repeat-x;">
<div class="centerhd"><img src="http://www.hawaiitalks.net/styles/htstyle/images/logofloat.png" width="809" height="114"/></div>
</td>
<td><img src="http://www.hawaiitalks.net/styles/htstyle/images/logoright.gif" width="470" height="141" alt=""></a>
</td>
</tr>
</table>
<!-- /logo -->

Here's the CSS



.centerhd{ position:absolute; width:809px; height:114px; left:50px; top: 20px; z-index:1; }


Can anyone help me clean this up, or suggest how I can accomplish what I'm trying to do? I would appreciate it! Thank you!

ArchangelX
06-03-2009, 05:06 AM
Also, here's another stab that I tried with the footer area, both seem to work haflway decently, but I just can't get the logo to float properly. I have to use tables because vBulletin seems to use them to control the widths of the forums...I think.

This one, I included the styles within the DIVs and planned to take them to the separate CSS file once I figured it out properly. It was just easier to code this way.

Thanks a bunch!



<table cellpadding="0" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
<tr>
<td bgcolor="#0571a6" background="http://www.hawaiitalks.net/styles/htstyle/images/footerfill.gif">

<div style="width:100%; background-image:url('http://www.hawaiitalks.net/styles/htstyle/images/footerfill.gif'); background-repeat:repeat-x;">
<div style="float:left; z-index:1;"><img src="http://www.hawaiitalks.net/styles/htstyle/images/footerleft.gif" border="0" alt=""/></div>
<div style="float:left; position:absolute; right:10px; z-index:1;"><img src="http://www.hawaiitalks.net/styles/htstyle/images/footerright.gif" alt="" /></div>
<div class="smallfont" align="center" style="position:absolute; left: 400px; margin-right: auto; z-index:2">
<center>
$vbphrase[all_times_are_gmt_x_time_now_is_y]
<!-- Do not remove this copyright notice -->
$vbphrase[powered_by_vbulletin]
<!-- Do not remove this copyright notice -->
<!-- Do not remove cronimage or your scheduled tasks will cease to function -->
$cronimage
<!-- Do not remove cronimage or your scheduled tasks will cease to function -->
$vboptions[copyrighttext]
<img src="http://www.hawaiitalks.net/styles/htstyle/images/htfooterlogo.png" border="0" alt=""/>
</center>
</div>
</div>
</td>
</tr>
</table>

ArchangelX
06-05-2009, 04:42 AM
No ideas? Hmm...

ArchangelX
06-06-2009, 07:07 AM
Okay...if I can't get help on this...then could someone at least tell me how to float an image anywhere on the page using z-index and positioning? Thanks.

Kristofa
06-07-2009, 12:44 AM
Back to the original problem, try changing your CSS


.centerhd{ /*position:absolute;*/ width:809px; height:114px; /*left:50px;*/ margin:auto; top: 20px; z-index:1; }

ArchangelX
06-10-2009, 07:01 AM
Kristofa, thanks for the help, I will try that immediately!

ArchangelX
06-10-2009, 07:06 AM
Hmm...well, it centers it perfectly, but if you adjust the browser or change the resolution, the header is still the same width. :(

I'll try changing width to 100%

Kristofa
06-10-2009, 11:24 PM
Hmm...well, it centers it perfectly, but if you adjust the browser or change the resolution, the header is still the same width. :(

I'll try changing width to 100%

Do you mean the logo is the same width? The header resizes fine for me when I adjust me window. What browser are you using?

(Or have you put the code back to what it was originally, as the logo isn't centred for me right now...)

rmedek
06-11-2009, 12:32 AM
At first glance here's how I would do this, without overthinking things.

Get a few containers ready for your header. Since you can't have multiple background images, you would need at least three containers:


<div id="header">
<div>
<h1>Heading & Logo!</h1>
</div>
</div>

Define all your dimensions…


#header, #header div {
width: 100%;
height: 100px;
}

#header h1 {
width: 200px;
height: 75px;
}

…then add your background images. You have two nested containers, so you can align one image to the left and one image to the right. The image on top should have transparency in the right places so the other image can show through:


#header {
background: #000 url(left-image.png) no-repeat left top;
}

#header div {
background: transparent url(right-image.png) no-repeat right top;
}

Then add the image for the logo and position it in the center of everything:


#header h1 {
width: 200px;
height: 75px;
background: transparent url(logo.png) no-repeat center;
margin: 0 auto;
}

I didn't test this code or anything but the concept should make sense. Hope that helps…

ArchangelX
06-11-2009, 11:10 AM
Wow...thank you very, very much for the help. I will give this another go with your template in mind. Mahalo!

ArchangelX
06-14-2009, 10:51 PM
rmedek...I tried your solution and it worked...almost! The problem is that the middle header background has no background. Both the left, header, right sections work great, but right behind the header, there's just a huge blank spot. Is there any way to fill that area with a bg color or another image? Right now it's just empty. I tried applying background-color:#ffffff; to each of the divs but it's still empty.

ArchangelX
06-14-2009, 11:36 PM
I got it! I didn't realize the bg color was set before the bg url for the header. But anyways, to fill the background I just extended the size of the left header image out to about 1680 (for widescreen monitors like mine) and it looks great now, thanks so much! It's really appreciated!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum