Ver Mensaje Individual
  #5 (permalink)  
Antiguo 26/10/2009, 13:45
xfer2
(Desactivado)
 
Fecha de Ingreso: junio-2009
Mensajes: 256
Antigüedad: 14 años, 9 meses
Puntos: 1
Respuesta: ayuda con boceto web

buenas de nuevo. escribi este post de una ayuda para una pagina web. estoy iniciandome recien para hacer la maquetacion web. tengo el ejemplo.



la verdad no se como hacerlo. solo hice el css para el logo, el menu de categorias, producto destacado, etc.

este es el codigo.

Código:
#contenedor {
    width:990px; /*ancho total de la pagina*/ 
	height:auto;
    border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
    margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ 
    text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ 
}

#encabezado {
    margin:10px; /*para que no se pegue al borde*/ 
    padding:10px; /*algo de relleno*/
    width:237px; /*este ancho es para que cuadre con el texto*/ 
    height:60px; /*idem*/ 
    border:1px solid #333333; /*decoracion*/ 
    float:left; /*lo flotamos a la izquierda*/ 
    display:inline; /*(*)*/ 
}

/*-top (superior), -bottom (inferior), left (izquierda) y right (derecha):*/

#navegacion{
	margin:10px;
    padding:10px;
	width: 204px;
	height:auto;
	clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
/*	border:1px solid #333333;*/
	
}
#navegacion ul{
	list-style: none;
}
#navegacion ul li{
	height: 30px;
	border-bottom: 1px dotted #ccc;
	font-family:Tahoma;
	font-size:11px;	
}

/*-top (superior), -bottom (inferior), left (izquierda) y right (derecha):*/

#navegacion ul li a{
	text-indent: 20px;
	padding: 3px 0;
	margin-left:-38px;
	display: block;
	height: 20px;
	text-decoration: none;
	color: #434343;
	background-image: url(../imagenes/bull_2.png);
	background-repeat: no-repeat;
	background-position: 5px 6px ;
}
#navegacion ul li a:hover{
	background-color:#D6D6D6;
	background-image: url(../imagenes/bull_2.png);
	background-repeat: no-repeat;
/*	background-position: 15px 6px ;*/
	color: white;
}

/*producto destacado*/
#destacado{
	margin:10px;
    padding:10px;
	width: 204px;
	height:auto;
	clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
/*	border:1px solid #333333;*/
	text-align:center;
}

#contactenos{
	margin:10px;
    padding:10px;
	width: 202px;
	height:auto;
	clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
/*	border:1px solid #333333;*/
	text-align:center;	
}

.texto_contactenos{
	font-family:Helvetica;
	font-size:18px;
	color:#55BDE3;
}

.texto_contactenos_2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#55BDE3;
}

.texto_contactenos_3{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#767F82;
}

p {
	font-family:Tahoma;
	font-size: 11px;
	color: #828B93;
	text-align: center;
	margin: 6px;
	
}
se que en este foro se ayuda pero no se por donde empezar. agradecere su ayuda.

Última edición por xfer2; 26/10/2009 a las 13:46 Razón: correcion del tema.