Forum Moderators: not2easy
I could pretty much whack it up with tables, but truely do want to expand in to more css positioning.
I think what I want to do may work using absolute positioning, but I'm really not sure even where to start...
there are curved borders, main bkg images with other bkg images on top in an difficult 3 column structure for css..
I've done the first draft graphic ideas for it but would really appreciate some advice on how to even get started and what direction to go and what I should be checking out to get the job done in the way I'd like to..
[edited by: Robin_reala at 9:11 pm (utc) on April 10, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]
While doing all the design ideas that you’ve added is going to be rather tough for a beginner at CSS it certainly looks possible. I’d suggest you start with a general layout and work your way up from there. The key with CSS design is to get out of the tables mindset - the way you break down a page to code when you look at it. With CSS we care a lot about containing blocks, so let’s start with a basic mockup:
<div id="wrapper">
<div id="topnav"></div>
<div id="mast"></div>
<div id="main">
<div id="content"></div>
<div id="sidenav"></div>
</div>
</div>
<div id="footer"></div>See how I’ve divided those up? On the highest level we’ve got two main blocks: the main box (#wrapper) and the footer (#footer). Then inside #wrapper we’ve got a topnav, a mast, and a main area that contains the content and the side nav.
Now we’ve got our general structure we can start with some very basic CSS for the layout. This won’t give you your rounded corners or even close, but it’s a start:
#wrapper, #footer {
width: 760px;
margin: 20px auto;
border: 1px solid #ccc;
}The width sets the width of the boxes. The margin: 20px auto; says that margins should be set to 20px (top + bottom) and auto (centred left and right). The border just sets a border so we can see where they are. These rules are being applied to but the <div id="wrapper"> and the <div id="footer"> - our two main boxes.
What next? Well, the next big job is getting the main content and the side nav to sit side by side. To start off, let’s add some sample content:
<div id="main">
<div id="content">
<p>Some sample content relating to the site can go here. Nothing fancy, just enough to fill up some space.</p>
</div>
<div id="sidenav">
<ul>
<li><a href="#">Link to somewhere</a></li>
<li><a href="#">Link to somewhere else</a></li>
<li><a href="#">Link to a third place</a></li>
</div>
</div>We’re doing our navigation as a list as it’s reasonably semantic (a list of links) and because it’s easy to style. So how do we get them to sit next to each other? Widths and floats are the key:
#main { overflow: auto; }
#content { width: 580px; float: left; }
#sidenav { width: 160px; float: right; }The widths don’t add up to 160px on purpose: I’ve left a little gap between them to allow for a gutter. By floating the first block left and the second block right and assigning them both a width they’ll sit neatly next to each other.
Notice I’ve not yet mentioned the overflow:auto on #main. One of the perennial problems that crops up with CSS design is that parent elements don’t contain their floated children. This is a purposeful design decision but one that can easily catch out beginners. Here we’re using overflow to trigger a side-effect: elements with a value for overflow of anything other than ‘visible’ with always contain their floated children. If we don’t set a width or a height to the container we’ll never see any of the other effects.
Hopefully this will give you enough to get started with. CSS in and of itself isn’t too hard, but there’s a double whammy of browser bugs (thankfully less and less of an issue) and coming from a tables-based mindset to deal with. Luckily we’ve got some talented people here in CSS who I’m sure will be willing to help out with any specific problems :)
I wish there was a way round it here, we work with design yet can't refer to it, it is so frustrating...
I have a site requiring this, that I'm working on. I have a solution but it's neither easy, nor pretty.
The container in question sits on top of another image, so the corner images must be transparent, not white, and the container background itself then can't reach the corners or it will show through the corners outer transparent part.
Your basic CSS is pretty much what I use as a starting template for almost all production two-column content sites these days, by the way (although I clear the floats and use a maincontent background image for the columns). There's little reason for any CSS beginners to feel too nervous about using these concepts.
Dabrowski - that’s getting a little off topic here. Want to start a new thread for that specific example?
