Hi,

Can someone advise me if the layout below is achievable?

I would like the content, navigation and footer all to be centered. I'm not sure how the header banner and footer banner would react to different resolutions tho. Any help appreciated.

Andy

5 answers

Doug 1095
3
points

Yes. Wrap everything in a div and apply this or similar CSS:

div#wrapper {
  width:700px;
  margin:0 auto;
}

The auto applies to the left and right margins and works to center the div. To get the background image, add background-image to the body, or another div that is a parent of the wrapper div, depending on how you want things to line up.

Answered about 7 years ago by Doug
1
point

If you have flat color and images mixed together for your header/footer, then yes.

I would take the section that you could repeat and do a repeat-x for that section, then layout the other sections that cannot repeat as normal.

Are you trying to have the site stretch with the higher and lower resolution?

Answered about 7 years ago by tahdhaze09
  • Agreed. Repeating a section as a base and then laying out the non-repeatable areas on top of the repeating section would make it scale perfectly at any resolution. Good answer. +1 Abinadi Ayerdis about 7 years ago
0
points

Looks to be a fairly standard 3 column layout... I see absolutely no reason to think it would not be achievable. Below are just a couple sites doing something similar:

http://www.kingpinsocial.com

http://www.gioledda.ca

http://www.jason-reynolds.com

Answered about 7 years ago by Dwayne Anderson
0
points

Sorry, maybe my query was misunderstood. I'm fine building the 3 column bit but the header and footer (curved) will change depending on various screen resolutions people have.

Would I need to box them off for people with higher resolutions? As seen here > (http://img684.imageshack.us/i/template02.gif/)

or is there a way to make them stretching/repeat along the top and bottom of the screen

Answered about 7 years ago by officer
  • center the background image(s) and let the sides run off the screen on smaller viewports... Dwayne Anderson about 7 years ago
  • @officer: If you want to clarify your question, edit it instead of adding an answer. If you want to respond to an answer, then add a comment, don't add another answer. Abinadi Ayerdis about 7 years ago
0
points

I don't want to box the curves up like in my 2nd image link unless I have to so I guess stretching the header and footer is a must.

Answered about 7 years ago by officer