homepage Welcome to WebmasterWorld Guest from 54.205.7.136
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
I don't understand divs
I can visualize tables, but not divs - can someone explain?
max4




msg:3673651
 2:42 am on Jun 13, 2008 (gmt 0)

I have seen search results showing posts dating as far back as 2002 with webmasters religiously holding on to the idea that divs are for layout and tables are for tabular data. I would like to convert my layout from tables to divs but I just can't seem to understand exactly what a div is.

w3schools defines a div as a division or a section in a document; but that isn't enough for me to visualize a div. When I think of a table, I can see the rows and columns and I know where everything should go before I even type in the first character.

I did some searching on the forums and came upon a great post by SuzyUK showing a simple div top nav bar; which was great because I have one of those. With a few modifications, and many hours, I was finally able to create the bar and have it look and feel exactly like it would in a table. I used CSS-P to organize the links. Now this is just for a simple nav bar, where all the links are organized horizontally. My layout involves tables with row and colspans and very complex positioning methods. I can't even begin to visualize that in divs aside from using CSS-P to position everything, and I feel that would take up more bits than my tables do.

What's more is that I have noticed people creating very lean sites using <div> <ul> <li> etc. When I try to do this I just get a list with big bullets. As you can see, I'm quite perplexed. Currently, my div layouts would be just as bulky as my table layouts.

I need somewhere to start, so I pose the question: when you think of a div, what do you see?

 

naitsirhc26




msg:3673681
 4:45 am on Jun 13, 2008 (gmt 0)

When I think of a DIV - I think of an incredibly flexible "space" on your site that can be manipulated to any size (e.g. width/height) and placed inside other divs, above other divs, to the left of other divs, etc., etc...A Div is just a "space" holder. You define the div using CSS styles.

So say you want a website that is 800 pixels in width, and have it centered.

---------------------------

<div style="color: #FFFFFF; padding: 20px; width: 800px; background: #000000;

margin: 0 auto; text-align: center">
Text goes here.

</div>

---------------------------

There's your site. All contained within a DIV tag with appropriate styles. Go ahead - place that code into Notepad and view it using your favorite browser. It's just a "space" that you've rendered on your site. So you want a nav bar? Here you go.

--------------------------

<div style="color: #FFFFFF; padding: 20px; width: 800px; background: #000000;

margin: 0 auto; text-align: center">
<div style="width:100%; height: 20px; background: #990000">home contact

about</div>

</div>

-------------------------

This time - you've placed your nav bar div inside of your main "page" div. Are you starting to see how it works? Throw that other piece of code into your browser and see how it comes out.

As you increase your knowledge of the CSS language - you'll be able to work and place divs WHEREVER and HOWEVER you please....they are amazing. I can't imagine building without them anymore. Let me know if you need any other help!

max4




msg:3673704
 5:44 am on Jun 13, 2008 (gmt 0)

That was great Nait! From what I read, I see tables now sort of like a 2-D field, limited to x,y. If I want to separate links I would need several td or tr tags, in a sense, create the site using boxes limited to a 2-d plain. Not saying that divs are 3-d, but they have a greater flexibility. Rather than being limited by a grid of boxes, I can now move the boxes and even overlap them if I wanted; giving me that extra degree of freedom.

What I still don't understand is how this will save me space or load faster. With a table I would do:

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

with divs

<div>
<ul>
<li></li>
<li></li>
</ul>
</div>

Or is the use of divs beyond the issue of saving space and geared more towards enhanced flexibility?

Xapti




msg:3673746
 7:12 am on Jun 13, 2008 (gmt 0)

Generally you're not saving much bandwith using tables, no. It makes little sense for people to say that. What may be true is that tables may take a bit longer to load, due to mathematical operations it may perform to calculate cell sizes and stuff.

The main reason for not using tables is because it's improper (non-semantic). I could use the analogy "eating with a knife instead of a fork", although I personally use dull knifes to eat lots of times, so I suppose that doesn't really work for me :P

But as mentioned, it makes things much more flexible to design. Because of this, you don't need spacer images, empty cells, or other stuff like that just to get a basic page layout going. Floating images for instance, don't even need a container, while using tables it would be a fair bit of work, and wouldn't even work properly (if you wanted text to wrap underneath it).

Generally, you won't ever be having divs overlap other divs, but it is true that it's possible. A main advantage over tables is that you can have a continuous content area that isn't really a square, due to the fact objects can be floating on various sides, while the content wraps around it. This enables L shaped, and T shaped continuous areas, for instance (although a table based layout could in theory use floats as well and get the same thing, but generally people sorta consider it floats vs. tables, not floats vs. tables + floats). In theory, you can make even crazier areas, such as a curved, or very irregular container, but it would require many many floats (each the height of a line)

One of the main reasons people use tables, is to get vertical centering, or other rarer, very particular, picky design desires. Most obviously do it because of it's what they are used to or stuck with though, of course.

[edited by: Xapti at 7:13 am (utc) on June 13, 2008]

naitsirhc26




msg:3673758
 7:24 am on Jun 13, 2008 (gmt 0)

Using DIV combined with CSS is better because of flexibility offered now and into the future, smaller page sizes, and better for search engines. The keyword to pay attention to here is CSS. If you take a look at my previous examples - instead of placing the styles in each and every page - they would be located on a single CSS document that is linked to on every HTML page. So the previous example would be linked to a CSS document that would look something like this.

---------------------
#wrapper {
width: 800px;
etc...
}
---------------------

the above styles would then be linked to the DIV because the div would have the id of "wrapper." Like so....

---------------------
<div id="wrapper"></div>
---------------------

So instead of writing out the style on EVERY page - you have the flexibility of applying that style to every HTML document using only one instance of the CSS styling.

As for search engine readability - as well as speech/text browsers - they like CSS much more because of its semantic markup. When writing out a tabled website its structure doesn't follow a "book like" structure. Meaning - your putting the text out of order due to the coding of columns and rows. Its just like defragmenting your computer. You want everything to be put in a book like order - where each page comes next.

As for some further explanation of how to make your DIVs act like a table - consider the following example.

---------------------
<html>
<body>
<div id="wrapper" style="width:800px">

<div id="column1" style="width: 50%; float: left; background:
#FF0000">content goes here</div>

<div id="column2" style="width: 50%; float: right; background: #990000">content goes here</div>

</div>

</body>
</html>
--------------------

Put that into your browser via Notepad - and see what happens. Look familiar? It looks much like a table using <tr><td>content goes here</td><td>content goes here</td></tr>.

As you can see I added the styles directly to the divs - but I also added id tags - so you can use those hooks and place those styles directly into your CSS styling page, using those ids.

Hope this helps explain the powerful combination of CSS/DIVs further!

max4




msg:3674047
 1:51 pm on Jun 13, 2008 (gmt 0)

Oh, yeah. CSS is definitely a powerful language. I designed my page using CSS + Tables, I have 0 html tags aside from cellspacing="0" and <td> <tr> <table> <form>. I'm just a bit backwards when it comes to divs.

I tried to use <ul> and <li> last night (practically passed out working on it) to rescript my upper nav bar and I ran into some serious problems. Here is an example:

Old layout:

<table fluffcodes="fluff:many;">
<tr>
<td class="a c"><a href="#">link</a></td>
<td class="a r">&nbsp;¦&nbsp</td>
<td class="a c"><a href="#">link</a></td>
<td class="a r">&nbsp;¦&nbsp</td>
</tr>
</table>

I tried making something like this without tables and came up with the following:

ul#nav
{
list-style:none; width:800px; height:30px; margin:0 auto;
text-align:center;
background:#fff;
background: url(../../img/cat.gif);
}

#nav li
{
float:left;
display:block;
text-align:center;
padding: 0 5px 0 5px;
position:relative; top:9px;
border-right:solid; border-right:1px; border-color:#ffffff;
}

#nav a
{
display:block;
font:bold 14px 'Arial';
text-decoration:none;
}

<ul id="nav" class="l2">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li style="border:none; position:relative; left:175px;"><a href="#">link</a></li>
</ul>

That is <ul> without divs. The page loads fantastically in IE7 but horribly in Firefox (for a change). Firefox refuses to maintain the 800px width that I set and expands the list to around 900px, causing the background image to repeat itself. I can't seem to figure out how to make my nav bar work using Firefox. I'm sure all of this is just the learning curve, I really appreciate your detailed explanations Nait; I liked the part about flowing like a book, it described the fluidity of using divs and its contrast to the rigidity of tables.

naitsirhc26




msg:3674269
 6:02 pm on Jun 13, 2008 (gmt 0)

The following might be more of what you're looking for. I think you had your assignment operators a little bit mixed up - but by looking at it now it should come up right in both browsers. Also - your goal was to make the forth link move over to the right, correct? If so - you succeeded. :-) Let me know what your think - and if this is what you were trying to accomplish. I made the background black - just for "seeing" purposes.

In both browsers it should be 800px. I don't know why - but I've always been a fan of just typing out the links - without a list. My way might not be correct - but its how I've worked with navigation bars - and its worked for me. You might run into problems though without lists when doing drop downs etc...

----------------------------

<html>

<head>

<style type="text/css">

#nav {
width:800px;
display: block;
height:30px;
background-color:#000000;
margin-left: 0px;
}

#nav a {
text-decoration:none;
padding: 0px 5px 0px 5px;
}

#nav a:hover {
text-decoration: underline;
color: #FFFFFF;
}

#special_link {
margin-left: 200px;
}

</style>
</head>

<body>

<div id="nav">

<a href="#">Link1</a>
<a href="#">link2</a>
<a href="#">link2</a>
<a id="special_link" href="#">link4</a>

</div>

</body>
</html>

max4




msg:3674301
 6:55 pm on Jun 13, 2008 (gmt 0)

I fixed the problem by using <p> instead of <ul> and <li>. I was impressed though, at how you scripted it. You took it down one further level, right down to the bare anchor. You know how many <tr> <td> </td> </tr> that will save? Albeit to say, I changed my #nav p to #nav a =).

Working with divs last night and today, I'm really starting to see why they are preferred over tables. Gosh, once I get this down, I doubt I will ever go back to table layouts! I've currently converted my nav bar, bread crumb bar, and footer to divs. My main layout and header are still in tables though, unfortunately.

My header involves positioning links and text in very precise locations (above a background image). With tables, I designed it with one column on the left with rowspan="3" and another column to the right with three rows, carefully given height & width attributes to arrange them above the image in their proper locations.

With divs, I think I will need to use the position:absolute or relative; attribute and set the differing <p> or <a> elements with the left:#; and top:#; attributes. My code will be very messy, but it should look right. Unless there is a simpler way?

Ohh, and for the 'special_link', I simply did style="float:right;" and that did it.

rocknbil




msg:3674317
 7:04 pm on Jun 13, 2008 (gmt 0)

Should probably throw this in there,

he page loads fantastically in IE7 but horribly in Firefox

One of the first things I discovered about getting non-table layouts to work in most browsers is the importance of using a valid document type and validating the code. If a document is in Quirks mode, you'll get all sorts of differences, if you're rendering in Standards mode you'll find much more control over cross-browser compatibility.

Choosing the best doctype [webmasterworld.com]

max4




msg:3674369
 7:55 pm on Jun 13, 2008 (gmt 0)

My site is valid XHTML 1.0 strict; and I'm glad that I made the choice of using a doctype now that everyone is telling me how crucial one is.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved