Back To Website Design Forum

Is my code messy?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 5th, 2008, 12:39 pm

First off, hello everyone, new to the forum. Second, I'm 100% self educated in HTML so I might not do things the correct way.

With that I was hoping someone could give me a little insight on whether or not my code is structured correctly or if it could be written more efficiently. I don't need someone to rewrite the entire code for me as that would defeat the purpose to learn. Perhaps a simple yes you're doing good, or a no it looks horrid would suffice. If it's the latter than a point in the right direction would be very much appreciated.

Here's my HTML:
Code: [ Select ]
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>BorgBand.com We Are Borg!</title>
    <link href="style.css" rel="stylesheet" type="text/css" />    
    <script src="js.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body onLoad="loadContent('page_home.html', 'content');">
    <div id="horizon">
        <div id="inset">    
            <div id="imghorizon">
                <div id="imginest">
                    <img src="images/background.jpg" id="bgimage" />
                </div>
            </div>
            <div id="container">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td rowspan="2">
                            <div id="content"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="navbar">
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_home.html', 'content');">Home</a></p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_events.html', 'content');">Upcoming Events</a> </p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_about.html', 'content');">About The Band</a> </p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
                                <p>-----------</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>BorgBand.com We Are Borg!</title>
  6.     <link href="style.css" rel="stylesheet" type="text/css" />    
  7.     <script src="js.js" type="text/javascript"></script>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  9. </head>
  10. <body onLoad="loadContent('page_home.html', 'content');">
  11.     <div id="horizon">
  12.         <div id="inset">    
  13.             <div id="imghorizon">
  14.                 <div id="imginest">
  15.                     <img src="images/background.jpg" id="bgimage" />
  16.                 </div>
  17.             </div>
  18.             <div id="container">
  19.                 <table cellspacing="0" cellpadding="0">
  20.                     <tr>
  21.                         <td rowspan="2">
  22.                             <div id="content"></div>
  23.                         </td>
  24.                     </tr>
  25.                     <tr>
  26.                         <td>
  27.                             <div id="navbar">
  28.                                 <p>-----------</p>
  29.                                 <p><a href ="#" onClick="loadContent('page_home.html', 'content');">Home</a></p>
  30.                                 <p>-----------</p>
  31.                                 <p><a href ="#" onClick="loadContent('page_events.html', 'content');">Upcoming Events</a> </p>
  32.                                 <p>-----------</p>
  33.                                 <p><a href ="#" onClick="loadContent('page_about.html', 'content');">About The Band</a> </p>
  34.                                 <p>-----------</p>
  35.                                 <p><a href ="#" onClick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
  36.                                 <p>-----------</p>
  37.                                 <p><a href ="#" onClick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
  38.                                 <p>-----------</p>
  39.                             </div>
  40.                         </td>
  41.                     </tr>
  42.                 </table>
  43.             </div>
  44.         </div>
  45.     </div>
  46. </body>
  47. </html>


and here's my CSS:

Code: [ Select ]
*{
    margin: 0;
    padding: 0;
    z-index: 1;
}
 
body{
    background-color:#000066;
    color: #CCCCCC;
    overflow: hidden;
}
 
a{
    color: #CCCCCC;
}
 
a:hover{
    color: #CC6633;
}
 
#horizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
}
 
#inset{
    width:800px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: -400px;
    overflow: visible;
}
 
#bgimage{
    overflow: visible;
    z-index: -1;
    width: 800px;
    height: 600px;
}
 
#imghorizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
    z-index: -3;
}
 
#imginset{
    width:800px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: -400px;
    z-index: -2;
}
 
#container{
    width: 800px;
    height: 100%;
    padding-left: 30px;
    padding-top: 190px;
    margin-left: 0px;
    margin-top: 10%;
}
 
#content{
    padding-left: 10px;
    margin-top: 40px;
    width: 510px;
    height: 400px;
    margin-right: 30px;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
 
.contentcell{
    margin-top: 20px;
    overflow: scroll;
    height: 235px;
    width: 500px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    background-color: transparent;
}
 
#navbar{
    padding-left: 10px;
    padding-top: 0px;
    width: 180px;
    margin-left: 10px;
}
 
#navbar a:link, a:visited{
    color:#CCCCCC;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
 
#navbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
}
 
#aboutnavbar a:link, a:visited{
    color:#CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}
 
#aboutnavbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
    text-align: center;
}
 
#abouttext{
    padding-top: 15px;
}
 
.abouttextcell{
    height: 233px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    padding-left: 15px;
}
 
.aboutpics{
    height: 234px;
    width: 124px;
    border: #B4B4B4 medium solid;
}
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     z-index: 1;
  5. }
  6.  
  7. body{
  8.     background-color:#000066;
  9.     color: #CCCCCC;
  10.     overflow: hidden;
  11. }
  12.  
  13. a{
  14.     color: #CCCCCC;
  15. }
  16.  
  17. a:hover{
  18.     color: #CC6633;
  19. }
  20.  
  21. #horizon{
  22.     position: absolute;
  23.     top: 50%;
  24.     width: 100%;
  25.     height: 1px;
  26.     overflow: visible;
  27. }
  28.  
  29. #inset{
  30.     width:800px;
  31.     height: 200px;
  32.     position: absolute;
  33.     left: 50%;
  34.     margin-left: -400px;
  35.     top: -400px;
  36.     overflow: visible;
  37. }
  38.  
  39. #bgimage{
  40.     overflow: visible;
  41.     z-index: -1;
  42.     width: 800px;
  43.     height: 600px;
  44. }
  45.  
  46. #imghorizon{
  47.     position: absolute;
  48.     top: 50%;
  49.     width: 100%;
  50.     height: 1px;
  51.     overflow: visible;
  52.     z-index: -3;
  53. }
  54.  
  55. #imginset{
  56.     width:800px;
  57.     height: 200px;
  58.     position: absolute;
  59.     left: 50%;
  60.     margin-left: -400px;
  61.     top: -400px;
  62.     z-index: -2;
  63. }
  64.  
  65. #container{
  66.     width: 800px;
  67.     height: 100%;
  68.     padding-left: 30px;
  69.     padding-top: 190px;
  70.     margin-left: 0px;
  71.     margin-top: 10%;
  72. }
  73.  
  74. #content{
  75.     padding-left: 10px;
  76.     margin-top: 40px;
  77.     width: 510px;
  78.     height: 400px;
  79.     margin-right: 30px;
  80.     padding-top: 0px;
  81.     font-family: Arial, Helvetica, sans-serif;
  82.     background-color: transparent;
  83. }
  84.  
  85. .contentcell{
  86.     margin-top: 20px;
  87.     overflow: scroll;
  88.     height: 235px;
  89.     width: 500px;
  90.     overflow: scroll;
  91.     overflow-x: hidden;
  92.     overflow-y: inherit;
  93.     background-color: transparent;
  94. }
  95.  
  96. #navbar{
  97.     padding-left: 10px;
  98.     padding-top: 0px;
  99.     width: 180px;
  100.     margin-left: 10px;
  101. }
  102.  
  103. #navbar a:link, a:visited{
  104.     color:#CCCCCC;
  105.     font-weight: bold;
  106.     font-family: Arial, Helvetica, sans-serif;
  107.     font-size: small;
  108. }
  109.  
  110. #navbar a:hover{
  111.     background-color: #993300;
  112.     border: dashed thin #FF0000;
  113.     color: #CCCCCC;
  114. }
  115.  
  116. #aboutnavbar a:link, a:visited{
  117.     color:#CCCCCC;
  118.     font-family: Arial, Helvetica, sans-serif;
  119.     font-size: 12px;
  120.     text-align: center;
  121. }
  122.  
  123. #aboutnavbar a:hover{
  124.     background-color: #993300;
  125.     border: dashed thin #FF0000;
  126.     color: #CCCCCC;
  127.     text-align: center;
  128. }
  129.  
  130. #abouttext{
  131.     padding-top: 15px;
  132. }
  133.  
  134. .abouttextcell{
  135.     height: 233px;
  136.     overflow: scroll;
  137.     overflow-x: hidden;
  138.     overflow-y: inherit;
  139.     padding-left: 15px;
  140. }
  141.  
  142. .aboutpics{
  143.     height: 234px;
  144.     width: 124px;
  145.     border: #B4B4B4 medium solid;
  146. }
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 5th, 2008, 12:39 pm

  • suzie
  • Guru
  • Guru
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 1127
  • Loc: England
  • Status: Offline

Post August 5th, 2008, 12:57 pm

Best way to check is through W3C then ask questions on any found errors here at Ozzu,

HTML Validator:

http://validator.w3.org/

CSS Validator:

http://jigsaw.w3.org/css-validator/
http://jungaling.com/katecorner/
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 5th, 2008, 1:26 pm

You thoroughly rock. Had no idea anything like this existed unless you had fancy software and what not.

Sweet Deal. Thanks
Use your words like arrows to shoot toward your goal.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 5th, 2008, 1:27 pm

I don't understand what the <table> is for, it seems like you should be able to handle the <table>s contents with a <ul> & the <div> that's in the top <tr>.

I don't understand this section either.
Code: [ Select ]
<div id="imghorizon">
    <div id="imginest">
        <img src="images/background.jpg" id="bgimage" />
    </div>
</div>
  1. <div id="imghorizon">
  2.     <div id="imginest">
  3.         <img src="images/background.jpg" id="bgimage" />
  4.     </div>
  5. </div>


imginest seems like overkill. Why can't you move the styles applied to it, instead to the contained <img>, the parent <div>, or split between the two ?
Strong with this one, the sudo is.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 5th, 2008, 1:58 pm

wow, good eye joebert. "imginest" was a typo in my code, it should have been "imginset." After Fixing it the position went completely bonkers on me. Div removed :)

the reason I have an image with styles inside a div with styles is to center the image vertically and horizontally on screen which by the should be a lot easier than it is, rediculous amounts of searching, googling, referencing, and reading just to put a div in the middle of a frickin page. Good gracious why?
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 5th, 2008, 2:04 pm

What are some other validators? Are there any for javascript? PHP? ect...
Use your words like arrows to shoot toward your goal.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 5th, 2008, 5:37 pm

I've never heard of JS or PHP validators per-say.

For PHP it generally comes down to profilers like XDebug, benchmarkers like Apache Benchmark, inhouse applications, & knowing people anywhere your target audience lives.

With JS there's things like Firebug, Operas' Developer Tools, & whatever Microsoft is using these days. It comes down to having access to as many system & browser combinations as possible to test things in though.
Strong with this one, the sudo is.

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 95 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.