que tal como estan todos;
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
), pues como estoy haciendo mis primeros pininos en esto del css.
bien este es el codigo de una pagina htm:
Código:
<!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>
y este es el del CSS:
Código:
/* 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;
}
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.
