2 replies [Last post]
animgirl
animgirl's picture
Offline
newbie
Last seen: 17 years 40 weeks ago
Joined: 2004-04-21
Posts: 4
Points: 0

Hello,

I'm having some issues with a background in my css.

I have a background for the page specified here:

body {
	font: bold 70% Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	margin:0 auto;
	padding:0;
	background: #948E7B url(../layout/regular.gif);
 	min-width:775px;

Then I have a div called #arena that wraps around the whole site itself, which has a background of it's own:

#arena {
	display:block;
	height: 100%;
	width:850px;
	background: transparent url(../layout/bg.gif) repeat-y;
	margin:0 auto;
	overflow:hidden;

Inside that div I have a div named #box which is what contains all the content for the site:

#box {
	display:block;
	position:relative;
	width:750px;
	height: auto;
	margin:0 auto;
	border-right: 2px solid #8D866C;
	border-left: 2px solid #8D866C;
 	background: #635539;

I want the background in #arena to stop making the page scroll at smaller resolutions, I want it to act like a "background" as it should. However, when I specify the width for #arena, it produces a horizontal scroller. But I have to have the width for it to work correctly. I'm missing something here.

Is there a way to get around this?

Thank You!

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Background spurring horizontal scroller

Do you have the HTML you're using? Or even better, a test site to go to?

Unfortunately, if you have to have your #arena width set to 850px, then if the browser window (view port) is reduced to less than 850px, then it will inevitably scroll. Plus if, for the integrity of your design, it has to stay fixed at 850px, there's not much that can be done.

If you are willing to let go a bit and allow it to reduce down smaller than 850px, then you could use max-width: 850px;... this would set it to 850px if the browser view port is wider than 850px, but would reduce the width of the div if the view port is reduced. However, not all browsers support max-width, so you'd have to test them.

Like I said, it's hard to speculate without seeing the images or HTML.

I've just had a little go at trying it. I've got perhaps what you would like done here: http://pub.c-o2.net/cssf/850.htm

However, I've only tested in Firefox and Safari (which work in both, with slight differences between the two). Also, I don't think it's a conventional route, and perhaps would look for alternatives first (including changing your design!)

It's using the overflow declaration, but on the html and body elements within CSS. The CSS is in the HTML code.

The next sentence is true. The previous sentence is false. Discuss...

animgirl
animgirl's picture
Offline
newbie
Last seen: 17 years 40 weeks ago
Joined: 2004-04-21
Posts: 4
Points: 0

Background spurring horizontal scroller

Okay I've made up a test site so you can see here

Why doesn't: overflow:hidden; work in #arena to make the scroller go away?

Thanks for your help on this,