...

View Full Version : Background image centering problem with scrollbars



Meatballsub
10-24-2006, 04:06 PM
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

http://larriveewearables.com/Problem.jpg

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


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


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

VIPStephan
10-24-2006, 04:23 PM
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! :eek:



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 (http://www.codingforums.com/showpost.php?p=478386&postcount=6) 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.

Meatballsub
10-24-2006, 04:30 PM
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...

Meatballsub
10-24-2006, 05:47 PM
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.

VIPStephan
10-24-2006, 06:11 PM
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.

Meatballsub
10-24-2006, 08:30 PM
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:


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum