Foros del Web » Creando para Internet » CSS »

ayuda con boceto web

Estas en el tema de ayuda con boceto web en el foro de CSS en Foros del Web. buenas. estoy iniciandome para hacer la maquetacion web en css. ya tengo el boceto y esta en fireworks. me podran ayudar para maquetear el boceto ...
  #1 (permalink)  
Antiguo 18/10/2009, 17:15
(Desactivado)
 
Fecha de Ingreso: junio-2009
Mensajes: 256
Antigüedad: 8 años, 6 meses
Puntos: 1
ayuda con boceto web

buenas. estoy iniciandome para hacer la maquetacion web en css. ya tengo el boceto y esta en fireworks. me podran ayudar para maquetear el boceto web por favor.

Esto es lo que desarrolle.

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: 5px 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;
	
}
saludos.

Última edición por xfer2; 18/10/2009 a las 17:42 Razón: quite el link de la imagen.
  #2 (permalink)  
Antiguo 18/10/2009, 17:24
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: ayuda con boceto web

aver.. no entiendo, ayudar?...
si ya tienes mucho avanzado por que no lo terminas?...
mejor dinos que tienes mal...
sino pasate por "ofertas de empleo" ya que aqui se ayuda, no se hacen trabajos free...
  #3 (permalink)  
Antiguo 18/10/2009, 17:36
(Desactivado)
 
Fecha de Ingreso: junio-2009
Mensajes: 256
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: ayuda con boceto web

tienes razon. no especifique mi problema. mi problema era que como puedo hacer un banner como el de la imagen.

ademas como usted dijo, en el foro se ayuda no se realizan trabajos freelance.

Última edición por xfer2; 18/10/2009 a las 17:43 Razón: correcion del texto.
  #4 (permalink)  
Antiguo 18/10/2009, 18:16
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: ayuda con boceto web

Cita:
como puedo hacer un banner como el de la imagen
#1
Cita:
Última edición por xfer2; Hoy a las 17:42 Razón: quite el link de la imagen.
  #5 (permalink)  
Antiguo 26/10/2009, 14:45
(Desactivado)
 
Fecha de Ingreso: junio-2009
Mensajes: 256
Antigüedad: 8 años, 6 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 14:46 Razón: correcion del tema.
  #6 (permalink)  
Antiguo 27/10/2009, 10:41
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: ayuda con boceto web

Hola xfer2:

Cada uno de esos rectangulos que dibujas son divs y estan contenidos por un div "invisible" al que das una id="contenedor" que tiene este aspecto en body...

Código HTML:
<div id="contenedor">
<div id="rectangulo1"></div>
<div id="rectangulo2"></div>
...
<div id="rectanguloN"></div>
</div> 
llama esas id en tu <style> pero antes da un reset y un estilo al body:

Código HTML:
<style type="text/css">
*{margin:0; padding:0;}/*reset básico*/
body {font:Arial; font-size:1em;} /*los estilos que quieras, */
#contenedor {}
#rectangulo1{}
#rectangulo2{}
...
#rectanguloN{}
</style> 
Luego das dentro de las llaves de tus div "rectangulos" las posiciones que quieres que ocupen los mismos dentro de tu maqueta. Esto lo haces con la propiedad "position" http://www.librosweb.es/css/capitulo5.html. Aunque te sugiero que antes de entrar a posicionar tus divs practiques con las propiedades "float" y "clear" http://www.comocrearunsitioweb.com/propiedad-float-css

Saludos!
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




La zona horaria es GMT -6. Ahora son las 14:37.