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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background image centering problem with scrollbars

    Hello,

    I have a website that is made up of four or so frames. I am trying to center the background in each frame using CSS. The "main" frame is centered nicely in the page, while the "navigation", "logo", etc frames are not. I don't know if it is something that I coded that is wrong or not, so I am hoping somebody can help me figure it out.

    Okay I have pinpointed the problem (I think). It seems that when I take out the scrolling feature on the "main" frame, the background image centers correctly. When I put the scrolling feature back in, it screws it up again.

    Any ideas?

    Cropped image of the problem



    Here is the code for the navigation (picks) frame:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    
    
    <style type="text/css"> 
    body 
    { 
    background-image: url("bg.gif"); 
    background-repeat: repeat-y; 
    background-attachment: fixed; 
    background-position: top center ;
    } 
    </style>
    
    
    
    <title>Shop - Navigation</title>
    <center>
    <script language="javascript">
    <!--
    
    var ln2 = new Image(80,24);
    ln2.src = "img/about_us_u_80x24.gif";
    var ln3 = new Image(120,24);
    ln3.src = "img/product_overview_o_120x24.gif";
    var ln4 = new Image(120,24);
    ln4.src = "img/product_overview_u_120x24.gif";
    var ln5 = new Image(80,24);
    ln5.src = "img/contact_o_80x24.gif";
    var ln6 = new Image(80,24);
    ln6.src = "img/contact_u_80x24.gif";
    var ln7 = new Image(120,24);
    ln7.src = "img/product_search_o_120x24.gif";
    var ln8 = new Image(120,24);
    ln8.src = "img/product_search_u_120x24.gif";
    var ln9 = new Image(110,24);
    ln9.src = "img/shopping_cart_o_110x24.gif";
    var ln10 = new Image(110,24);
    ln10.src = "img/shopping_cart_u_110x24.gif";
    var ln11 = new Image(120,24);
    ln11.src = "img/customer_login_o_120x80.gif";
    var ln12 = new Image(120,24);
    ln12.src = "img/customer_login_u_120x80.gif";
    var ln13 = new Image(80,24);
    ln13.src = "img/TC_o_80x24.gif";
    var ln14 = new Image(80,24);
    ln14.src = "img/TC_u_80x24.gif";
    var ln15 = new Image(80,24);
    ln15.src = "img/info_o_80x24.gif";
    var ln16 = new Image(80,24);
    ln16.src = "img/info_u_80x24.gif";
    function hiLite(imgDocID,imgObjName) 
    {
    document.images[imgDocID].src = eval(imgObjName + ".src")
    }
    // -->
    </script>
    </head>
    
    <body background="bg.gif" color="$global_fontcolor_dark" link="$global_color1_dark" alink="$global_color1_bright" vlink="$global_color1_dark" text="$global_fontcolor_dark" bgcolor="$global_background_color" <% BACKGROUND_TILE %>>
    <% INCLUDE_VAR($CUSTOM_HEADER) %>
    
    <font size="" face="arial black" color="white" ><a STYLE="text-decoration:none" href="about_us.shopscript" target="main"> <img src="Home.gif" border="0" name="pic02" nosave> </a>
    
    <font size="" face="arial black" color="white"><a STYLE="text-decoration:none" href="product_overview.shopscript" target="main"><img src="Products.gif" border="0" name="pic02" nosave></a>
    
    <font size="" face="arial black" color="white"><a STYLE="text-decoration:none" href="identity.shopscript" target="main"><img src="Contact.gif" border="0" name="pic02" nosave> </a>
    
    <font size="" face="arial black" color="white"><a STYLE="text-decoration:none" href="product_search.shopscript" target="main"><img src="Search.gif" border="0" name="pic02" nosave> </a>
    
    <font size="" face="arial black" color="white"><a STYLE="text-decoration:none" href="<% URL_BASKET("$DATA_PATH/product_overview.shopscript") %>" target="main"><img src="cart.gif" border="0" name="pic02" nosave> </a>
    
    <% IF ($SHOW_LOGIN_BUTTON) %>
    
    <font face="arial black" color="white"><a STYLE="text-decoration:none" href="<% URL_MY_ACCOUNT %>?backlink=<% EchoURLEncode("$DATA_PATH/product_overview.shopscript") %>" target="main" ><img src="Login.gif" border="0" name="pic02" nosave> </a>
    
    <% END_IF %>
    <% IF ($SHOW_TNC_BUTTON) %>
    <font size="" face="arial black" color="white"><a STYLE="text-decoration:none" href="terms.shopscript" target="main"><img src="img/TC_o_80x24.gif" width="80" height="24" border="0" name="pic07" nosave></a>
    
    <% END_IF %>
    <% IF ($SHOW_INFO_BUTTON) %>
    
    <font size="" face="arial black" color="white"><a STYLE="text-decoration:none" href="info.shopscript" target="main"><img src="Info.gif" border="0" name="pic02" nosave> </a>
    <% END_IF %>
    
    &nbsp;&nbsp;
    
    
    </center>
    
    </body>
    </html>
    And here is the code for the main frame

    Code:
    <html>
    <head>
    
    <style type="text/css"> 
    body 
    { 
    background-image: url("bg.gif"); 
    background-repeat: repeat-y; 
    background-attachment: fixed; 
    background-position: center ;
    } 
    </style>
    
    
    <title>$text_about_us_heading</title>
    <% INCLUDE_VAR($CUSTOM_HEAD) %>
    </head>
    <body background="bg.gif" color="$global_fontcolor_dark" link="$global_color1_dark" alink="$global_color1_bright" vlink="$global_color1_dark" text="$global_fontcolor_dark" bgcolor="$global_background_color" <% BACKGROUND_TILE %>>
    <% INCLUDE_VAR($CUSTOM_HEADER) %>
    
    <CENTER>
    <TOP>
    
    <IMG SRC="LV05.jpg" width="702">
    <BR>
    <font color="black">
    Welcome to Larrivee Wearables!
    <BR>
    <left>This site is currently under construction. Please check back with us later!
    <br><BR><BR><BR>
    
    </table>
    
    <% INCLUDE_VAR($CUSTOM_FOOTER) %>
    </body>
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by Meatballsub View Post
    I don't know if it is something that I coded that is wrong or not [...]
    Yes, what you did wrong was using frames. That's so 1994!

    Quote Originally Posted by Meatballsub View Post
    Any ideas?
    Yes, don't you ever use frames again! Go with time, we're in the 21st century now and you're still using a technique from ten years behind.
    If you are using CSS already use it properly. You can create a frame-like effect with div elements and CSS nowadays. It's much more search engine and user friendly.
    Refer to this post to read about semantic code and how to create semantically rich websites.

    Sorry for being the bad guy giving you a sermon but in this case I can't just ignore the obvious.

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. Yes, I hate frames just as much as the other guy, but that is how this website was setup unfortunately. It is an eShop with 1and1 and while you can edit all of the code yourself, some elements cannot be changed.

    I'll see what I can do though. Looks like I have a long day ahead of me...

  • #4
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there ANY way I can fix this problem and keep the frames? I know it is horrible, but the way the website is designed is preventing me from linking to the shopping cart when I try to alter the code to use <DIV>s.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Sorry to hear that.
    So from the image I see that the emerging scrollbar is causing the page to move to the left which it does in every browser except IE where the scrollbar is always present (though inactive if page shorter than window).
    I'm not feeling like reconstructing the whole frameset now but I could imagine that you disable the scrolling for the main frame and insert a div into the frame's HTML document with the height of the frame and overflow: auto; so the div gets a scrollbar, not the frame.
    Don't know if it works but you could try it.

  • #6
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again for the reply!

    I contacted the provider and got it worked out. I have replaced the FRAME commands with DIV commands and it looks perfect....except...

    Firefox. I have a fingerboard the is a repeating background image in one div on the page. It shows up just fine in IE, but doesn't show up at all in firefox. Also, the big picture of the guitar doesn't line up correctly in Firefox like it does in IE. Here is my code:

    Code:
    <html>
    <head>
    
    <style type="text/css"> 
    body 
    { 
    background-image: url("bg.gif"); 
    background-repeat: repeat-y; 
    background-attachment: fixed; 
    background-position: center;
    margin:auto;
    } 
    </style>
    
    <style type="text/css"> 
    .fb 
    { 
    background-image: url("FB.gif"); 
    background-repeat: repeat-x; 
    background-attachment: fixed; 
    background-position: center;
    height:100px; 
    } 
    </style>
    </script>
    
      <title>$text_about_us_heading</title>
      <% INCLUDE_VAR($CUSTOM_HEAD) %>
    </head>
    <body background="bg.gif"color="$global_fontcolor_dark" 
    
    link="$global_color1_dark" alink="$global_color1_bright" 
    
    vlink="$global_color1_dark" text="$global_fontcolor_dark" 
    
    bgcolor="$global_background_color" <% BACKGROUND_TILE %>>
      <% INCLUDE_VAR($CUSTOM_HEADER) %>
    
    <CENTER>
    <TOP>
    <div><img src="http://larriveewearables.com/Logo.Jpg"></div>
    <div class="fb"></div>
    <div>
    
     <font size="" face="arial black" color="white" ><a 
    
    STYLE="text-decoration:none" href="about_us.shopscript" > <img 
    
    src="Home.gif"  border="0" name="pic02" nosave> </a>
    
          <font size="" face="arial black" color="white"><a 
    
    STYLE="text-decoration:none" href="product_overview.shopscript" 
    
    ><img src="Products.gif"  border="0" name="pic02" nosave></a>
    
         <font size="" face="arial black" color="white"><a 
    
    STYLE="text-decoration:none" href="identity.shopscript" ><img 
    
    src="Contact.gif"  border="0" name="pic02" nosave> </a>
    
         <font size="" face="arial black" color="white"><a 
    
    STYLE="text-decoration:none" href="product_search.shopscript" 
    
    ><img src="Search.gif"  border="0" name="pic02" nosave>       
    
    </a>
    
          <font size="" face="arial black" color="white"><a 
    
    STYLE="text-decoration:none" href="http://s180630477.oneandoneshop.com/action/warenkorb.php4"> <img 
    
    src="cart.gif"  border="0" name="pic02" nosave>   </a>
      
    
    	
          <font face="arial black" color="white"><a STYLE="text-decoration:none" 
    
     href="http://s180630477.oneandoneshop.com/action/my_account.php4"> 
    
    <img src="Login.gif"  border="0" name="pic02" nosave>    </a>
    
    	
        <font size="" face="arial black" color="white"><a 
    
    STYLE="text-decoration:none" href="info.shopscript" target="main"><img 
    
    src="Info.gif"  border="0" name="pic02" nosave>   </a>
    	
          &nbsp;&nbsp;
    
    
    </center></div>
    
    
    <CENTER>
    
    <IMG SRC="LV05.jpg" width="702">
    <BR>
    <font color="black">
    <div height="600">Welcome!
    <BR>
    <left>This site is currently under construction. Please check back with us 
    
    later!
    <br><BR><BR><BR><br><BR><BR><BR><br><BR><BR><BR><br><BR><BR><BR>
    
    </div>
    
      <% INCLUDE_VAR($CUSTOM_FOOTER) %>
    </body>
    </html>

    Update:

    Fixed the centering problem with the guitar picture, but still can't get the fingerboard to show up.
    Last edited by Meatballsub; 10-24-2006 at 09:01 PM.


  •  

    Posting Permissions

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