Quote:
Originally Posted by delayedinsanity
Honestly, the first thing I would do in that situation is examine my reasons for creating that kind of complexity and determine what method would be best to simplify the process. Tables or CSS, the less you need to compartmentalize like that the less markup you're going to use and the faster it's going to be -- as well as easier to modify later.
|
Yes this is the issue that I am fighting with. I don't really ever know how a website is going to turn out or look when I am in the initial stages. Even towards the end, I will re-arrange tables and add/delete columns or rows to my liking. It's like painting where you are constantly adding slight touches with a paintbrush..
That's why it's hard for me,(right now at least) to design via CSS and then go back and edit it...of course it all comes down to experience so I just have to get to it...
Also thanks for the DIV tags so I will take a look and disect it and try to figure it out...
With that said, this example took me about 30 seconds to write;
HTML Code:
<div style="width:400px;height:150px;border:1px dashed red">
<div style="width:98px;height:148px;border:1px solid blue;float:left">
<div style="width:96px;height:35px;border:1px dotted green"></div>
<div style="width:96px;height:35px;border:1px dotted green"></div>
<div style="width:96px;height:35px;border:1px dotted green"></div>
<div style="width:96px;height:35px;border:1px dotted green"></div>
</div>
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
</div>
<div style="width:400px;height:150px;border:1px dashed red">
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
<div style="width:98px;height:148px;border:1px solid blue;float:left"></div>
</div>
Rudimentary at best, but the colorful borders should show you that I accomplished your task with very little effort. From that point I have complete control over each DIV element with further refinements such as margins, padding, backgrounds, etc.
It's something that comes with practice, I'm sure. There are some crazy crazy things done with CSS that I couldn't even hope to reproduce at my experience level, but I can guarantee you tables would never accomplish the job. Plus once you include a style sheet with your page, incorporating IDs and Classes, there's just no comparing the cleanliness of the 'code'.
I learned HTML and CSS primarily by dissecting other web sites and having the W3C open in another window, but StumbleUpon search term CSS turns up some snazzy information. Can't go wrong there.[/quote]