Web Template Help!

[akira282]

So I have this template http://www.designsbydarren.com/web_t...s/pic.php?id=9

"Mother Earth"

The problem I am facing is that I cannot expand the center, left, or right columns horizontally. Any idea on how to do this? I am experiencing a lot of problems with it.

Thanks.
Kyle.

[vampist]

Originally Posted by akira282

So I have this template http://www.designsbydarren.com/web_t...s/pic.php?id=9

"Mother Earth"

The problem I am facing is that I cannot expand the center, left, or right columns horizontally. Any idea on how to do this? I am experiencing a lot of problems with it.

Thanks.
Kyle.

#page_wrapper {
  margin-left: auto; 
  margin-right: auto;
  width: 760px;
  text-align: left;
  background: #FFFFFF url('../img/content_bg.gif') top left repeat-y;
}

The page wrap is set to a defined width. Do you want to change the whole width or JUST the given width of columns inside that size?

For example.. Do you want to keep the page layout the same size and just have the right column huge and the left column small?

if so you will need to change the width of these:

#left_side {
  float: left;
  width:140px;
  border:0px dashed #cccccc;
}
#right_side {
  float: right;
  width:140px;
  border:0px dashed #cccccc;
}

or do you want to re-size the whole page making the columns bigger?



EDIT: You may also have to change the background picture to fit the new sizes.



If you change the left side coloumn you might also want to change the link list width to fit the new size.

#linklist {
  padding-left: 0;
  margin-left: 0;
  border-bottom: 1px solid #D1D9C4;
  width: 140px;
}

Depending on the size you make the columns you might need to change the center margins:

#center {
  margin-left:160px;
  margin-right:160px;
  border:0px dashed #cccccc;
}

This is all taken from just giving the source a quick glance.

[akira282]

I'd like the columns to be larger or just the overall page width to be extended out about an inch. Right now, I have a banner and footer that are about a half inch greater in length than the rest of the page is in width.

so the page is like this:


banner = --------------

page= ------------

footer= --------------



I want to extend (page) because right now the
banner/footer extend past the page and as a
result create a blank, white line.

any help is appreciated.

[vampist]

Ok I'm not EXACTLY sure what you want.
Do you want the height of the page adjusted or the width of the page adjusted?

Could you post the banner and other things you mentioned?


EDIT:
Banner = B
Page = P
Footer = F

B ---------
P ---------
F ---------

What do you want to do to "page"?

[akira282]

The width of the page needs to extend out to the footer and header.

http://kyler282.googlepages.com/untitled3.JPG

[vampist]

Ok, easy enough. Can I have the Css changes if you made any, and banner/footer images?
I may have to extend the background image to fit the new size.

[akira282]

Yeah, one sec

http://kyler282.googlepages.com/NewFolder.zip

[vampist]

You will have to set the page wrap to the new width.
The wrap is named "#page_wrapper".

[akira282]

Ok, I tried that, but as you can see it moves all the images and banner forward and it doesn't seem to increase the length of the page. Try it.

[vampist]

Originally Posted by akira282

Ok, I tried that, but as you can see it moves all the images and banner forward and it doesn't seem to increase the length of the page. Try it.

The length? You mean width?

Length is top to bottom. Width is left to right.


If you look in the img folder you can see that the background is made from a single image that is 760px wide. It repeats it self on the y axis (top to bottom).

If you have a banner and/or footer that is wider than 760px then you will need to stretch the content image AND the link image to the new width.