Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
- CommentAuthorAshcrapper
- CommentTimeJul 16th 2006
Hi,
Could anyone point me towards a tutorial for doing layouts like the following sites: http://logopond.com/ where the site is split into sections that cover the width of the browser but the site remains in a centre fixed width column.
Thanks in advance for any help :)
Ash -
-
CommentAuthorDarren Hoyt
- CommentTimeJul 16th 2006
You can either:
a) Create a <body> background image that tiles horizontally, and on top of that place a fixed-width wrapper <div>, or
b) Create a <div> for the masthead and one for the content, make them both 100% wide, give them a background-color, and within them nest another fixed-width <div>, or
c) - z) Many others will have ways to skin this cat -
-
here's how I like to do it:
example: http://www.erraticdesign.com/testing/split.html
Here goes:
<style>
body{background:#333331; padding:0px; margin:0px;}
.content{background:#F3F3F3;}
.header{border-bottom:15px solid #F9F9F9; background:#fff; padding:20px; text-align:center;}
.top{color:#000; width:700px; margin:0px auto; padding:10px;}
.bottom{color:#0066CC; width:700px; margin:0px auto;padding:10px;}
</style>
<body>
<div class="content">
<div class="header">Header stuff</div>
<div class="top">...your content here...</div>
</div>
<div class="bottom">...your content here...</div>
</body>
Your main content { <div class="top"> } is defined with a set width, and you use "margin:0px auto;" to automatically center the div.
Since the width of this div is defined and its' smaller than the actuall width of the browser window you'll need to contain it within another DIV { <div class="content"> } to set it's background color (or it won't achieve the effect you're looking for).
The bottom Div { <div class="bottom"> } again is set to have an automatic left/right/bottom margin and this time it's color doesn't need to be set since it was defined by the body style.
hope that helps... -
-
CommentAuthorMister Bubbles
- CommentTimeJul 16th 2006
Just float two columns left in a wrap div (clear the far left one to the left), and float and clear the right one to the right
Example:
#wrap {
margin: 0 auto;
width: 80%;
}
#left {
clear: left;
float: left;
width: 33%;
}
#middle {
float: left;
width: 33%;
}
#right {
float: right;
clear: right;
width: 33%;
} -
-
there's actually a free chapter download of CSS Mastery that covers different techniques to achieve this layout
you can find it here: http://www.friendsofed.com/samples/1590596145.pdf -
- CommentAuthorPettyRider
- CommentTimeJul 16th 2006
I'm doing this on my site right now: http://www.dirtysouthbmx.com
I think you're just going to have to nest <div>s one way or another. Sure it's not the ideal practice, but the only other option I can think of is to somehow positial all the nested elements to a centered effect. I decided to just do the nesting thing as semantically as possible. -
- CommentAuthorAshcrapper
- CommentTimeJul 17th 2006
Thanks for the help chaps!
Ive actually got the CSS Mastery book but havent got to that bit yet, perhaps I should have read it all first hehe
Lovely site by the way PettyRider. Looks fantastic -
- CommentAuthorlittle3skimo
- CommentTimeJul 17th 2006 edited
Ah I've been wondering how this was done.
PettyRider - where did you get the tagboard for your site from, it looks really nice. -
My site uses a similar layout (http://www.sodhi.org/)
I got most of my inspiration from the following article (One true layout): http://www.positioniseverything.net/articles/onetruelayout/ -
- CommentAuthorPettyRider
- CommentTimeJul 19th 2006
Thanks for the comments, guys.
Ashcrapper, by far the BEST username I've ever come across.
little3skimo, I actually first got a tag board from a friend who wrote it up in Perl/CGI based on a flat text database. I had never programmed a thing in my life, but somehow managed to get it to work. Years later, programming is part of my profession. The current one I've rewritten in PHP with MySQL, standards-ized it, CSS-ed it, etc., and I've got it running on the CodeIgnitor framework (http://www.codeignitor.com). It's really a simple little script.
I'm working on getting it "hijaxed" to enhance the experience, but as side projects go, it could be awhile..
Another note: this style of design, the high-contrasting horizontal layers, is a bit of a trendy thing these days. It serves best, I believe, to emphasize important content. Like on my site, I use it to highlight the current batch of articles. Try using it appropriately as a design element (not just 'cause it's THE THING).
1 to 10 of 10