Div Tags - WHAT!
- Started
- Last post
- 19 Responses
- ********
I am going back to web design with about a 6 year gap. I can remember allot from back then, and I started to use CCS with Table layouts.
But Div positioning is doing my head in. Float left, relative, absolute, clear float, WFT. Is it me, or did you think that Div tag are a bloody nightmare to deal with the first time you come across them. who in there right mind thought this is a great concept to layout a website. The layout seem so unpredictable at the moment compared to tables.
- ********0
Sit down, have some tea and then read this: http://alistapart.com/
Lots of resources there. Once you get the hang of it divs will make so much more sense than tables ever did.- Thanks for the link, but why move over to div, what els can they do but hold content.********
- You can assign different stylesheets that completely change layout for different devices/media.********
- For one thing.********
- I see. Do that with tables would be almost impossible right.********
- Yeah, you've got it. A text-only browser + tables = evil. But on the other hand with a div+CSS site it's fine.********
- So all this Div float business give completed independent design layouts but using the same content********
- Thanks for the link, but why move over to div, what els can they do but hold content.
- ********0
You can overwrite Div tags by adding align attributes to the tag you want to be different. Once the tag closes the layout defined by the div tag again take effect.
- What!********
- Do you have some CCS code you could post up?********
- That makes no sense, especially to a CSS newbie.404NotFound
- What!
- trooperbill0
<div>This is a Header</div>
<div style="width:20%;float:left">left column</div>
<div style="width:60%;float:left">Content column</div>
<div style="width:20%;float:left">Right Column</div>
<div style="clear:both">Footer</div>whats to know?
- cls0
Had the same feeling when i started with all that div shit. But stick in there, once you get te hang of it you never wanna go back.
- trooperbill0
you can also use table based layout techniques using
display: table-cell; - TD
display: table-row; - TRwhich might be more useful to you
- That doesn't work in wanky IE6 tho' - evil but still about 60% market share.
Gordy22 - 60%? Not exactly... http://www.w3schools…welded
- That doesn't work in wanky IE6 tho' - evil but still about 60% market share.
- canuck0
Yeah, just get back into it. Pick up CSS Mastery by Andy Budd -- good resource. Explains all you need to know.
There is a learning curve, shouldn't take you too long to get the basics down.
- TheBlueOne0
Stick with it...it'll all make sense in a moment of clarity and you'll wonder why you ever suffered with tables before...
- trooperbill0
think upside down tetris - thats how i explain it
- melq0
If you need a head-start take a look at these:
http://www.code-sucks.com/css%20…
http://layouts.ironmyers.com/
- Gordy220
If you're starting from scratch, I would advise you add both a clearfix css file and possible a reset file, too.
Can help with annoying float issues and the reset give you better x-browser compatibility.
http://www.positioniseverything.…
http://meyerweb.com/eric/thought…
- ********0
I Know once I can get the layout divs sorted I am 90% there. It's all up in the air at the moment.
- BattleAxe0
ah yes, yes they are nightmares when you first DIVe into them,
but really the div tag is not the problem it is the styles that you apply to them that make or break them.
here is a little tid bit that I learned via trail and error
say you have a DIV tag with a property width of 200 px , if you you add margins or padding to the DIV it will add to the over all size of your div , so a width of 200px with padding on the left and right of say 10px each, the div is now 220px wide, but your css property will still say 200 px.
this is what kept me boggled for a while because things would shit, so if you need the area to be exactly 200 px , you do 180px width to compensate for the 10px padding that you are adding on both sides
same for heights
have fun
- Gordy220
Try to avoid giving anything that has a width declared on it any padding or margin at all. The reset.css will help with but its easier in the end to pad / margin the child elements
- Humanhand0
do yourself a favor and get CSSedit, Coda or BBedit. It will make your designer wired brain more effective in the code based anarchy.
- penelopes0
does anyone know of a website that helps beginners learn basic structuring techniques? it all gets very advanced very quickly... and couldn't be more confusing...
- if you got the extra change, lynda.com is the bees knees.Humanhand
- http://www.smashingm…
Got some good stuff in there
Gordy22
- trooperbill0
or just outsource all your css to me ;D
- mg330
I think you can learn alot from a css template site like this:
Just download some of the files and see how they work. That's how I learned, using a different site but same thing.
- TheBlueOne0
Here's some simlpe CSS layouts...just check the source code and see how they work...
http://mitchbryson.com/free-css-…
or
http://matthewjamestaylor.com/bl…
or
- ********0
How about instead of asking, "Why use DIV when I can use some archaic shitty table system that 99.9% of the useable web has upgraded away from," ask instead, "How many thousands of new things can I do with a DIV structure that I could never even begin to attempt with a table structure?"
You will be far more satisfied in the end with CSS.