Css ?

[autocrat]

Ok, getting a little confused......

Evey time I get to playing with web-coding, theres new complaints, new coding practices, new do's and don'ts, new contradictions of what came previously!

I am of the favour of tables for layout..... yet I am told that NOW it should all be done with CSS... the html (xhml ?), should have the content, the css should hace the affects..... ?

Fine!

So how the hell am I meant to apply all the layouts I can have in tables, to a flamming CSS?

for example, I have several paragraphs of text, and several images. I want the layout as follows....

TXT IMG
IMG TXT
TXT IMG

Whats more, I want it all FLOWING! I want it so the when the side of the browser window is dragged inwards, and the page gets smaller in the width, I want these elements to reposition!

(it appears unlike many designers, IU am one of the few that beleives and codes for a static head/nav system, and the main content should be sizeable and able to shift if the window size changes! None of this "ALL" should be centralised for me!).

I can alter the appearence of txt no problem... yet as soon as I start aattempting to apply positioning etc.... it is ignored!

Am I missing something?
I've looked on the net, and I cannopt find a tutorial, guide etc. that covers combining different element formatting techniques! I can find sites that do what I want, yet I can't grab the CSS file!

Any help or pointers would be great!
As would a VALID and JUSTIFIABLE reason why the CSS is better than the TABLE... ( I understand the time saving, the overall website affect, just not the layout side!)

[2ndPlatform]

A highly debated point - tables vs. divs. You can use either, and either have their own problems between browsers.

If you look out there, you'll probably find the generally accepted consensus that the difference between using the two is that tables were originally intended for the display of tabular data... not for layouts. People just started using tables for layouts. DIVs, on the other hand, have a little bit more flexibility in what you can do with them via CSS (positioning, style, etc.) and were meant for the whole layout purpose.

I think you can use either for layouts... I choose DIVs most of the time because it ends up being simpler code (if you can get past all of the positioning frustrations that sometimes come with it).

[2ndPlatform]

For your layout:

TXT IMG
IMG TXT
TXT IMG

You might have three different DIVs... each one being one "row" of your layout. So take that first row... you might have something like this:

<div class="bodyDIV">
  <div class="leftColDIV">
        Content for the left col - TEXT
  </div>
  <div class="leftColDIV">
        Content for the right col - IMAGE
  </div>
</div>

And then your CSS might look something like this:

.bodyDIV {
	width: 744px;
}

.leftColDIV {
	width: 230px;
             float: left;
}

.rightColDIV {
	width: 514px;
             float: right;
}

[autocrat]

thanks for the response!
(did I put this in the wrong place?)

I prefer tables personally... I find it so much easier to break a layout down using a simple ruler and pencil.... no real coding requireds at all!

Yet thios is apparently frowned upon!

I'm seriously considering doing Web-design... yet looking at all the BS that goes with it, the lack of communication between browser designers, lack of conformity, penalisiation of sites by SE's, the vast number of others that do it and do it badly (I know I shouldn't put others down, but damn, somne people should keep away from computers AND graphical design!).

I'm pretty quick with learning code, I'm a wizard at design and organisation, and pretty good with graphics, real or digital.... so I wouldn't mind having a go..... but I'm hessitant due to the vast amount of difficulty all these other influences cause!

[2ndPlatform]

Well, the bad news is that all of those inconsistencies probably aren't going to go away. I share a lot of your frustrations - especially between browsers. A friend of mine reminds me regularly though, that if there were no browser wars, none of them would be striving to make a better product for us, the consumer.

It ain't gonna be a cakewalk. I don't think it's worth it to do something if it IS a cakewalk. Cakewalks are for looters (read Atlas Shrugged) -- so here's your chance to separate yourself from the crap, if you are really serious about doing it. Learn a lot... be better than the rest... and you'll be fine.

But if you get frustrated that quickly... you're gonna have some interesting times ahead of you.

[autocrat]

ah, I don't mind the frustration, so long as it has an end/reward!
The best things in life are worth the effort.... but I just can't believe that they have got away with so much crap, yet everyone else is meant to conform!
What a laugh!

Still, I think I'm getting to grips with css... the basics were simple, and I think I have generated a decent layout.... it works in ie6/win and ns6/win.... just need others to let me know about mozie and mac etc.

Isn't there someway of all web-designers petitioning or something?
I mean, if there is a standards group, and these are the people that generate the languages, or strongly influence them, shouldn't they be bullying the browsers to conform?

I understand the competitive side, yet that should be aimed at users, not designers! Make better buttons, simpler layout, multiple layouts for different usages/level of use etc.... not what flaming code it takes... it would be like car designers building engines to run on a variety of different petrols...... people would scream and shout until they backed down and conformed to the market... so why isn't it happening with this?

Still, whinging over.... got to go play with css... and when I get that tucked away, I get to play with php and mysql.... joy!
:grin:

[DaveSW]

2ndplatform, you need a clear: both; in there on something under your floats or your layout is going to get screwed up totally in anything other than IE...

[autocrat]

... DaveSW ...

I've got / used / toyed with the "Clear: both;" code after floats..... be it on the last item floated, or even on a spare "gutter" div.... seems to make little difference sometimes... depends upon the content onf the divs and their sizes... or atleast the way I've managed to pull things together! Have a look at the code on my liks, you'll see what I mean!

Still, if you could point what I have hashed up, then I'll take it like a man, (cry when no one is looking!), then go and fix it as told, ('cause I really am a good boy! *cough*). Seriously though, any help is always welcome, and a lesson learned is, well, something I didn't know beforeehand, which is always good!

[2ndPlatform]

2ndplatform, you need a clear: both; in there on something under your floats or your layout is going to get screwed up totally in anything other than IE...

Dave -- thanks for the tip -- I'm a little confused though. If you're referring to my site specificially (http://www.secondplatform.com) it seems to load fine in IE, Netscape, FireFox. If you have a sec, can you be more specific? I always welcome feedback, and appreciate your time.

Thanks.

[DaveSW]

2ndPlatform, I mean in the sample code you gave earlier in the thread, not anywhere on your site ;)

autocrat, clear left/right/both can be used as follows:

<div class="bodyDIV">
<div class="leftColDIV">
Content for the left col - TEXT
</div>
<div class="leftColDIV">
Content for the right col - IMAGE
</div>
<hr>
</div>

If you then apply clear:both to the hr your containing div will always be longer than the two floated elements inside it - In moz it would otherwise just default back to 0px high...
Generally with that sort of layout you would be specifying the background on the bodyDIV, so if it drops to 0px on an inversed color layout you'd be wondering what was going on.
You also need an element with clear:both after you've finished all your floats and want to get back to normal layouts...

Have a look at the code on my liks, you'll see what I mean!

Have I missed a link in here somewhere?

[autocrat]

sorry, my bad!

The links are...
http://www.bokb.co.uk/test/Untitled1.htm
http://www.bokb.co.uk/test/Untitled2.htm

not much, just playingh and trying to figure the layouts correctly... once I have that, I can generate a library of templates for self refrence.

I just seem unable to keep things mutable/liquid, whilst keeping set widths on objects and preventing things from overlapping!

To be frank, if you intend to generate the equivelent of a magazzine, catalogue or other such medi on the net, CSS appears more than useful.... but as soon as you try replicating something that uilses real mutable/graphical trends, it tends to foul things, and tables are a better choice from where I'm sat.

Saying that... is it permissable to still use tables whilst applying css to them, a sort of step between,. as this would permit the solid control of positioning and layout from both, whilst eliminating some of the lack of support for css functions in current browsers?

Further, is there anywhere with a set, hard and fast guide/rule for what should be practiced and what shouldn't? I can find stuff about the coding, accepted sybtax, what browsers support.... yet things like using CSS, not using tables, not using frames etc seems to be more based on preference and opinion, not coding rules by anyone official, (that I can find).

I want to conform, (never thought I'd say that! LOL), and I would really like to stick to the recommendations, but if the browsers are supporting the standards, then it makes the design process far to much effort... you have to resort to parses/hacks, which is correect coding, so you lose either way!