he rehalizado la maquetaciòn de un sitio, para cambiar la apariencia de este y tuve la idea de postear aqui la nueva maquetación (aunque no es la gran cosa

bien este es el codigo de una pagina htm:
Código:
y este es el del CSS:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Documento sin título</title> <link href="../css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="superior"> <table align="center"> <tr> <td><img src="image.gif" width="75px" height="75px"></td> <td class="titleSAPB">SAPB</td> </tr> </table> </div> <div id="medioSuperior"> <table width="973" border="0" align="center"> <tr> <td width="238" align="center">Usuario: <span class="subTexto">Monserrat García</span></td> <td width="238" align="center">Categoría: <span class="subTexto">Administrador</span></td> <td width="238" align="center">Fecha: <span class="subTexto">25 de Octubre del 2005</span> </td> <td width="241" align="center"><a href="#" class="subTexto">Cerrar sesión </a></td> </tr> </table> </div> <div id="izquierda"> <h3>Menú</h3> <div id="altas"> <table width="100%" border="0"> <tr> <td class="nomCat">Altas</td> </tr> <tr> <td class="Cat">Material</td> </tr> <tr> <td class="Cat">Usuarios</td> </tr> <tr> <td class="Cat">Bibliotecario</td> </tr> <tr> <td class="Cat">Préstamos</td> </tr> </table> </div> <div id="consultas"> <table width="100%" border="0"> <tr> <td class="nomCat">Consultas</td> </tr> <tr> <td class="Cat">Usuario</td> </tr> <tr> <td class="subCat">Alumnos</td> </tr> <tr> <td class="subCat">Profesores</td> </tr> <tr> <td class="Cat">Editorial</td> </tr> <tr> <td class="Cat">Autores</td> </tr> <tr> <td class="Cat">Bibliotecarios</td> </tr> </table> </div> </div> <div id="contenido"> <form name="form1" method="post" action=""> <p class="titleGeneral">Altas de Bibliotecario:</p> <table width="85%" border="0" align="center"> <tr> <td colspan="3" class="titleTable">Ingrese los Datos</td> </tr> <tr> <td colspan="3" class="subtitleTable">Datos Personales </td> </tr> <tr> <td width="44%" class="textForm">Nombre:</td> <td width="29%"><input type="text" name="textfield"> </td> <td width="27%"> </td> </tr> <tr> <td class="textForm">Apellidos:</td> <td><input type="text" name="textfield"></td> <td><input type="text" name="textfield"></td> </tr> <tr> <td class="textForm">Teléfono:</td> <td><input type="text" name="textfield"></td> <td> </td> </tr> <tr> <td class="textForm">Dirección: </td> <td><input type="text" name="textfield"></td> <td> </td> </tr> <tr> <td class="textForm">Sexo: </td> <td><select name="select"> <option value="m">Masculino </option> <option value="f">Femenino </option> </select></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3" class="subtitleTable">Identificación </td> </tr> <tr> <td class="textForm">Login: </td> <td><input type="text" name="textfield"></td> <td> </td> </tr> <tr> <td class="textForm">Password:</td> <td><input type="text" name="textfield"></td> <td> </td> </tr> <tr> <td class="textForm">Cargo:</td> <td><select name="select"> <option value="A">Administrtador</option> <option value="B">Bibliotecario </option> </select></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3"><div align="center"> <input type="submit" name="Submit" value="Agregar Bibliotecario "> <input type="submit" name="Submit" value="Cancelar"> </div></td> </tr> </table> </form> </div> <div id="derecha"> <p> </p> </div> </body> </html>
Código:
bien, esto es lo que he hecho, espero comentarios y sugerencias que me haran mucha falta para poder optimizar mas los estilos y la pagina en si. hasta pronto y gracias./* CSS Document */ /*Inicia estilos para div's*/ #contenido{ float:left; padding-top:2%; margin-top:5px; margin-left:1.5%; margin-right:1%; width:70%; } #izquierda{ text-align:center; float:left; margin-top:5px; width:10%; height:600px; padding-top:2%; padding-left:5px; padding-right:5px; background-color:#DCEAB3; border-right-color:#B0C378; border-right-style:solid; border-right-width:thin; } #derecha{ float:right; margin-top:5px; width:10%; height:600px; padding-top:2%; padding-left:5px; padding-right:5px; background-color:#DCEAB3; border-left-color:#B0C378; border-left-style:solid; border-left-width:thin; } #superior{ float:right; width:100%; height:75px; background-color:#607524; border-bottom-color:#799B18; border-bottom-style:solid; border-bottom-width:thick; } #medioSuperior{ float:left; margin-top:5px; width:100%; height:25px; background-color:#ADCF4F; border-bottom-color:#607524; border-bottom-style:solid; border-bottom-width:thin; } #altas{ text-align:left; width:100%; height:150px; padding:3px; background-color:#D6F582; border:1px dashed #607524; } #consultas{ text-align:left; width:100%; height:150px; padding:3px; margin-top:20px; background-color:#D6F582; border:1px solid #607524; } /*Termina estilos para div's*/ .titleSAPB{ font-family:Tahoma, Verdana; font-size:32px; font-weight:600; color:#939C77; } .subTexto{ font-family:Tahoma, Verdana; font-size:12px; color:#000066; font-weight:600; } .nomCat{ font-family:Tahoma,verdana; font-size:13px; color:#000066; font-weight:600; } .Cat{ font-family:Tahoma,verdana; color:#555565; font-size:13px; text-indent:10px; } .subCat{ font-family:Tahoma,verdana; color:#8C8C8B; font-size:12px; text-indent:20px; } .titleTable{ font-family:tahoma,verdana; font-size:15px; color:#000066; text-align:center; font-weight:600; } .subtitleTable{ font-family:tahoma,verdana; font-size:14px; color:#AB6711; text-align:center; font-weight:600; } .titleGeneral{ font-family:Trebuchet ms; font-size:18px; color:#78B0C3; text-align:left; font-weight:600; border-bottom:3px solid #c0c0c0; } .textRow{ font-family:Tahoma; font-size:13px; text-align:left; } .recuadro{ padding:5px; margin-top: 10px; border: 1px solid #C0C0C0; } .textForm{ font-family:Tahoma; font-size:13px; text-align:right; padding-right:20px; }
