Problem with Fluid Header

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Girlonthehill
    New Member
    • Jul 2006
    • 26
    • 3.7.x

    Problem with Fluid Header

    We are attempting to make our header logo fluid. We have, for the most part, achieved this by using the following code:

    Image Paths > Title Image Code:

    <a href="index.php"><img border="0" src="http://signoholics.com/images/misc/leftxmas.gif" width="345" height="215" /></td> <td height="215" width="100%" style="background-image: url(http://signoholics.com/images/misc/middlexmas.gif);" align="center"></td> <td width="604" height="215" align="right" valign="top" nowrap="nowrap"> <img src="http://signoholics.com/images/misc/rightxmas.gif" width="604" height="215" alt="" border="0" /></a></td>
    Header template logo code:

    <!-- logo -->
    <a name="top"></a>
    <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" >
    <tr>
    <td align="left"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]</a></td>
    </td>
    </tr>
    </table>
    <!-- /logo -->
    However, as you can see in the attached image - we have an issue. We cannot get rid of the little red x which, according to the properties, is called: http://www.signoholics.com/s_forum/%3Ctd%20align=

    We are still learning lots and have probably made many errors but we have tried all sorts and cannot sort this. Please, if someone can help us out here, we'd be very grateful.
    Attached Files

  • Jose Amaral Rego
    Senior Member
    • Feb 2005
    • 11058
    • 1.1.x

    #2
    This seems to work on IE, Opera and FF

    Code:
    <!-- logo -->
    <a name="top"></a>
    <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" >
    <tr>
    <td align="left"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><a href="index.php"><img border="0" src="http://signoholics.com/images/misc/leftxmas.gif" width="345" height="215" /></td> <td height="215" width="100%" style="background-image: url(http://signoholics.com/images/misc/middlexmas.gif);" align="center"></td> <td width="604" height="215" align="right" valign="top" nowrap="nowrap"> <img src="http://signoholics.com/images/misc/rightxmas.gif" width="604" height="215" alt="" border="0" /></a></td></a></td>
    </td>
    </tr>
    </table>
    <!-- /logo -->
    More of a custom html coding then anything to do with vBulletin options and setting
    PHP & HTML Questions or vB.org

    Comment

    • Girlonthehill
      New Member
      • Jul 2006
      • 26
      • 3.7.x

      #3
      Originally posted by Jose Amaral Rego
      This seems to work on IE, Opera and FF

      Code:
      <!-- logo -->
      <a name="top"></a>
      <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" >
      <tr>
      <td align="left"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><a href="index.php"><img border="0" src="http://signoholics.com/images/misc/leftxmas.gif" width="345" height="215" /></td> <td height="215" width="100%" style="background-image: url(http://signoholics.com/images/misc/middlexmas.gif);" align="center"></td> <td width="604" height="215" align="right" valign="top" nowrap="nowrap"> <img src="http://signoholics.com/images/misc/rightxmas.gif" width="604" height="215" alt="" border="0" /></a></td></a></td>
      </td>
      </tr>
      </table>
      <!-- /logo -->
      More of a custom html coding then anything to do with vBulletin options and setting
      PHP & HTML Questions or vB.org
      Thank you so much, Jose. I encountered problems when posting this originally and only realised today that I had double posted. My apologies.

      While I am here, I have used the code you provided above for a new fluid header I am working on. I have a slight alignment problem though. (Please see attached image). Here is my code:

      <!-- logo -->
      <a name="top"></a>
      <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" >
      <tr>
      <td align="left"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><a href="index.php"><img border="0" src="http://areyouanartist.com/images/index_header_left.gif" width="461" height="101" /></td> <td height="101" width="100%" style="background-image: url(http://areyouanartist.com/images/ind...der_middle.gif);" align="center"></td> <td width="273" height="101" align="right" valign="top" nowrap="nowrap"> <img src="http://areyouanartist.com/images/index_header_right.gif" width="273" height="101" alt="" border="0" /></a></td></a></td>
      </td>
      </tr>
      </table>
      <!-- /logo -->
      Any ideas?
      Attached Files

      Comment

      • Jose Amaral Rego
        Senior Member
        • Feb 2005
        • 11058
        • 1.1.x

        #4
        Try using this method
        Code:
        <!-- logo -->
        <a name="top"></a>
        <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center">
        <tr>
        	<td width="461" height="101" style="background-image: url(http://areyouanartist.com/images/index_header_left.gif);" align="left" nowrap="nowrap" alt="" border="0" /></a></td>
        	<td height="101" width="100%" style="background-image: url(http://areyouanartist.com/images/index_header_middle.gif);" align="center"></td>				
        	<td width="273" height="101" align="right" valign="top" nowrap="nowrap">
        	<img  src="http://areyouanartist.com/images/index_header_right.gif" width="273" height="101" alt="" border="0" /></a></td>
        </tr>
        </table>
        <!-- /logo -->

        Comment

        • Girlonthehill
          New Member
          • Jul 2006
          • 26
          • 3.7.x

          #5
          Originally posted by Jose Amaral Rego
          Try using this method
          Code:
          <!-- logo -->
          <a name="top"></a>
          <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center">
          <tr>
              <td width="461" height="101" style="background-image: url(http://areyouanartist.com/images/index_header_left.gif);" align="left" nowrap="nowrap" alt="" border="0" /></a></td>
              <td height="101" width="100%" style="background-image: url(http://areyouanartist.com/images/index_header_middle.gif);" align="center"></td>                
              <td width="273" height="101" align="right" valign="top" nowrap="nowrap">
              <img  src="http://areyouanartist.com/images/index_header_right.gif" width="273" height="101" alt="" border="0" /></a></td>
          </tr>
          </table>
          <!-- /logo -->
          Almost! I had a slight overhang on both sides after trying your amended code. I sat and thought, studied the code and changed the table width to 95% instead of 100%. It worked! We now have a perfectly aligned and fluid header.

          Thank you very much for your help, Jose.

          Comment

          • Jose Amaral Rego
            Senior Member
            • Feb 2005
            • 11058
            • 1.1.x

            #6
            Try this one as I just notice that Firefox 2.0.0.11 read what I made correctly while other browsers ignored it

            Code:
            <!-- logo -->
            <a name="top"></a>
            <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
            <tr>
            	  <td align="$stylevar[left]" width="461" height="101" nowrap="nowrap">
            	  <img border="0" src="http://areyouanartist.com/images/index_header_left.gif" width="461" height="101" alt="" /></td>
            	  <td height="101" width="100%" style="background-image: url(http://areyouanartist.com/images/index_header_middle.gif);" align="center"></td>
            	  <td align="$stylevar[right]" width="273" height="101" valign="top" nowrap="nowrap">
            	  <img  src="http://areyouanartist.com/images/index_header_right.gif" width="273" height="101" alt="" border="0" /></a></td>
            </tr>
            </table>
            <!-- /logo -->

            Comment

            • Girlonthehill
              New Member
              • Jul 2006
              • 26
              • 3.7.x

              #7
              Originally posted by Jose Amaral Rego
              Try this one as I just notice that Firefox 2.0.0.11 read what I made correctly while other browsers ignored it

              Code:
              <!-- logo -->
              <a name="top"></a>
              <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
              <tr>
                    <td align="$stylevar[left]" width="461" height="101" nowrap="nowrap">
                    <img border="0" src="http://areyouanartist.com/images/index_header_left.gif" width="461" height="101" alt="" /></td>
                    <td height="101" width="100%" style="background-image: url(http://areyouanartist.com/images/index_header_middle.gif);" align="center"></td>
                    <td align="$stylevar[right]" width="273" height="101" valign="top" nowrap="nowrap">
                    <img  src="http://areyouanartist.com/images/index_header_right.gif" width="273" height="101" alt="" border="0" /></a></td>
              </tr>
              </table>
              <!-- /logo -->
              It works like a dream, Jose. Thank you, thank you and thank you!

              Comment

              • juice
                Member
                • Jan 2008
                • 75
                • 3.6.x

                #8
                Maybe you could help me out with my situation which is somewhat similar. My header code is:

                Code:
                <div>
                <table id="Table_01" width="100%" height="181" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan="4" width="20%" height="180" background="images/left_fill.gif">
                            </td>
                        <td rowspan="4">
                            <img src="images/Banner_02.gif" width="416" height="180" alt=""></td>
                        <td colspan="2" rowspan="3">
                            <img src="images/Banner_03.gif" width="104" height="152" alt=""></td>
                        <td colspan="3">
                            <img src="images/Banner_04.gif" width="243" height="13" alt=""></td>
                        <td rowspan="4">
                            <img src="images/Banner_05.gif" width="17" height="180" alt=""></td>
                        <td rowspan="4" width="20%" height="180" background="images/right_fill.gif">
                            </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <img src="images/ad.gif" width="234" height="60" alt=""></td>
                        <td>
                            <img src="images/Banner_08.gif" width="9" height="60" alt=""></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <img src="images/Banner_09.gif" width="243" height="79" alt=""></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="images/home.gif" width="99" height="28" alt=""></td>
                        <td colspan="2">
                            <img src="images/forum.gif" width="109" height="28" alt=""></td>
                        <td colspan="2">
                            <img src="images/links.gif" width="139" height="28" alt=""></td>
                    </tr>
                    <tr>
                        <td>
                            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="416" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="99" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="5" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="104" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="130" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
                        <td>
                            <img src="images/spacer.gif" width="12" height="1" alt=""></td>
                    </tr>
                </table>
                </div>
                What do I need to change to make this work?

                Comment

                widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                Working...