20 Replies Latest reply on Aug 18, 2007 8:10 AM by Newsgroup_User

    When shoud'nt I be using a div?

    ~Billy~
      The basic layout of my site has been designed using Divs and CSS for the positioning of Banners, Top Menus, Left Menus, Content Area, and footer area. I have no actual content in the site apart from a <ul> tab menu and a logo banner.

      My question is when shoudnt I be using a Div? For example, in my Div called 'banner' I have placed a second div called 'bannerimage' which will hold the logo gif. This div is floated left inside the 'banner' div. Could I have done this using say <h1>?

      I have begun reading a book called HTML Mastery by Paul Haine which mentions Divitis, or overuse of divs. I understand that inside the "content" div I will have to use html markup such as <p> <h3> or whatever, but what about the rest of the structure of the site? Am I ok to keep the divs I have and mark them up correctly?

      www.tomkilbourn.com
        • 1. Re: When shoud'nt I be using a div?
          Level 7
          .oO(~Billy~)

          > My question is when shoudnt I be using a Div? For example, in my Div called
          >'banner' I have placed a second div called 'bannerimage' which will hold the
          >logo gif. This div is floated left inside the 'banner' div. Could I have done
          >this using say <h1>?

          Is a logo is a heading? Usually not, so the answer is no. It would be
          inappropriate markup.

          > I have begun reading a book called HTML Mastery by Paul Haine which mentions
          >Divitis, or overuse of divs. I understand that inside the "content" div I will
          >have to use html markup such as <p> <h3> or whatever, but what about the rest
          >of the structure of the site? Am I ok to keep the divs I have and mark them up
          >correctly?

          Shouldn't be a problem. Just some notes:

          Something like

          <div id="lowermenu">
          <ul>
          ...
          </ul><br style="clear: both;">
          </div>

          can usually be written without the div as well. You can assign classes
          and IDs to all and everything. With some special CSS (search for
          "clearing floats") you could even drop the <br>.

          And what is

          <h6><ul>
          ...
          </ul></h6>

          supposed to be? A list inside a heading? Rather unusual.

          Micha
          • 2. Re: When shoud'nt I be using a div?
            Webmaster T
            It has been suggested that when building a fluid DIV structured site, table are best used for content to be displayed in a grid format. So, in use DIV for site layout and Tables for specific content.
            • 3. Re: When shoud'nt I be using a div?
              ~Billy~ Level 1
              I have been well advised to avoid tables at all costs!! And Im going to!
              • 4. Re: When shoud'nt I be using a div?
                Level 7
                ~Billy~ wrote:

                > The basic layout of my site has been designed using Divs and CSS for the
                > positioning of Banners, Top Menus, Left Menus, Content Area, and footer area. I
                > have no actual content in the site apart from a
                tab menu and a logo
                > banner.
                >
                > My question is when shoudnt I be using a Div? For example, in my Div called
                > 'banner' I have placed a second div called 'bannerimage' which will hold the
                > logo gif. This div is floated left inside the 'banner' div. Could I have done
                > this using say <h1>?


                First off don't use the word 'banner' for your container or images as
                Nortons security will likely block it.


                It's a grey area go be honest as to whether you use an h1 tag or not. IF
                you're as pure as the driven snow then no but many develpopers take
                advantage of the h1 at the top of the page to catch the spider. The img
                alt would be inside an h1 so emphasis would be greater........but it's
                not an opinion shared by others.

                Bottom line is you need to make up your own mind and eventually go your
                own way because everyone has different ideas.

                You only obviously need to float left if you want something else to the
                right of the flaoted container, be that container an h1 or a <div>

                If you don't use the h1 then you dont really need to house the image in
                another <div>, just insert it directly into the 'banner' <div>



                > I have begun reading a book called HTML Mastery by Paul Haine which mentions
                > Divitis, or overuse of divs.

                Yeah its easy to get carried away. So just ask yourself do I really need
                another <div> or not. Sometimes you do and other you don't. As long as
                you are aware of it you will eventually start to use extra containers
                only when its necesssary or you can't be asked to unpick your code to
                streamline it.


                I understand that inside the "content" div I will
                > have to use html markup such as <p> <h3> or whatever, but what about the rest
                > of the structure of the site? Am I ok to keep the divs I have and mark them up
                > correctly?

                Sure its ok to keep the <divs> just think before you go using then too
                liberally.

                • 5. Re: When shoud'nt I be using a div?
                  Level 7
                  ~Billy~ wrote:

                  > I have been well advised to avoid tables at all costs!! And Im going to!


                  Well thats not excatly good advice in some circumstances. If you come to
                  an area in your design where you need to put a lot of data side by side
                  then its always easier and more stable to use a simple table structure.

                  • 6. Re: When shoud'nt I be using a div?
                    Level 7
                    Tables are a useful, and valid, tool when used appropriately.

                    No need to avoid them at all costs.

                    --
                    Regards

                    John Waller


                    • 7. Re: When shoud'nt I be using a div?
                      Level 7
                      Why? Tables have value....

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.dreamweavermx-templates.com - Template Triage!
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                      ==================


                      "~Billy~" <webforumsuser@macromedia.com> wrote in message
                      news:fa4lvk$8v3$1@forums.macromedia.com...
                      >I have been well advised to avoid tables at all costs!! And Im going to!


                      • 8. When shoud'nt I be using a div?
                        ~Billy~ Level 1
                        Thanks Osgood, I do understand that tables are good for data such as database data, i have used them for just that in the past as like you say its simple data structure.

                        So, regarding the banner, h1, div debate, I think I may well just keep the divs I have (as there are not that many) and just style the content area div with html markup such as <p>, <h2> etc etc

                        I guess what im trying to get at is - I have used divs for the Structure, and structre only. Is that ok? The content INSIDE the div structure should be html markup?

                        If I was to use <h1> for displaying the banner, can I still float it to the left inside the wrapper div and apply css styles in the same way as a div? If so then why use divs?
                        • 9. When shoud'nt I be using a div?
                          ~Billy~ Level 1
                          quote:

                          Originally posted by: Newsgroup User
                          .oO(~Billy~)

                          > My question is when shoudnt I be using a Div? For example, in my Div called
                          >'banner' I have placed a second div called 'bannerimage' which will hold the
                          >logo gif. This div is floated left inside the 'banner' div. Could I have done
                          >this using say <h1>?

                          Is a logo is a heading? Usually not, so the answer is no. It would be
                          inappropriate markup.

                          > I have begun reading a book called HTML Mastery by Paul Haine which mentions
                          >Divitis, or overuse of divs. I understand that inside the "content" div I will
                          >have to use html markup such as <p> <h3> or whatever, but what about the rest
                          >of the structure of the site? Am I ok to keep the divs I have and mark them up
                          >correctly?

                          Shouldn't be a problem. Just some notes:

                          Something like

                          <div id="lowermenu">
                          <ul>
                          ...
                          </ul><br style="clear: both;">
                          </div>

                          can usually be written without the div as well. You can assign classes
                          and IDs to all and everything. With some special CSS (search for
                          "clearing floats") you could even drop the <br>.

                          And what is

                          <h6><ul>
                          ...
                          </ul></h6>

                          supposed to be? A list inside a heading? Rather unusual.

                          Micha



                          The class thing is something i could do with looking at. Ignore the H6 thing, again I was just fiddling around :)

                          Id really appreciate if anyone could tell me where (with my current site appearance) where I can remove divs, add classes etc...
                          • 10. Re: When shoud'nt I be using a div?
                            Level 7
                            On Fri, 17 Aug 2007 17:03:03 +0000 (UTC), "~Billy~"
                            <webforumsuser@macromedia.com> wrote:


                            > I have begun reading a book called HTML Mastery by Paul Haine which mentions
                            >Divitis, or overuse of divs. I understand that inside the "content" div I will
                            >have to use html markup such as <p> <h3> or whatever, but what about the rest
                            >of the structure of the site? Am I ok to keep the divs I have and mark them up
                            >correctly?
                            >
                            > www.tomkilbourn.com


                            I have HTML Mastery too - and had it for many months.

                            I find it one of the very best books on HTML, semantics etc I have
                            ever read. In company with CSS Mastery by Andy Budd - I would say they
                            have influence me greatly in really understanding html/css.

                            Read and re-read them and inwardly digest. I have found that since
                            then things have become a lot clearer.

                            --

                            ~Malcolm N....
                            ~
                            • 11. When shoud'nt I be using a div?
                              ~Billy~ Level 1
                              It does indeed appear to be a good book, I only recieved it today from Amazon.

                              I want to know, can i replace any of the Div elements of my page with html markup and keep the layout as it is? Some people/sites/books say replace divs with markup, others say keep the divs, (others say use tables which im not going to do).

                              I want to use divs, but as few as possible. I want to keep the layout of my site, but can anyone show me where to remove divs and use html instead if at all?

                              If I dont put my Bannerimage in its own div, how do I float it left in the banner div?
                              • 12. Re: When shoud'nt I be using a div?
                                Level 7
                                > can i replace any of the Div elements of my page with html
                                > markup and keep the layout as it is?

                                Div elements ARE HTML markup. But theoretically, yes, usually.

                                --
                                Murray --- ICQ 71997575
                                Adobe Community Expert
                                (If you *MUST* email me, don't LAUGH when you do so!)
                                ==================
                                http://www.dreamweavermx-templates.com - Template Triage!
                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                ==================


                                "~Billy~" <webforumsuser@macromedia.com> wrote in message
                                news:fa4vq0$jr1$1@forums.macromedia.com...
                                > It does indeed appear to be a good book, I only recieved it today from
                                > Amazon.
                                >
                                > I want to know, can i replace any of the Div elements of my page with html
                                > markup and keep the layout as it is? That is what I want to know and Im
                                > having
                                > trouble with. Some people/sites/books say replace with markup, others say
                                > keep
                                > the divs and I really dont know what to do and right now its hurting my
                                > head :(
                                >


                                • 13. When shoud'nt I be using a div?
                                  ~Billy~ Level 1
                                  Which divs to i keep? Which dont I keep? This is what I want to know in the case of my site.
                                  • 14. Re: When shoud'nt I be using a div?
                                    Level 7
                                    That would depend entirely on your page and its layout.

                                    --
                                    Murray --- ICQ 71997575
                                    Adobe Community Expert
                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                    ==================
                                    http://www.dreamweavermx-templates.com - Template Triage!
                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                    ==================


                                    "~Billy~" <webforumsuser@macromedia.com> wrote in message
                                    news:fa52gs$ms4$1@forums.macromedia.com...
                                    > which divs to i keep? i which dont I keep?


                                    • 15. When shoud'nt I be using a div?
                                      ~Billy~ Level 1
                                      I linked my site at the start of the thread, www.tomkilbourn.com

                                      I am happy with the layout, but need to know if I can reduce my number of divs for the layout and maybe use alterative markup for the layout. If people think its ok then Im happy to keep it as is. If the consensus is that I should reduce divs then i need to know which and how..
                                      • 16. Re: When shoud'nt I be using a div?
                                        Level 7
                                        On Fri, 17 Aug 2007 21:36:28 +0000 (UTC), "~Billy~"
                                        <webforumsuser@macromedia.com> wrote:

                                        >I linked my site at the start of the thread, www.tomkilbourn.com
                                        >
                                        > I am happy with the layout, but need to know if I can reduce my number of
                                        >divs. If people think its ok then Im happy to keep it as is. If the consensus
                                        >is that I should reduce divs then i need to know which and how..

                                        I hestitate - amongst such experts here - but I counted 22 <div>'s -
                                        which I would say is to many. You don;t need a div to hang css to -
                                        you can apply css to other html tags - but even better - use css
                                        descendant selectors.

                                        HTML Mastery is a great book - but I suggest you read it alongside CSS
                                        Mastery as well
                                        --

                                        ~Malcolm N....
                                        ~
                                        • 17. Re: When shoud'nt I be using a div?
                                          ~Billy~ Level 1
                                          So which divs could I replace with other html tags and keep the layout as is it?
                                          • 18. Re: When shoud'nt I be using a div?
                                            >Vee<
                                            I think someone said this just beofre (or something similar):
                                            Every layout has elements which maybe requie one, the other or either or.
                                            Addition to that:
                                            Now that you have a couple of opinions which are rightly founded take this into consideration (definitely not a complete list)
                                            1. How does it look in the most popular or browsers of your choice
                                            2. Can I control each element the way I'd like to
                                            3. How much time do I have to figure something new out to stay on schedule
                                            4. Does the client approve of the fucntionaloty and design (assuming you have one)
                                            You'll see with incorporating new CSS techniques that certain ones have a better application than others, in these cases you might choose to what has worked for you in the past, and thats just playing it smart
                                            It will be a great time when CSS definitions are displayed as the founders intended them to.
                                            • 19. Re: When shoud'nt I be using a div?
                                              Level 7
                                              On Fri, 17 Aug 2007 20:18:08 +0000 (UTC), "~Billy~"
                                              <webforumsuser@macromedia.com> wrote:

                                              >It does indeed appear to be a good book, I only recieved it today from Amazon.
                                              >
                                              > I want to know, can i replace any of the Div elements of my page with html
                                              >markup and keep the layout as it is? That is what I want to know and Im having
                                              >trouble with. Some people/sites/books say replace with markup, others say keep
                                              >the divs and I really dont know what to do and right now its hurting my head :(




                                              Without wading through and doing for you !!! : I won't list them all -
                                              here are a few. - As i said read the two Mastery books I mentioned -
                                              I would estimate you could almost half the number of div's



                                              Lists don't need a div around them, you can apply the style to the
                                              <ul> with

                                              <ul class="mainNav">

                                              <DIV id=footerbottom>Copyright Tom Kilbourn 2007
                                              www.tomkilbourn.com</DIV>

                                              could be:
                                              <p id=footerbottom>Copyright Tom Kilbourn 2007
                                              www.tomkilbourn.com</p>

                                              <DIV id=date>date</DIV>
                                              is this just going to be text generated with php or whatever
                                              <p id=date>date</p>



                                              but don't just change <div>'s to classes or <span>s or you will just
                                              replace divitus with classitus or spanitus -


                                              and what's this - you are not trying to hide things from viewers but
                                              spam search engines are you ? - google might black list for doing that
                                              ?
                                              <DIV id=hiddenDiv>
                                              --

                                              ~Malcolm N....
                                              ~
                                              • 20. Re: When shoud'nt I be using a div?
                                                Level 7
                                                On Sat, 18 Aug 2007 10:15:21 +0100, Malcolm N_ <malcom@mgnixon.org.uk>
                                                wrote:

                                                ><DIV id=date>date</DIV>
                                                >is this just going to be text generated with php or whatever
                                                ><p id=date>date</p>


                                                The CSS looks like this:

                                                #bannerright {
                                                float: right;
                                                width: 140px;
                                                height: 70px;
                                                }
                                                #date {
                                                float: right;
                                                width: 140px;
                                                border: 1px 0px 1px 1px solid #BBB;
                                                text-align: center;
                                                background-color: #D8D8D8;
                                                margin-bottom: 10px;
                                                }

                                                Think about changing it to something like this:

                                                #banner p {
                                                float: right;
                                                width: 140px;
                                                height: 70px;
                                                border: 1px 0px 1px 1px solid #BBB;
                                                text-align: center;
                                                background-color: #D8D8D8;
                                                margin-bottom: 10px;
                                                }

                                                Then, change the html from this:

                                                <div id="banner">
                                                <div id="bannerright">
                                                <div id="date">date</div>
                                                </div>
                                                <img src="/images/bannerimage.gif" width="300" height="70">
                                                </div>

                                                To this:

                                                <div id="banner">
                                                <p>date</p>
                                                <img src="/images/bannerimage.gif" width="300" height="70">
                                                </div>

                                                One other thing that I'd caution you about. Since you're using extremely
                                                small text, make sure that the design doesn't break when the user
                                                increases the text size.