Hey, I'm having a small problem with a new layout I'm working on.

 

www.kiernet.com/Test

 

The main image at the top is too long...but I cant work out how to make it go across the page on most screen resuloutions without putting 'width: 100%;'...can anyone help with the scroll bar at the bottom?

 

Thanks

As your image is just a gradient what you can do is cut it down so it only has a width of 1px and then tile it. I haven't had a look at your code but here is a basic example of how it would look in your css

 

#top {
background-image: url(imagehere);
background-repeat: repeat-x;
width:100%;
height:20px;
}

 

Here is the code run down as it does use 100% width but this is the best way to do it

 

background-image <--- places images as background in css

background-repeat: <---- repeats the image so that it tiles 'x' is for horizontal 'y' is for vertical

width:100%; <----spans the div 100%, not the image, causing the tiled image to tile 100% of the browser window

height: <- height of your image.

 

 

I'm sure you knew most of them but as I said I haven't looked at your code, but if your images is simply going to be that blur gradient there is no reason why you shouldn't use width 100% as that is what will make sure it spans the full size of the screen of any resolution, and using the tile technique means that you don't have to worry that your image being too small on a certain resolution.

 

 

Unless there is a reason why you don't want to use 100% as the width, in which case explain what you are trying to achieve with the code and why width:100% can't be used then maybe someone will be able to give you a good solution for your problem

Thanks for the reply, although it doesn't help me, as you've said what I've done already (which you would have seen if you looked at the coding...).

 

I want to use 100% width...as its the only way I can think of making the image go across the whole page on most, if not all screen resolutions.

 

Background image is 17px x 600px (I tried 1px x 600px and still didn't fix it).

 

On my screen resolution, I've still got the bottom scroll bar...but surely as I'm using 100% width...it shouldn't be there?

try speicfying a width in #wrapper, at the moment it is set to 100%

I should of looked at your code instead of assuming that it was a problem with the header, it is actually a problem with your #menu, you have set it to a width of 100% and then also told it to be positioned 5% from the top of the screen and 20% from the left. So what you have done by doing this is give the menu div a total width of 120% meaning depending on how big 100% is it then adds an extra 20% to it as well meaning the larger the screen size the further it will scroll.

 

 

My suggestion would be instead of looking to set every width as fluid think about if you need to, your menu for example looks like it is really a fixed width so it might be better to give it a fixed px value and then center it using margin:0 auto; or if you are wanting it to have a 100% width remember that your total needs to be 100% so that includes right and left positioning, any margins paddings and borders as well was the width.

 

Ah think I see it now, not tried changing it as I'm not on my laptop, but will try that when I get it...should have looked more closely, was just a 'copy paste' job for the navigation, didn't look at what it was.