Page 1 of 1

Introducing... DIVS! Lets get rid of those nasty tables. Rate Topic: -----

#1 LazerKittenz  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 27
  • Joined: 29-December 10

Posted 31 December 2010 - 02:34 AM

Like most web designers, we try not to dwell in the past. Technology is ever changing and web development is as well. With HTML5, and CSS3 coming out you have to keep learning and stop using your old tactics. Just like everything else, things have gotten old, out of use, past their prime, just like tables. Instead of writing all of those <td> and <table> tags, and cell spacing and all of that crazy stuff that isn't necessary, we now have divs.

Honestly, I never learned how to actually write HTML with tables. I went straight to divs after learning about their existence (Thanks to Microsoft Expressions Web).

Div's are very, very simple to use, and should only take a very short tutorial to understand.

What is a div?
Ah, this question. This can be explained in two words.

Invisible Box

That is it. It is just an invisible container. Just like a table, but SO MUCH SIMPLER.

How would you use a div you ask? Just like this.

<div></div>



A lot of you might be saying, "You're joking." But I say nay! This is it. This is why divs are so spectacular advancement in web development technology. Now I'm going to create a basic structure using divs.

<html>
    <body>
        <div id="wrapper">
            <div id="header">

            </div>
            <div id="navigation">

            </div>
            <div id="content">

            </div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>



That's it. That is all. Nothing else. Nothing more. That is how simple divs are. And just like everything else in HTML, they use the hierarchical system, a div can go inside a div, and a div inside that, and so on and so forth. Forever, and ever. You could make endless divs.

These can also be styled a lot easier than tables. For instance, if we give a div a class, we could make a lot of the same looking buttons.

<div class="blue">Words</div>


.blue    {
background: blue;
color: white;
padding: 10px;
margin: 10px;
}



Ba-BAM! That's my new catch-phrase by the way. That's it. That's all there is too it.

I hope I have brought some of you older web designers into the future about how to be designing for more web-safe, and a lot less stressful and cleaner ways to write code.

Thank you,
Andrew Gould

Is This A Good Question/Topic? 1
  • +

Replies To: Introducing... DIVS!

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 12 January 2011 - 05:36 PM

Nice tutorial. Teach all those who use tables for layout something. lol. I, prefer using HTML5 and CSS3. This is what your code could look like in HTML5
<!DOCTYPE html>
<html>
     <body>
          <section id="wrapper">

          <header>
 
          </header>

          <nav>

          </nav>

          <section id="content">

          </section>

          <footer>

          </footer>

          </section>
     </body>
</html>


Keep it up kid!:)
Was This Post Helpful? 0
  • +
  • -

#3 LazerKittenz  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 27
  • Joined: 29-December 10

Posted 17 January 2011 - 03:55 PM

I haven't yet made the shift to HTML5, but I have started using CSS3 border-radii, box-shadow, text-shadow, and have been introduced into the text gradients. I hope someone writes a good HTML5 tutorial.
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 17 January 2011 - 08:18 PM

View PostLazerKittenz, on 17 January 2011 - 05:55 PM, said:

I haven't yet made the shift to HTML5, but I have started using CSS3 border-radii, box-shadow, text-shadow, and have been introduced into the text gradients. I hope someone writes a good HTML5 tutorial.

I wrote a HTML5 and CSS3 one for an Accordion Navigation menu. It's still subject to approval though.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1