Increasing the width of my web page

easylistener

My current web site was designed by a friend and since then I have added pages, text, links, images and buttons etc. The basic stuff but all self taught.

The one thing I want to do is alter the width of the page as it seems relatively small compared to other sites and there is so much content I could add. It can be viewed on www.thesecretgardener.com

Is this a simple enough task to do as a novice. I am guessing that the settings are within the CSS folder but I am not sure if this will work. Can anyone please advise as I dont want to feck up my site.

This is the data from the CSS file if this helps.

body{margin:0; font:80%/1.7em Georgia, "Times New Roman", Times, serif; color:#363; text-align:center; background:#d9ded1}
a, a:visited{color:#060;}
h1{color:#cfe2c4; font-weight:normal; font-size:250%; margin:0 0 20px 0}
h2{font-size:120%;}
img{border:0}
#all{text-align:left; width:780px; margin:20px auto; background:url(../image/bg.gif)}
.wrapper{margin:0 18px 0 0; padding:0 30px 0 45px; background:url(../image/corner_illustration.gif) no-repeat right top}
#navigation {}
#navigation img{float:left}
#navigation p{margin:40px 20px 0 0; width:220px; float:right; text-align:right}
#navigation ul{clear:both; margin:0; padding:10px 0; list-style-type:none}
#navigation li{float:left; margin:0 1px 10px 1px;}
#navigation li a, #navigation li a:visited, #navigation li a:hover {padding:2px 15px; background:#cfe2c4; border:1px solid #a0b596; text-decoration:none; }
#navigation li a:hover{ background:#a0b596; color:#fff}
#content {clear:both;margin: 20px 0}
#content ul{ margin:0; padding:0; list-style-type:none}
.photos{width:190px; float:left; font-size:80%}
.photos img{margin: 0 0 20px 0}
.photos p{margin:0 10px 10px 0}
.indent{width:460px; float:left}
.productlist{width:175px; float:left}
#products{clear:both; padding:20px 0 0 0; font:75% Arial, Helvetica, sans-serif}
#products ul{ list-style-type:none; margin:20px 0; padding:0}
#products li{float:left; width:20%}
.tracker{text-align:center; margin:10px}
.tracker img{filter:alpha(opacity=33); opacity:.33; }

Cheers Brian

Eoin

Probably this line:
#all{text-align:left; width:780px; margin:20px auto; background:url(../image/bg.gif)}

easylistener

Cheers for pointing that out Eoin. Is there a standard width or can I alter it to any variable. Just hesitant as unsure if it a centred fixed width layout or a jello layout. Sometimes books make it more confusing.

Brian

easylistener

Just altered the 780 width to 840 and I get a lovely line of the background image in the main body of the page. So not that simple.....

tricky D

the .indent width also needs to change by a similar amount if you want the main text body to expand too

Eoin

You could set a percentage width (e.g. width: 90%) so it will expand according to the browser width. Make sure it doesn't affect the other elements too much though.

easylistener

Appreciate your responses.

tricky D if I increased the width to 840 does the indent level which is currently 460 increase to 520 then? both increasing by 60 (unsure what units that is in ?)

just want a wide one so to speak...:)

easylistener

tried my own suggestion from above and I still get a lovely streak of background colour running through the main text body.

The corner gif image also does not move to the far right hand side and appears to remain in its original position.

Trial and error

tricky D

.indent{width:520px; float:left}

should do the trick

easylistener

altered as you both suggested and still get that lovely background line. I am only altering this in the css file.

Liked the 90% suggestion Eoin as it really filled the page but had the same background line which was a shame as that is the look/size I would like to acheive.

tricky D

Would be very handy to see a live version of this. You could post a test.html page

easylistener

test html pages

1. with width and indent increased by 110

width from 780 to 990
indent from 460 to 520

C:\Users\brian\Documents\Web Page\test\index.htm




As you can see it leave the background line running through the main text body?????? doing the same to the width in terms of % does the same if anything over 60%. Loved the width at 90% but may not be a diy job....

Gordon

It's because you have an image (/image/bg.gif) that is a set width. You need to edit the image to become the new width, also. The image you are using is repeated vertically to make the shadow effect, so that image width needs to be amended also.

easylistener

Gordon.

Do I alter the image (/image/bg.gif) on the css folder or in the image folder. Novice but learning. And by what proportion do I increase it?

Cheers Brian

Gordon

You need to edit the image in an image editing software such as photoshop or gimp. At the moment it is 780px wide, like the width of your containing box entitled #all, so whatever you change #all to - change the image to that width. You'll need someone that understands image editing to do this though, as it's not just stretching the image, you need to make the left and right hand side shadow bits remain in proportion when widening the image.

easylistener

See what you are saying this is what I have acheived so far with your advice but think you may be right. The professionals may be needed.....:)

C:\Users\brian\Documents\Web Page\test\index.htm

Eoin

We can't see this file - you need to upload it to your website.

C:\Users\brian\Documents\Web Page\test\index.htm

easylistener

uploaded it but as my main site settings on the css page remain as they were the page reverts back to the smaller width. I cant alter the whole web site css yet as there are still glitches attached to my meddling.

Time for bed and acknowledge the skill of web design....

Liam Byrne

easylistener wrote: »

Cheers for pointing that out Eoin. Is there a standard width or can I alter it to any variable. Just hesitant as unsure if it a centred fixed width layout or a jello layout. Sometimes books make it more confusing.

Brian

760 - 780 is suitable for an 800x600 screen (allowing for scrollbars)

These are now dying out, and the next size up is 1024 wide, giving you approx 970 - 990 to play with as the next "standard" size.

You'd need to check your target audience, though.....if it's anyone likely to be using older computers, you could be stuck with 800x600.

tricky D

easylistener wrote: »

uploaded it but as my main site settings on the css page remain as they were the page reverts back to the smaller width. I cant alter the whole web site css yet as there are still glitches attached to my meddling.

Time for bed and acknowledge the skill of web design....

The version you have at:
http://www.thesecretgardener.com/test/

indicates that you need to add some left-padding or left-margin to the .indent
then you need to tweak the bottom.gif for width and remove the 30px padding on the .wrapper. Something like that should do it but I wouldn't be surpised if something else minor crops up.