Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Is there a way to use less divs in HTML?

HTML

  • Please log in to reply
36 replies to this topic

#1 hoku_2000 _99

hoku_2000 _99

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 64 posts

Posted 19 October 2011 - 03:56 PM

While I was designing my index page, I noticed that I've used too many divs. I went ahead and made a few things as classes, but I still feel like I am using too many divs. Any suggestions or ways that I use less divs?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author 

intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


    <!-- header -->
     <div id="header">
        <div id="logo"><a href="#">Header</a></div>
        <div id="menu">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="portfolio.html">Link1</a></li>
            <li><a href="kidsnsports.html">Link2</a></li>
            <li><a href="africa.html">Link3</a></li>
            <li><a href="contact.php">Contact</a></li>
        <li><a href="guestbook.php">Guestbook</a></li>
            
                  </ul>

<div><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

   
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
 <div id="text">
                <h1><strong>Welcome</strong></h1>

<div id="image">
<img src="images/panda.jpg" style="width: 360px;"/></div>


<div id="p">
<div style="float: left; width: 180px;">
<h2>Header</h2>
  <p>
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>


<div id="div" style="float: left;">
<img src="images/div103.gif" /></div>

<div style="float: left; width: 190px;">
<h2>Header</h2>
  <p>
    This is our left text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
  </div>
</div>


</div>


           </div>
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality 

Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>



/* body */

body {
 margin:114px 0 0 0; 
line-height:16px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 

}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}
.icon {
text-align:center;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;

}
#content {
width: 780px; 
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;



}

/ * Text */
#text {
    float: left;
    width: 780px;
}
#text p {
 margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}
.image {
float: left; 
margin-top:1cm;
padding-right:18cm;
}
.p {
    float: right;  
    margin-right: 4px;
    margin-top:1cm;
    padding-left:5cm;
    }
.div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}
h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:24px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
 float:left;
 padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px

}


/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
    .row img {
        margin: 2px;
        border: 1px solid #0000ff;
        clear: both;
        width: 100px;
        height: 90px;
        margin-left:3px;
    }
     
    .first
    {
        float: right;
        text-align: center;
    } 
         
    .last {
        border: 1px solid #ffffff;
        float: right;
    }
     
    .desc
    {
        text-align: center;
        font-weight: normal;
        width: 120px;
        margin: 10px;
    }









  • 0

#2 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 19 October 2011 - 04:37 PM

Why would you use less DIVs? It's not bad, or anything, is it?
  • 0

#3 hoku_2000 _99

hoku_2000 _99

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 64 posts

Posted 19 October 2011 - 05:41 PM

Thats what I thought, but someone who was looking over my over code and said I
had a very illogical and redundant way of giving elements IDs, and that I was using way too much divs. :confused: The only thing I could think of was to go with div classes instead of IDS.
  • 0

#4 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 19 October 2011 - 06:35 PM

I've seen pages with far more divs than that. In all seriousness, the correct number of divs is the number that makes the page work in a logical way.
  • 1

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#5 hoku_2000 _99

hoku_2000 _99

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 64 posts

Posted 19 October 2011 - 06:39 PM

Plus, I know speaking for myself, its more organized and can be easily read when your for it to make changes in your style sheet.
  • 0

#6 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 23 October 2011 - 08:18 PM

I've seen pages with far more divs than that. In all seriousness, the correct number of divs is the number that makes the page work in a logical way.


You count the number of divs on every page you visit?

No, just kidding; I know what you mean. Same with me (I tried looking at the source HTML of the Google home page before).
  • 0

#7 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 24 October 2011 - 05:14 AM

I occasionally look at a page's source :)

For example, This page has a TON of div tags :)
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#8 DarkLordCthulhu

DarkLordCthulhu

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 422 posts
  • Location:The bash shell
  • Programming Language:C, JavaScript, Bash, Others
  • Learning:Ruby, Others

Posted 24 October 2011 - 11:18 AM

You could replace some of them with tables, though it's not recommended. But why is having lots of divs a problem? You can keep track of them very easily if you use proper indentation.
  • 0
Programming is a journey, not a destination.

#9 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 24 October 2011 - 11:21 AM

He nests divs only 2 levels deep, that's pretty much the minimum you will get.
  • 0

#10 hoku_2000 _99

hoku_2000 _99

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 64 posts

Posted 24 October 2011 - 04:23 PM

That what I am trying to figure out? I see nothing wrong with lots of divs, but someone who was looking over my code said I had too many. :confused:
  • 0

#11 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 24 October 2011 - 04:25 PM

Maybe it's because that someone doesn't have as much experience at looking at source code (HTML, in this case).
  • 0

#12 hoku_2000 _99

hoku_2000 _99

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 64 posts

Posted 24 October 2011 - 04:36 PM

I dont know. I think I just may leave it the way that I have it now. I was just wondering around and wanted to know if there was such a thing as using too many divs.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download