HTML/CSS Nach Ansicht von Experten i.O.?

[Adrian]

Hallo!

Nur für Leute, die Zeit und Lust haben<<<<

Ich bin relativer Anfänger im HTML und Scriptsprachen dafür bzw. CSS Programmieren.
Was haltet ihr von folgendem Code? Also wenn irgendwas unübersichtlich ist, bzw. falsch,
dann erklärt bitte. Man möchte sich ja auch zum Profi entwickeln... ;)

  
      <div class="navi" id="leftnavi"> <!-- Anfang: Linke Navigation -->  
        <div class="naviheader" id="leftheader"> <!-- Kein Inhalt! --> </div>  
  
        <div class="area" id="leftarea"> <!-- WICHTIG: AUF HINTERGRUND ACHTEN NACH EINFÜGEN -->  
          <h2>Login</h2>  
          Loginscripte von PHP <br />  
          u.s.w. hier einfügen <br />  
          <p class="areafooter" id="leftareafooter">angemeldet / unangemeldet (PHP)</p>  
        </div>  
        <ul class="navilink" id="leftlink">  
          <li class="liheader" id="leftliheader">Überschrift 1</li>  
          <li>Link1</li>  
          <li>Link2</li>  
          <li class="lifooter" id="leftlifooter">Unten drunter</li>  
        </ul>  
  
      </div> <!-- Ende: Linke Navigation -->  
  
      <div class="navi" id="rightnavi"> <!-- Anfang: Rechte Navigation -->  
        <div class="naviheader" id="rightheader"> <!-- Kein Inhalt! --> </div>  
  
        <div class="area" id="rightarea"> <!-- WICHTIG: AUF HINTERGRUND ACHTEN -->  
          <h2>Was auch immer</h2>  
          Irgendwas hier einfügen, <br />  
          was auch immer... <br />  
          <p class="areafooter" id="rightareafooter">und hier auch was ausdenken</p>  
        </div>  
        <ul class="navilink" id="rightlink">  
          <li class="liheader" id="leftliheader">Überschrift 2</li>  
          <li>Link3</li>  
          <li>Link4</li>  
          <li class="lifooter" id="leftlifooter">Unten drunter</li>  
        </ul>  

  
div.navi {  
margin: 0px;  
height: auto;  
width: 185px;  
border: none;  
}  
div#leftnavi {  
background: url("../../pictures/gfx/leftbg.gif") repeat-y;  
float: left;  
direction: ltr;  
}  
div#rightnavi {  
background: url("../../pictures/gfx/rightbg.gif") repeat-y;  
float: right;  
direction: rtl;  
}  
div.naviheader {  
margin: none;  
padding: none;  
width: 185px;  
height: 15px;  
border: none;  
}  
div#leftnavi div#leftheader {  
background: url("../../pictures/gfx/leftheader.gif");  
}  
div#rightnavi div#rightheader{  
background: url("../../pictures/gfx/rightheader.gif");  
}  
div.area {  
margin: 10px 0px;  
font-size: 10pt;  
text-indent: 40px;  
border: none;  
}  
div#leftnavi div#leftarea {  
background: url("../../pictures/gfx/leftareabg.gif") repeat-y;  
text-align: left;  
}  
div#rightnavi div#rightarea {  
background: url("../../pictures/gfx/rightareabg.gif") repeat-y;  
text-align: right;  
}  
div#leftnavi div#leftarea h2 {  
height: 48px;  
padding-top: 12px;  
background: url("../../pictures/gfx/leftareaheader.gif") no-repeat;  
text-align: left;  
font-size: 10pt;  
}  
div#rightnavi div#rightarea h2 {  
width: 184px;  
height: 48px;  
padding-top: 12px;  
background: url("../../pictures/gfx/rightareaheader.gif") no-repeat;  
text-align: right;  
font-size: 10pt;  
}  
p.areafooter {  
height: 20px;  
font-size: 6pt;  
}  
div#leftnavi div#leftarea p#leftareafooter {  
background: url("../../pictures/gfx/leftareafooter.gif") no-repeat;  
text-align: left;  
}  
div#rightnavi div#rightarea p#rightareafooter {  
background: url("../../pictures/gfx/rightareafooter.gif") no-repeat;  
text-align: right;  
}  
ul.navilink {  
margin: 10px 0px;  
text-indent: 40px;  
}  
div#leftnavi ul#leftlink {  
text-align: left;  
}  
div#rightnavi ul#rightlink {  
text-align: right;  
}  
div#leftnavi ul#leftlink li {  
height: 30px;  
background: url("../../pictures/gfx/leftlink.gif") no-repeat;  
padding-top: auto;  
padding-bottom: auto;  
text-align: left;  
font-size: 1em;  
list-style: none;  
}  
div#rightnavi ul#rightlink li {  
height: 30px;  
background: url("../../pictures/gfx/rightlink.gif") no-repeat;  
padding-top: auto;  
padding-bottom: auto;  
text-align: right;  
font-size: 1em;  
list-style: none;  
}  
li.liheader {  
height: 49px;  
padding-top: 12px;  
font-size: 10pt;  
}  
div#leftnavi ul#leftlink li#leftliheader {  
background: url("../../pictures/gfx/leftlinkheader.gif") no-repeat;  
text-align: left;  
}  
div#rightnavi ul#rightlink li#rightliheader {  
background: url("../../pictures/gfx/rightlinkheader.gif") no-repeat;  
text-align: right;  
}  
li.lifooter {  
height: 15px;  
font-size: 6pt;  
}  
div#leftnavi ul#leftlink li#leftlifooter {  
background: url("../../pictures/gfx/leftlinkfooter.gif") no-repeat;  
text-align: left;  
}  
div#rightnavi ul#rightlink li#rightlifooter {  
background: url("../../pictures/gfx/rightlinkfooter.gif") no-repeat;  
text-align: right;  
}  

Mit freundlichen Grüßen,
Adrian