Reply

Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Css ?

 
0
  #1
Feb 17th, 2005
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!)
Reply With Quote Quick reply to this message  
Join Date: Nov 2004
Posts: 62
Reputation: 2ndPlatform is an unknown quantity at this point 
Solved Threads: 0
2ndPlatform's Avatar
2ndPlatform 2ndPlatform is offline Offline
Junior Poster in Training

Re: Css ?

 
0
  #2
Feb 17th, 2005
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).
Reply With Quote Quick reply to this message  
Join Date: Nov 2004
Posts: 62
Reputation: 2ndPlatform is an unknown quantity at this point 
Solved Threads: 0
2ndPlatform's Avatar
2ndPlatform 2ndPlatform is offline Offline
Junior Poster in Training

Re: Css ?

 
0
  #3
Feb 17th, 2005
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:

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <div class="bodyDIV">
  3. <div class="leftColDIV">
  4. Content for the left col - TEXT
  5. </div>
  6. <div class="leftColDIV">
  7. Content for the right col - IMAGE
  8. </div>
  9. </div>

And then your CSS might look something like this:

HTML and CSS Syntax (Toggle Plain Text)
  1. .bodyDIV {
  2. width: 744px;
  3. }
  4.  
  5. .leftColDIV {
  6. width: 230px;
  7. float: left;
  8. }
  9.  
  10. .rightColDIV {
  11. width: 514px;
  12. float: right;
  13. }
Reply With Quote Quick reply to this message  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: Css ?

 
0
  #4
Feb 18th, 2005
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!
Reply With Quote Quick reply to this message  
Join Date: Nov 2004
Posts: 62
Reputation: 2ndPlatform is an unknown quantity at this point 
Solved Threads: 0
2ndPlatform's Avatar
2ndPlatform 2ndPlatform is offline Offline
Junior Poster in Training

Re: Css ?

 
0
  #5
Feb 18th, 2005
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.
Reply With Quote Quick reply to this message  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: Css ?

 
0
  #6
Feb 19th, 2005
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:
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Css ?

 
0
  #7
Feb 21st, 2005
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...
Reply With Quote Quick reply to this message  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: Css ?

 
0
  #8
Feb 21st, 2005
... 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!
Reply With Quote Quick reply to this message  
Join Date: Nov 2004
Posts: 62
Reputation: 2ndPlatform is an unknown quantity at this point 
Solved Threads: 0
2ndPlatform's Avatar
2ndPlatform 2ndPlatform is offline Offline
Junior Poster in Training

Re: Css ?

 
0
  #9
Feb 21st, 2005
Originally Posted by 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...
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.
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Css ?

 
0
  #10
Feb 21st, 2005
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?
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC