large image causing a horizontal scroll

Hello Experts,

I in the process of develping a site. I have a top background header image that is 2200px wide, ensuring that it will be seen on most monitors. The image however does need to be center with the monitor lining up with the body container that is set as width: 1000px; margin: 0 auto;

The issue I am having is the top background header image is causing a horizontal scroll bar. I have tried using overflow-x:hidden; in both the header and header-nav neither has worked.

Any suggestions?

code is below.

CSS:
.container {
	width:1000px;
	margin:0 auto;
}

/* Header */
header {
}

#header-nav {
	background-image:url("../images/standard/bg-nav-header.png");
	height:89px;
	left:50%;
	position:absolute;
	top:20px;
	width:2200px;
	margin-left:-1100px;
	z-inde:100;
}

Open in new window

LVL 1
MorganAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
The CSS on it's own doesn't reaaly mean anything. We need to see the HTML that it applies to. A background image doesn't force anything to have a size - it's your width:2200px that is forcing the width.

If you exaplin what you are trying to do, we may be able to help more - the property you have for #header-nav look like a right proper hack!
0
GaryCommented:
<div id="header">
     <div id="header-nav">
     </div>
</div>
<container>
     Main content
</container>

Open in new window

On the ID header apply the background image with
background-position:center center

On #header-nav apply
width:1000px;
margin:0 auto;
0
MorganAuthor Commented:
Hello ChrisStanyon,

Thanks for the quick reply. Its a joomla template i'm building, but the html code is below.

<!--begin header-->
	<header>
		<div id="header-nav">
			<jdoc:include type="modules" name="top-nav" style="none" />
		</div>
		<jdoc:include type="modules" name="slider" style="none" />
		<jdoc:include type="modules" name="banner" style="none" />
	</header>
	<!--end header-->

Open in new window


In the header-nav element the top navigation menu will appear for the site. I am using the image and applying the hack to it because the image is broken into three separate sections. You can see a very simple live demo here: http://testingtesting1.info/joomla-test/.

On the live demo where the title "Home" is seen, that is where the logo will go and to the right of that the navigation menu will appear.

Thanks,

noe
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

GaryCommented:
Well I've given you the logic above.
0
MorganAuthor Commented:
Hello GaryC123,

That unfortunately did not work.

CSS code:

.container {
	width:1000px;
	margin:0 auto;
}

/* Header */
header {
}

#header-nav {
	background-image:url("../images/standard/bg-nav-header.png");
	background-position:center center;
	overflow-x:hidden;
	height:89px;
	left:50%;
	position:absolute;
	top:20px;
	width:2200px;
	margin-left:-1100px;
	z-inde:100;
}

/* Content Area */
main {

}

/* Footer */
footer {

}

Open in new window


HTML code:
<!--begin header-->
	<header>
		<!--begin container-->
		<div class="container">
			<div id="header-nav">
				<jdoc:include type="modules" name="top-nav" style="none" />
			</div>
			<jdoc:include type="modules" name="slider" style="none" />
			<jdoc:include type="modules" name="banner" style="none" />
		</div>
		<!--end container-->
	</header>
<!--end header-->

Open in new window


Any further suggestions?
0
GaryCommented:
Move the background image to the header
Remove the width from the header and put in header-nav
0
MorganAuthor Commented:
Not sure what was going on before, and why this did not work (perhaps user error, such as mistyping) but I have fixed the issue.

I applied the overflow-x:hidden; to the body tag and this has corrected the problem.

Thanks for the help!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MorganAuthor Commented:
I found the solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.