Announcement

**fleetwood** · 17-Apr-2007, 08:49 AM

You have your logo defined as width: 850px; so this is the width it will be.
To make it stretch the full width of the top bar, you will either need to have an image the width of your site (if it is a set width), or set to repeat.

You will also find that the image will work best if set to the background of the top bar.

For help achieving either of these, try a goodle search on "css background" as a first port of call.

Your current image is 850px wide, and is saved as a PNG at 294k.
This is not the best image format to use, and is way too large a file size.

If you wanted to stick with this fixed image, you will need to split it into 3 parts (the left and right text bits, and the centre picture), and optimise using image software to reduce the file sizes.
The two side elements are best as GIFS, the centre image a JPG.

The left and right could be displayed with colour backgrounds, matching the colours already used, and allowed to expand to fill the extra space of larger monitors

Hope that helps

<body><div id="topbar"><div id="logo"><img src="acatalog/acthillwalkingheader.png" width="850" height="79" alt="Outdoor Sports Shop" class="logoimage" /><

#logo {
width: 850px;
height: 79px;
float: left;
}

For further help re nav etc, please could you upload the site with the code uncompacted. Trying to view and debug compacted code is a right pain!
Design | Design Options - uncheck 'compact html' (you can reset it to compact when you have finished debugging)

**mountain fever** · 17-Apr-2007, 09:06 AM

Tried changing logo width

Hi thanks for reply
Have tried adding a header 1000px wide but actinic compresses it to 850px and leaves a white square on the right above the nav bar.
Maybe i am missing something really simple! ref changing logo width

**fleetwood** · 17-Apr-2007, 09:08 AM

Your actual image is 850px.
It will only display at 850px wide, unless you set the image definition wider, which will look ugly, as will stretch the picture.
You need to split the image into 3 - see my amended post above.

If you have added a new image 1000px wide, have you changed the width definition - in the css, to read width: 1000px, and the img src width?

img src="acatalog/acthillwalkingheader.png" width="850" height="79" alt="Outdoor Sports Shop" class="logoimage" /><

#logo {
width: 850px;
height: 79px;
float: left;

You should only use a fixed width image of 1000px, if you want your site to be a fixed width of 1000px.
If you are going to allow the site to shrink on smaller monitors, you should not set the image width wider.

**fleetwood** · 17-Apr-2007, 09:49 AM

In more detail.

Your site is currently designed to fill the full screen.
For your header to fill the full screen too, and expand and contract with the screen size, you need to design it in 3 parts - a left side, a middle and a right side.

Typically, the picture in the middle will be of a fixed size, usually less then 800px to allow for a screen width of 800px (although it is now more common to work around 1024px wide screens).

The two side elements are where you make your header design fluid, allowing it to expand and contract with the screen width.

At its simpliest, the two side images will be simple coloured backgrounds. These are filled by having a small image, the same colour as the background of your text pieces, only a few px wide, that repeats to fill each side.

The 3 images are set to the background of the header.
Your text elements (left and right), then sit on top.

To make your design look super-duper, you could design these side backgrounds to match and extend your middle image, but this does take a bit of creativity, as you are looking to create an image thats a few px wide, which will look like an extension of the main pic when repeated over and over..

I hope thats a bit clearer

If you didn't want to bother with all this, you could simply set your image width to 100%, but this will look very ugly with a fluid screen, as your image will stretch and compact with different screen sizes

**mountain fever** · 17-Apr-2007, 11:27 AM

thanks

thanks for the detail.
not sure whether got experience to do it! but will give it a go
cheers

Announcement

Design Problem

Design Problem

Comment

Comment

Comment

Comment

Comment