Positioning and Arrangement using CSS

[lostcommander]

Hello. I am relatively new to CSS and am trying to rework my site so all the formatting is in CSS. Currently the page layout is done using tables, but it is not quire working correctly because the widths are not correct.

I would like the header/top of the page to be logo, banner over tabbed navigation, then login/user info (4 sections total).

With tables, the logo cell width is too large, even though I set the cell width in CSS to be 256px and the logo image itself is 256x128 px. min-width did not work either.

I then tried changing all the cells to DIVs and positioning everything using CSS, but floating logo left and user info right made them hang down past the banner+navigation.

http://www.vrexchange.com/trade/index.php?page=search

Any help, tips, or links to some good reading on CSS positioning would be nice. I have already read through the w3schools.com stuff and a few other pages, but I clearly still do not understand it well enough to reliably apply it. :dunno:

 

[misson]

Any help, tips, or links to some good reading on CSS positioning would be nice.

Start from scratch. It's usually less work and produces better results. Remember, HTML is supposed to define the structure of a document; if you rewrite a document containing presentational HTML, chances are it will be reflected in the rewritten page's structure.

Once you've structured the page, write the style sheet. Sometimes you'll need to add additional elements for style rules to target (usually wrapper elements).

CSS doesn't mean get rid of tables completely. The trade data you're displaying is tabular data, so keep that in a table.

Before getting in to positioning, make sure you understand the W3C box model. John Hicks created a 3D box model diagram (interactive version) that pretty much shows it all.

Vandelay Design has this rather large list of CSS resources. I can't speak to the quality of all of the sites listed, but it has the big ones (A List Apart, Quirksmode, Position Is Everything, CSS Zen Garden &c).

 

[marshian]

I then tried changing all the cells to DIVs and positioning everything using CSS, but floating logo left and user info right made them hang down past the banner+navigation.

Floating divs are a good approach!
I'll give you a very useful tip:

<div style="float: left; width: 200px; height: 100px; background: yellow;"></div>
<p>This is a paragraph of text.</p>

This will show the div next to the text. (Try it!)

<div style="float: left; width: 200px; height: 100px; background: yellow;"></div>
<div style="clear: both;"></div>
<p>This is a paragraph of text.</p>

This will show the floated div and the text starts below it.

 

[lostcommander]

CSS doesn't mean get rid of tables completely. The trade data you're displaying is tabular data, so keep that in a table.

I did know that, but a lot of people seem to miss it, so it is worth repeating, thanks.

I knew the box model as well, but that 3D CSS box model image confirms it and really helps visualize all the parts of it.

That list of CSS resources should come in handy once I have a better idea of what I am looking for!

For the benefit of anyone else trying to learn this, I found the following like informative:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

and this one makes it a lot easier to write some test formatting code to see what stuff ends up where with what settings:
http://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relative

 

[xav0989]

The first link you provided was in fact very useful. I learned a couple tricks that I didn't know! guess I'll sleep not so dump tonight! :biggrin:

 

[misson]

auto-clearing

There's another neat little trick to make a parent contain floats: setting 'overflow' on the parent. No non-semantic elements needed. Setting overflow can have other affects; your mileage may vary.

There's also auto-clearing, which is pure CSS but more verbose and requires support for the :after pseudo-class. lte IE7 don't support :after, but have their own auto-clearing behavior, so lack of :after support isn't an issue.