Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    <!-- 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

    Code:
    .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!

  • #2
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

    Code:
    <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>
    Code:
    
    

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No ideas? Hmm...

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Back to the original problem, try changing your CSS

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

  • #6
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Kristofa, thanks for the help, I will try that immediately!

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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%

  • #8
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by ArchangelX View Post
    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...)

  • Users who have thanked Kristofa for this post:

    ArchangelX (06-11-2009)

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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:

    Code:
    <div id="header">
       <div>
          <h1>Heading & Logo!</h1>
       </div>
    </div>
    Define all your dimensions…

    Code:
    #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:

    Code:
    #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:

    Code:
    #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…

  • Users who have thanked rmedek for this post:

    ArchangelX (06-11-2009)

  • #10
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow...thank you very, very much for the help. I will give this another go with your template in mind. Mahalo!

  • #11
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #12
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •