SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Learing DIV

  1. #1
    SitePoint Zealot SiteDev's Avatar
    Join Date
    Oct 2004
    Location
    Nevada
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Learing DIV

    I've been trying to learn DIV. My site is all tables and CSS. I really don't know where to start I've used google and this site. I would a link to a newbie tutorial on DIVs. Also, is it easy as 1,2,3 to go from table and change it all to DIVs?

    Thank you,
    Jesse

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    (DIV's) Divisions are sections of an (X)HTML document that allow you to define a collection of elements to which you want to apply attributes.
    Think of DIV's (divisions) as tables (so to speak), they are containers. Then you can position and style them, and their contents with CSS.

    Code:
    <div id="container">Site contents go here, including more divisions, spans, h1, h2, h3, paragraphs and so on</div>
    Then the CSS:

    Code:
    #container {
     width: 770px;
     margin: auto;
     background: #eeeeee;
     border: 1px solid #333;
       }
    A very brief explanation, hope it helps

    Later
    Johnny

  3. #3
    SitePoint Zealot SiteDev's Avatar
    Join Date
    Oct 2004
    Location
    Nevada
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I replace all the table, td, tr...etc with the div tag?

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes, you would use divisions and spans vs tables. Tables are for tabular data. Here are some threads that offer advice and links to more advice!

    http://www.sitepoint.com/forums/showthread.php?t=121128
    http://www.sitepoint.com/forums/showthread.php?t=171943

    Maybe you can make some sense of it all. It may take a bit of work from the start but once you get the hang of it. It will seem easier.

    Hope it helps

    Johnny

  5. #5
    SitePoint Evangelist
    Join Date
    May 2004
    Posts
    512
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    this will help you with your CSS layouts:

    http://glish.com/css/

    http://css.maxdesign.com.au/floatutorial/ (Tutorial 8 and 9)

  6. #6
    SitePoint Zealot SiteDev's Avatar
    Join Date
    Oct 2004
    Location
    Nevada
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links but this is what I still need help on. Say I have a page that looks like:

    <table border="0" id="eone">
    <tr id="etwo">
    <td>
    <table border="0" cellspacing="0" id="ethree">
    .....

    How would that look in div?

    Thank you,
    Jesse

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you start by using blocks and absolute positioning, you will maybe get a grasp of it...I think anyway.

    The blocks are then just like tables, but the great thing with blocks is, that you can position them anywhere on the page you wish, just by changing the coordinates in the stylesheet. How cool is that!

    Your stylesheet will look something like this:

    Code:
    #eone {
    	display: block;
    	position: absolute;
    	width: 300px;
    	height: 70px;
    	top: 0px;
    	left: 190px;
    	background: #bdbdbd;
    }
    #ethree {
    	display: block;
    	position: absolute;
    	width: 100px;
    	height: 50px;
    	top: 0px;
    	left: 19px;
    	background: #ffffff;
    }
    and your (x)html sheet will maybe look something like this:

    Code:
    <html>
    <body>
    <div id="eone">
    <div id="ethree">
    Content goes here
    </div>
    </div>
    </body>
    <html>
    You got a container inside a container now. Then try to change the px values in the top and left attributes in the style sheet in both containers, and see what happens. Also try to change the background color and width and height.

    This will get you pretty far, but theres more to learn, but once you got a hang of it, it will seem pretty easy.

    A good place to learn I think is at http://www.w3schools.com/css/default.asp. Make a cup of tea and go through the css tutorial. It will take a coupple of hours, if you stay concentrated. Then of course there's the hacks (sigh), you can see them in the FAQ thread in this section of sitepoint forums, where paul ob has been so nice to write a lot of very usefull stuff.

    I edited it. Had a coupple mistakes
    Last edited by 1q2; Nov 12, 2004 at 23:40.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    SiteDev,

    Forget about tables. Stop thinking "tables". until you can do that, you might as well use tables.

    CSS isn't tables, and <div>s aren't a replacement for them. A <span> can be just like a <div> thanks to CSS.

    You need to forget about putting bits of content in nested <td>s and start thinking how it can be accomplished with styling simple "wrapper" markup through CSS.

    My suggestion is you learn as much as you can about CSS itself and what it can do. A good book is "Eric Meyers on CSS". There are 12 or so sections each one giving you a deeper understanding of CSS and it's purpose with real-life projects.

    It's hard to explain it all in 1, 2, 3 steps.

  10. #10
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mstwntd
    It's hard to explain it all in 1, 2, 3 steps.
    Yes, practice makes perfect.

    Johnny

  11. #11
    SitePoint Zealot SiteDev's Avatar
    Join Date
    Oct 2004
    Location
    Nevada
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the help people, I will go out today or tomarrow and look for that book.

    Thanks,
    Jesse

  12. #12
    SitePoint Enthusiast newsmith's Avatar
    Join Date
    Oct 2004
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For an introduction this resource is hard to beat http://www.htmlhelp.com/reference/css/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •