How to get around using tables ? CS5 Html5 plugin question too

[robtmathias]

I am doing an e-commerce site. I use Dreamweaver CS5. I want to have my standard sidebar, and then have the sales items (they include pic, description, buy button) be a set number of pixels. Then to accomodate different sized screens scaling: Have it only have an amount of sales items that will fit in between the 2 sidebars fully, and then the page will be taller (scroll down further) if the screen was narrow and could fit many in a row. For example there were 4 in a row on 1980x1024, and the page didnt scroll down at all, but on 1280x1024 there could only fit 2 sales items between the sidebars and you had to scroll down lots to see all the items. Can this be done automatically? How? (I played around with CSS align properties and didnt have any luck, but maybe there is some kind of floating divs or some kind of containment field other than divs that will have fixed pixel dimensions and neatly contain a pic, description, and buy button, and still be able to float - stacking and unstacking neatly into only rows that fit the screen as you scale bigger and smaller?)

Above is all regarding the standard page, but what can you guys tell me about the CS5 HTML5 plugin's support for multi screen development so that there will be a mobile version that loads on cellphones, an iphone version that loads on iphones, a tablet version that loads on tablets, etc ?

 

[Med]

Take a look at the CSS overflow property.

 

[robtmathias]

Sounds good, indeed. Will check it out, thanks! Do divs have to have a % or px or in/cm placement, or can they free float via css alignment/overflow properties ? Is there such thing as a free floating version of an AP div, or is there another unit (other than a div) which could have px size defined, contain a pic, description, and html coded buy button, and stack neatly into rows according to how many will fit in a row between the sidebar(s) ?

Or maybe there is some trick I could to get this effect? I want my sales "items" to have a defined size instead of scaling percentages, and fixed px tables wouldnt work nearly as well as "how many items will fit in between the sidebars on given size screen" concept.

 

[Med]

Do divs have to have a % or px or in/cm placement, or can they free float via css alignment/overflow properties ?

DIVs can be measured in pixels, cm, em, etc. You want to use the CSS width property. See here for more information:
http://www.w3schools.com/css/pr_dim_width.asp

Is there such thing as a free floating version of an AP div, or is there another unit (other than a div) which could have px size defined, contain a pic, description, and html coded buy button, and stack neatly into rows according to how many will fit in a row between the sidebar(s) ?

DIVs are block elements which are used to divide your content into a logical order so the short answer is no. The DIV serves this precise purpose, the power of CSS is setting up your DIVs to act the way you want them to (i.e. float).

Or maybe there is some trick I could to get this effect? I want my sales "items" to have a defined size instead of scaling percentages, and fixed px tables wouldnt work nearly as well as "how many items will fit in between the sidebars on given size screen" concept.

If I am understanding correctly, it sounds like you just want to put your items (that have a fixed size) into a wrapper that has a variable size. That is pretty simple. Just define a set width for your sales items (in pizels or whatever), and then wrap them in a div that has a % width (like 33%).

 

[robtmathias]

DIVs are block elements which are used to divide your content into a logical order so the short answer is no. The DIV serves this precise purpose, the power of CSS is setting up your DIVs to act the way you want them to (i.e. float).

Interesting, so it would be the CSS overflow properties which cause several divs to float neatly in rows, able to have more or less in a row depending on the size of the wrapper they are in ?

If I am understanding correctly, it sounds like you just want to put your items (that have a fixed size) into a wrapper that has a variable size. That is pretty simple. Just define a set width for your sales items (in pizels or whatever), and then wrap them in a div that has a % width (like 33%).

Fantastic, and the actual items, which each have a picture, description, and buy button, and just need to float via CSS properties, what kind of div do you recommend for them? And what kind of div do you recommend to wrap them in ?

Thanks for all the help!

 

[Med]

Interesting, so it would be the CSS overflow properties which cause several divs to float neatly in rows, able to have more or less in a row depending on the size of the wrapper they are in ?

Correct.

Fantastic, and the actual items, which each have a picture, description, and buy button, and just need to float via CSS properties, what kind of div do you recommend for them? And what kind of div do you recommend to wrap them in ?

Well im not sure you're asking the right question as there aren't different "types" of divs, the way a div is displayed is based solely upon how you style the DIV in CSS. As I said earlier and without doing the coding for you, you create a wrapper div and set that div to have a % width (width:33%), and then put all of your sales item divs in there. The sales item div may have a class name like .salesItem, and it would have a width property that is fixed (width: 300px). Just apply a position:relative, and float:left, right or whatever and that should get you the desired effect.

 

[robtmathias]

I am in CS5 coming from CS4 and hadnt ever learned CSS hand codes, this position:relative is what I had been missing in truth, and there is no thing for it on the pre-defined CS4/5 fields at the bottom of the screen like there is for CSS Align (or float: ?) properties. Guess thats what friends on the dev forums are for

This was SO very helpful, Med! I am on my way now. This site means alot to me.