Author Topic: My amble towards comptency: Why use <div>?  (Read 1216 times)

0 Members and 1 Guest are viewing this topic.

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
My amble towards comptency: Why use <div>?
« on: August 20, 2008, 10:31:08 AM »
As I've posted before, I've found myself thrust into the role of company "internet dude". I was able to get away with looking like a wizard for awhile (That Help file is, uh, helpful), but generally the challenge has been ramping up. In High School I took a small fortune in Comp Sci. classes (I even got Cisco certified!) before I go to college and decided I'd major in, haha, English and Philosophy.

Point is: I'm not stumbling my way towards being a competent computer dude. As a part of that, I'm relearning HTML from the ground up. I'm designing two new sites for our company and they're both informationally focused.

My Q is this: Why would use use a DIV element over a TABLE element? I find DIV a whole lot easier and more flexible, but am I overlooking something? DIV has a lot of semantic usefulness as well playing nicely with CSS sheets. I also find it easier to comprehend. But am I hamstringing myself by relying on DIV instead of Tables?

I get the strong feeling that Tables are a really antiquated way of regulating the design of a page, but I just want to make sure I'm not insane-o.
wha

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #1 on: August 20, 2008, 10:54:23 AM »
DIV is a lot more flexible generally and servers to making more functional websites.

My only problem is that IE6 pushes divs a few pixels.

I guess my other question is: Is it okay to use DIV as a stand-in for TABLE or is there a point in time in which I'm going to hit a wall because I only used DIV.
wha

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #2 on: August 20, 2008, 11:31:24 AM »
DIV is a lot more flexible generally and servers to making more functional websites.

My only problem is that IE6 pushes divs a few pixels.

I guess my other question is: Is it okay to use DIV as a stand-in for TABLE or is there a point in time in which I'm going to hit a wall because I only used DIV.

Web standards (whether you think they're bullshit or not) require you to put all tables in to div tags, so yes, its completely possible.

At first it may seem cumbersome, but once you get used to it, you could format a page much quicker with DIVs than tables.

I find DIV to be much more intuitive and flexible, I just wanted to make sure I wasn't misinterpreting what was in front of me. Thanks!
wha

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #3 on: August 20, 2008, 12:48:55 PM »
Why would you use FLOAT as opposed to ABSOLUTE if they achieve the same end? Does FLOAT allow for some relative, on-the-fly positioning that ABSOLUTE does not?
wha

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #4 on: August 20, 2008, 12:54:00 PM »
Or is the advantage that it allows for "liquid", scalable design?
wha

demi

  • cooler than willco
  • Administrator
Re: My amble towards comptency: Why use <div>?
« Reply #5 on: August 20, 2008, 01:05:20 PM »
The liquid bit. Time to move to the 22nd century, caveman

It's ok to use Tables for Tabular data, btw
fat

APF

  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #6 on: August 20, 2008, 09:34:08 PM »
<div> and <span> are just generic elements with no additional meaning outside of, "this is a block-level element" and, "this is an inline element" (respectively).  The way most folks build websites today, they add classes to divs and spans to basically create custom elements, which they then position using whatever technique makes the most sense for their layouts.  The reason people shy away from using tables for layouts is because while avoiding them can be complicated, using them is fuck all complicated, and adds a lot of cruft that's impossible to sift through. Honestly though it's not all that awful, since tables can actually do things cross-browser CSS can't do all that well.  But I'll still throw away your resume if I see your sites use them for layout.  I'd rather your stuff broke in everything but the latest Webkit nightlies.  Floats were more or less intended to be for things like images and callouts / quotes in paragraphs, so that text could wrap around them elegantly.  However since you can float any element it's now used for positioning, much like tables have been abused for positioning.  If you try this though, learn the word "clearfix" since you'll be using it a lot.
***

Van Cruncheon

  • live mas or die trying
  • Banned
Re: My amble towards comptency: Why use <div>?
« Reply #7 on: August 20, 2008, 09:57:13 PM »
lol web developers

how's life at the bottom of the barrel

i kid, i kid, i used to program in perl once
duc

APF

  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #8 on: August 21, 2008, 05:40:12 PM »
Hah, just saw this  :lol


Technically speaking, I'm at the top of the bottom of the barrel.
***

Tundra

  • Shower Expert
  • Member
Re: My amble towards comptency: Why use <div>?
« Reply #9 on: August 22, 2008, 09:29:45 AM »
use <span>, not <div>...

<div> is so 2001...
poo

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #10 on: August 22, 2008, 09:42:54 AM »
use <span>, not <div>...

<div> is so 2001...

Educate me, plz.
wha

APF

  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #11 on: August 22, 2008, 11:07:26 AM »
Use b it's shorter than span which means you'll have faster pages and beat the competition!!!


(don't do this)
***

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #12 on: August 22, 2008, 11:43:33 AM »
Is it crazy to do the following?:

I'm trying to create a media gallery. We're pretty regularly in the papers and on TV and we've also got a ton of fan photos. Here's my thinking- Create a div that wraps two smaller div "rows" (One for the photos, another for captions). Inside of those rows are tables used to regulate the display of the photos and captions.

Here's the theory code:

Code: [Select]
<div id="mediarow">
<div id="picrow">
<table id="picturetable">
<tr id="picturerow">
<td id="photo">
</td>

<td id="photo">
</td>

<td id="photo">
</td>

<td id="photo">
</td>
</tr>
</table>

<div id="captionrow">
<table id="captiontable">
<tr id="captionrow">
<td id="caption">
</td>

<td id="caption">
</td>

<td id="caption">
</td>

<td id="caption">
</td>
</tr>
</table>

</div>
</div>
</div>

Is it goofy to do it this way?

wha

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #13 on: August 22, 2008, 12:01:48 PM »
Instead of tables, I suppose I could just use an element and float them, but I'm looking to keep a pretty unified style. Thoughts?
wha

jiji

  • Member
Re: My amble towards comptency: Why use <div>?
« Reply #14 on: August 22, 2008, 12:51:49 PM »
I'd do it something like this. You can put both the captions and the photos inside the same containing "cell" divs without using tables.

Code: [Select]
<style type="text/css">

.mediarow {
display: block;
padding: 5px;
margin: 5px;
}

.photocell {
padding: 3px;
margin: 4px 2px;
float: left;
width: 93px;
text-align: center;
border: 1px solid black;
}

.photo {
border: 1px solid black;
margin: 0px auto;
}

.caption {
display: block;
text-align: center;
width: 100%;
font-size: 9px;
}
</style>


<div class="mediarow">
<div class="photocell">
<div class="photo"><img src="photo1.jpg"></div>
<div class="caption">Caption 1</div>
</div>
<div class="photocell">
<div class="photo"><img src="photo2.jpg"></div>
<div class="caption">Caption 2</div>
</div>
<div class="photocell">
<div class="photo"><img src="photo3.jpg"></div>
<div class="caption">Caption 3</div>
</div>
<div class="photocell">
<div class="photo"><img src="photo4.jpg"></div>
<div class="caption">Caption 4</div>
</div>
</div>
OTL

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #15 on: August 22, 2008, 04:41:49 PM »
What's the difference between class and id? They seem to do the same thing- Is it just a matter of semantics?

Are id's only identifiable when they're attached to custom classes, #whatever?

So Class is pre-established elements (Body, h1,h2,img) and ID is used primarily for custom items?
wha

Bocsius

  • is calmer than you are
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #16 on: August 22, 2008, 04:46:39 PM »
In theory, you'd want ID to be unique. If you're going to use CSS to style a bunch of elements the same way, you'd want to use class. Use ID so you can work with something in a scripting environment, be it client or server side scripting.

jiji

  • Member
Re: My amble towards comptency: Why use <div>?
« Reply #17 on: August 22, 2008, 04:49:24 PM »
You can only have one instance of an id in a document. You can apply a class to as many elements as you want within the document.  So I'll use an id to apply styles to a central design or structural element that I know I'll only have one of at any time.
OTL

GilloD

  • TAKE THE LIFE OF FRED ASTAIRE. MAKE HIM PAY. TRANSFER HIS FAME TO YOU.
  • Senior Member
Re: My amble towards comptency: Why use <div>?
« Reply #18 on: August 22, 2008, 04:54:37 PM »
Awesome. Thanks a ton, guys. I learned a shitload this week, I'm sure I'll be back in a bit with more noob Q's
wha