Foros del Web » Creando para Internet » CSS »

podrian revisar esta maquetación?? + sugerencias y comentarios

 Estas en el tema de podrian revisar esta maquetación?? + sugerencias y comentarios en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/10/2005, 14:34
Avatar de Gerifaltus  
Fecha de Ingreso: junio-2005
Ubicación: Tabasco, México
Mensajes: 180
Antigüedad: 19 años, 6 meses
Puntos: 4
podrian revisar esta maquetación?? + sugerencias y comentarios
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&iacute;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&iacute;a</span></td>
      <td width="238" align="center">Categor&iacute;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&oacute;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&eacute;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%">&nbsp;</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&eacute;fono:</td>
      <td><input type="text" name="textfield"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="textForm">Direcci&oacute;n: </td>
      <td><input type="text" name="textfield"></td>
      <td>&nbsp;</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>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" class="subtitleTable">Identificaci&oacute;n </td>
      </tr>
    <tr>
      <td class="textForm">Login: </td>
      <td><input type="text" name="textfield"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="textForm">Password:</td>
      <td><input type="text" name="textfield"></td>
      <td>&nbsp;</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>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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>&nbsp;</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.
__________________
:::.. Todo tiene un ¿Por qué? y un ¿Para qué? ..:::
:::.. Todo se reduce a un SI y a un No ..:::
  #2 (permalink)  
Antiguo 12/10/2005, 15:41
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 19 años, 7 meses
Puntos: 17
Hola, aqui están algunas observaciones:

en el css usas varios Divs así:

border-right-color:#B0C378;
border-right-style:solid;
border-right-width:thin;

Lo puedes usar así, y ahorrarás código:
border-right: thin solid #B0C378;

Lo otro es que usas los menús dentro de tablas, y TODAS LAS TABLAS las puedes SUSTITUIR por CSS.

Saludos,
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 12/10/2005, 16:03
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 10 meses
Puntos: 998
Bienvenido al fantástico mundo del CSS
Ahora, una sugerencia que te va a evitar muchos problemas: OLVIDATE DE LAS TABLAS... por ejemplo:

Código HTML:
<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>
¿para que querés esa tabla?
Conseguis lo mismo (en realidad conseguís más y mejor) con mucho menos código:
Código: 
<div id="superior">
<img src="image.gif" width="75px" height="75px" align="absmiddle" alt="Texto">
<h1>SAPB</h1>
</div>

y en tu CSS...
h1{text-align:center;}
Como ves, si seguimos esta "filosofía" en el resto del archivo, podemos bajar drásticamente la cantidad de código, y por lo tanto (entre otras cosas) hacer los archivos más livianos (en una web extensa se nota) y hasta más comprensibles para los buscadores.
No te olvides del atributo alt en las imágenes, se usa como texto alternativo en el caso que por x razón no se pueda ver la imagen (imagenes deshabilitadas, navegador solo texto, etc.)
Además vi que en tu CSS repetís muchos atributos... CSS se traduce al Español como "Hoja de estilo en cascada" y justamente no estas usando las ventajas de la parte "C" de casacada. A grosso modo queire decir que los elementos (la gran mayoría) de un atributo "padre" se heredan a un elemento "hijo"... por ejemplo, el mayor nivel de padre lo da el elemento html (por lo de <html><head></head><body>, bla,bla) ya que todos los demás elementos estan contenidos en el, así que si en tu CSS definís atributos para el "head" y el "body" (generalemnte se definen en conjunto para evitar posibles "problemas") ya se defienen para el resto de los elementos hijos, por ejemplo con:
html, body { font-family:tahoma,verdana;}
ya estás definiendo el estilo de letra que se va a usar en todos tus elementos hijos (salvo que especifiques lo contrario). Como ves te ahorrás un montón de líneas, solo con este "pequeño" detalle... en las FAQs de CSS hay muy buenos manuales que te recomeindo leer.

También te puedo decir que algunos atributos se pueden abreviar así que en vez de escribir:
border-bottom-color:#799B18;
border-bottom-style:solid;
border-bottom-width:thick;

podés solamente escribir:
border-bottom:thick solid #799B18;

otra cosa: te recomiendo el uso de la unidad em para el manejo de textos, no px.
Aquí te dejo la explicación.

Bueno, ahora es tu turno de investigar, estudiar, hacer... y deshacer
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 13/10/2005, 02:01
 
Fecha de Ingreso: octubre-2005
Mensajes: 53
Antigüedad: 19 años, 2 meses
Puntos: 1
Esta muy chulo en general..pero..

lo he probado en Mozilla y el menu de la izq queda mal.. cuando se hace pequeño las capas de altas y consultas (mas bien los textos) se salen del menu y se juntan con el contenido.. es curioso.. pero no se porque será... habra que definir la hoja de estilo diferente no??

Otra cosa.. cuando se hace pequeña la web se "caen" para abajo las capas quedando bastante feo, en vez de que se mantengan siempre juntas.. como se resolveria eso?? englobando todas en una capa global quizas no??

saludos.
Última edición por vic4ever; 13/10/2005 a las 02:06
  #5 (permalink)  
Antiguo 13/10/2005, 14:14
Avatar de Gerifaltus  
Fecha de Ingreso: junio-2005
Ubicación: Tabasco, México
Mensajes: 180
Antigüedad: 19 años, 6 meses
Puntos: 4
muchas, pero muchas gracias a todos los que me han sugerido sus experiencias y comentarios, creanme que los pondre en practica, así como más animos para poder seguir con esto del css (que ahorra mucha chamba).

con respecto a lo que comentó vic4ever , del menu y las capas, lo checare pues la maquetación la hice al "trancazo", sin preveer esos detallitos, y pues solo lo probe en IE .

bien estaremos en cotacto, hasta pronto y gracias de nuevo.
__________________
:::.. Todo tiene un ¿Por qué? y un ¿Para qué? ..:::
:::.. Todo se reduce a un SI y a un No ..:::
  #6 (permalink)  
Antiguo 13/10/2005, 14:50
Avatar de CORE
Usuario no validado
  
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 22 años, 9 meses
Puntos: 3
yo lo dejaria asi

definitivamente sobran propiedades y muchas celdas a todo puede darse estilo desde la hoja css.
pero el codigo deberia de quedar asi
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Registro</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="superior">
<img src="image.gif" style="float:right; width:75px; height:75px;" alt="Monserrat Garc&iacute;a" />SAPB</div>
<div id="medioSuperior">
  <ul>
    <li>Usuario: Monserrat Garc&iacute;a </li>
    <li>Categor&iacute;a:Administrador </li>
    <li>Fecha: 25 de Octubre del 2005</li>
    <li> <a href="#" class="subTexto">Cerrar sesi&oacute;n </a> </li>
  </ul>
</div>
<div id="izquierda">
<h3>Menú</h3>
<div id="altas">
    <ul>
    <li>Atlas</li>
    <li>Material</li>
    <li>Usuarios</li>
    <li>Blibliotecario</li>
    <li>Prestamos</li>
    </ul>
    <ul>
      <li>Consultas</li>
      <li>Usuarios</li>
      <li>Alumnos</li>
      <li>Profesores</li>
      <li>Editorial</li>
      <li>Autores</li>
      <li>Bibliotecarios</li>
    </ul>
</div>
<div id="consultas"> </div>
</div>
<div id="contenido">
<form id="form1" method="post" action=""><fieldset><legend>Altas de Bibliotecario</legend>
    <label for="nombre">nombre</label><input type="text" name="nombre" id="nombre" /><br />
    <label for="apellidom">apellido m</label><input type="text" name="apellidom" id="apellidom" /><br />
    <label for="apellidop">apellido p</label><input type="text" name="apellidop" id="apellidop" /><br />
    <label for="telefono">telefono</label><input type="text" name="telefono" id="telefono" /><br />    
	<label for="direccion">direccion</label><input type="text" name="direccion" id="direccion" /><br />
	<label for="sexo">sexo</label>
	<select name="sexo" id="sexo">
        <option value="m">Masculino </option>
        <option value="f">Femenino </option>
	</select>
</fieldset>
<fieldset>
<legend>Identificaci&oacute;n</legend>
<label for="login">login</label><input type="text" name="login" id="login" /><br />
<label for="pass">password</label><input type="password" name="pass" id="pass" /><br />
<label for="cargo">cargo</label>
<select name="cargo" id="cargo">
        <option value="A">Administrtador</option>
        <option value="B">Bibliotecario </option>
 </select>
</fieldset>
</form>
</div>
<div id="derecha">
<p>Aqui existen un parrafo sin texto</p>
</div>
</body>
</html>
y el validator dice

This Page Is Valid XHTML 1.1!
  #7 (permalink)  
Antiguo 15/10/2005, 16:33
Avatar de Gerifaltus  
Fecha de Ingreso: junio-2005
Ubicación: Tabasco, México
Mensajes: 180
Antigüedad: 19 años, 6 meses
Puntos: 4
Esta :arriba: :aplauso:
esta de pelos esa maquetación CORE , no pense que se pudiese hacer todo eso con css (ahora entiendo su difusión).

bueno con esto me acabas de dar otra idea y un abanico de posibilidades para datallar lo que estoy haciendo (parchando).

gracias, hasta pronto.
de hecho ya modique la maquetación, elimine algunos divs repetidos y los puse así

#div1, div2, #divn {
propieadades x...
}

con eso me ahorre un buen de lineas.
__________________
:::.. Todo tiene un ¿Por qué? y un ¿Para qué? ..:::
:::.. Todo se reduce a un SI y a un No ..:::
  #8 (permalink)  
Antiguo 16/10/2005, 01:45
Avatar de CORE
Usuario no validado
  
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 22 años, 9 meses
Puntos: 3
Cita:
Iniciado por Gerifaltus
esta de pelos esa maquetación CORE , no pense que se pudiese hacer todo eso con css (ahora entiendo su difusión).
gracias por el comentario, pero el codigo que puse no es CSS es XHTML y es como se podria maquetar lo que quieres el diseño de posiciones, colores, tipos de letra, etc. si lo haces desde la hoja de estilo

si necesitas un ejemplo, publique un post aqui basado en tu code para que te des una idea de como aplicar CSS en formularios,

saludos
  #9 (permalink)  
Antiguo 17/10/2005, 13:02
Avatar de Gerifaltus  
Fecha de Ingreso: junio-2005
Ubicación: Tabasco, México
Mensajes: 180
Antigüedad: 19 años, 6 meses
Puntos: 4
si, ya lo revise CORE, y no se ve tan complicado ni laborioso, de hecho toda la chamba del formateo la hacen los estilos del css.

ok, gracias y hasta pronto.
__________________
:::.. Todo tiene un ¿Por qué? y un ¿Para qué? ..:::
:::.. Todo se reduce a un SI y a un No ..:::
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:09.