Jump to content

Is there a way to use less divs in HTML?

- - - - -

  • Please log in to reply
25 replies to this topic

#1
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
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;
    }










#2
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US
Why would you use less DIVs? It's not bad, or anything, is it?

#3
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
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.

#4
WingedPanther

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 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
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.
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#5
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
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.

#6
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US

WingedPanther said:

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).

#7
WingedPanther

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 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
I occasionally look at a page's source :)

For example, This page has a TON of div tags :)
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#8
DarkLordofthePenguins

DarkLordofthePenguins

    Programming Expert

  • Members
  • PipPipPipPipPipPip
  • 409 posts
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.
Programming is a journey, not a destination.

#9
wim DC

wim DC

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 2,084 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Java
He nests divs only 2 levels deep, that's pretty much the minimum you will get.

#10
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
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:

#11
RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,254 posts
  • Location:C:\Countries\US
Maybe it's because that someone doesn't have as much experience at looking at source code (HTML, in this case).

#12
hoku_2000 _99

hoku_2000 _99

    Learning Programmer

  • Members
  • PipPipPip
  • 67 posts
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.




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users