Page width issue

[Ryder17z]

Hello.

I've been trying to get around an issue regarding the width of my site: http://reizero.biz

Apparently the header as well as the menu width is messing up the whole site width.


How do i correct the menu and header width so that they don't affect the page width?
All they should to is expand or shrink as necessary so the right corner glitch doesn't appear.

This is what i want to get rid of:


I want to "cut" the site width at the red line:

[Geek-9pm]

Did you want to just crop the image? Or do you want it to auto size?
Using HTML you can control image size in a number of ways.
The image can be in a frame.
The image can be in a table.
Use DIV as a container
The size of  the image and be set to automatically adjust.

Some WYSIWG editors  have a special thing for page banners.
But maybe you prefer direct HTML.
Here are some nice tutorials:
How can I make a picture larger or smaller using just HTML?
Always Set the Image Width and Height to the Real Image Size
Image auto resize to fit div container

My personal preference is to use some tool like Dreamweaver or similar program and try some different things before uploading it. Different users have the display and/or browser setups. so it takes a little bit of adjustment to get a heading that looks good.
That is about the limit of my web page skills.

[Ryder17z]

The site is a mess in Dreamweaver so that's not helping.

And it seems you haven't understood the issue.

There is no need to crop images as they work fine the way it is currently.


The actual problem lies within the header and menu width's as they affect the width of the page which they shouldn't.

[Geek-9pm]

Sorry I can not help you. I do not understand the problem.
The user has the option to alter page width in the browser. So a menu that runs under a banner will change size if the user wants to zoom in or out or if he has a low resolution device.

For example, the Computer Hope banner and menu bar with adjust itself as the user wants until it has to word wrap the menu bar. The banner really has two parts.

To the left is a n image that with re size as needed


To the right is an image that will more off to the right as needed. It is a background


The only thing I can recommend is to examine the code of sites you like and see how they do it.

[Rob Pomeroy]

Just checked it in Chrome - it's looking good. Have you fixed it?

[Ryder17z]

If the mentioned problem doesn't appear in Chrome that's good.


It occurs on Opera 11.62, Firefox 4.0.1, 11.0, 13.0 as well as IE7.
So it's not fixed.

[soybean]

In your .css file, you have this:

.menu {
   width:107%;


And this:
DIV#header {
   position:absolute;
   left:92px;
   top:57px;
   text-align:center;
   background-color:black;
   height:37px;
   width:101%;


In other words, you have two width settings that are greater than 100%.  I suspect the 107% for the menu is causing the problem.

[Rob Pomeroy]

What soybean said.

Have you tried Twitter's "Bootstrap" CSS framework?  It's awesome.  It offers simple liquid layouts, fixed layouts and hybrid.

[Ryder17z]

The overflow-x option seems to have no effect on most browsers which doesn't make much sense to me.


Those extra width's seems to actually have slipped through when i cleaned the page up as i messed around alot with sizes of elements before putting the site up.


I have gotten around the issues now though.


However what Rob mentioned sounds worth checking out.