Wed, 2010-08-25 17:02
Hi guys.
First of all:
im new in here so hello to all, im not that new to CSS but must classify myself as novice eger to learn 
.
about:
need some advice on best practice and approach for a specific layout structure
Question:
Im currently working on a new version of my website, im going for a full frame version, one which expands 100% horizontal but where all content has a fixed width and centered in the browser window, catch here is, the page should be build up of section each having different colors/bg's which should stretch 100% of the browser
screen. i've attached a layout structural sketch in this post
my question is then, what would be the best approach for this type of layout, i've look all at a lot of css layout examples, mostly fluid versions, but non of them really talks about this type of layout including how to structure and positing DIV elements within the center content areas.
i did make some examples and tests, but they are't cross compatible, reason for not linking to these is, i'll rather have an discussion about best pratics and solutions for this type of layout than discussing precise elements in previous tests.
any suggestions, ideas, links, tut's or the like ??
best
// Mads
Wed, 2010-08-25 17:13
#1
ok, so the design is fixed,
ok, so the design is fixed, but you want the background of each row to expand 100%? Create an image that has all the rows and colors in it you need. crop it so its 1px wide. apply this image as a background to either the html or body tag, and repeat-x.
body { margin: 0; padding: 0; background: white url(image.jpg) repeat-x; }
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Wed, 2010-08-25 17:32
#2
Maybe this will help: This
Maybe this will help:
http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
This work for big background images, what you need is just a single pixel wide image with full height repeated in x axis, but this will help you get a basic idea.
Wed, 2010-08-25 18:27
#3
thanks for the quick
thanks for the quick replies..
ahh yes i think i forgot to mention that the layout is should be able to take dynamic content from a CMS system, meaning the height for each content section would differ, so the overall background image trick won't do any good, other than styling an isolated vertical section.
did that make any sense.. so basically it's fluid in vertical direction with centered content elements which again must contain fluid elements af any kind.
wish i could find an example, i think for some footers which expand 100% with centered content do something similar
Thu, 2010-08-26 15:17
#4
ok, then apply 100% width to
ok, then apply 100% width to each div, then use margins to position the div content.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS