Foros del Web » Creando para Internet » Diseño web »

sobre que tamaño tiene que tener una web!

Estas en el tema de sobre que tamaño tiene que tener una web! en el foro de Diseño web en Foros del Web. hola... no se que tamaño darle a mi web..e estado leyendo en internet y e visto esto: La resolucion de pantalla oscila entre 800 x ...
  #1 (permalink)  
Antiguo 24/01/2010, 09:35
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
sobre que tamaño tiene que tener una web!

hola...

no se que tamaño darle a mi web..e estado leyendo en internet y e visto esto:

La resolucion de pantalla oscila entre 800 x 600 y 1024 x 768, esto es lo mas comun, sin embargo hay monitores mas grandes.

Para una resolucion de 800 x 600, debemos darle al tamaño del diseño web 768 x 500, para una resolucion de 1024 x 768 vamos a utilizar un tamaño de 1000 x 500.

la resolucion que tengo puesta en mi pc es 1024 x 768. y segun el texto anterior deberia de poner un ancho de 1000 px a la web que estoy haciendo pero le e puesto un ancho de 800 px y lo e intentado centrar(en mi pc se ve el contenido centrado pero en los pcs de varios amigos mios se ve todo a la izquierda)

al principio de estar diseñando la web le puse un ancho de 990 pixeles ya que si ponia 1000 pixeles no se vea el contenido completo sino que me aparecia una barra de desplazamiento horizontal.....mi monitor es de 17" asi que por esto e puse al principio 990 px de ancho!! hice mal en hacer esto????


pero ahora tengo 800px de ancho..... haber si alguien me puede ayudar y explicar en profundidad como hay que diseñar en lo relativo al tamaño de la web!!!!


2º pregunta:

que codigos css tengo que meter para que se vea el contenido centrado en navegadores como firefox, internet explorer, opera o chrome???? paso a poner los codigos html y css de la web... pero tambien podeis verla online aqui:

www.tanato.site11.com

codigos :

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tanatostattoo</title>
<link href="cuidados/cuidados.css" rel="stylesheet" type="text/css" />
<link href="cuidados.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
<!--
body {
	 background-image: url(imagenes/fondo2.png)
	
}
.Estilo1 {color: #A97110}
-->
</style>
<body>

<div id="contenedor">
<div id="cabecera"><img src="imagenes/cabecera800px.jpg" width="800" height="200" /></div>


<div id="menu">

<ul>
  <li><a href="index.html" class="inicio"><span>inicio</span></a></li>
  <li><a href="#" class="tatuajes"><span>tatuajes</span></a></li>
  <li><a href="#" class="cuidados"><span>cuidados</span></a></li>
  <li><a href="#" class="contacto"><span>contacto</span></a></li>
</ul>
</div>
<div id="contenedortexto">


</div>
</div>
</body>
</html>
y index.css:
Código:
@charset "utf-8";
/* CSS Document */
#body {background-image:url(imagenes/fondo.png)}

#contenedor{width:800px; height:auto; background-color:#000000; margin:auto; }

#cabecera{width:800px; height:200px; float:left;}
#menu { width:800px; height:41px; float:left;background-image: url(imagenes/menubarra.png)}


ul {  
	list-style:none;
	margin:0;
	padding:0;
}
ul li {
	padding:0;
	float:left;
	}
	

ul li a {
	display:block;
	width:78px;
	height:41px;  
	text-decoration:none;
background-repeat:no-repeat;padding-left:50px; margin-left:50px;
}

 /*ul li a:hover {
background-image:url(../imagenes/iniciomenu2.png)
}
*/
ul li a span {
	display:none; 
}
a.inicio {
	background-image: url(imagenes/inicio1.png)
}

a.inicio:hover{background-image: url(imagenes/inicio2.png)
}


a.tatuajes {background-image: url(imagenes/tatuajes1.png)}

a.tatuajes:hover{background-image: url(imagenes/tatuajes2.png)}

a.cuidados {background-image: url(imagenes/cuidados1.png)}

a.cuidados:hover {background-image: url(imagenes/cuidados2.png)}

a.contacto{background-image: url(imagenes/contacto1.png)}

a.contacto:hover{background-image: url(imagenes/contacto2.png)}


#contenedortexto{width:800px; height:545px; float:left;}

otra cosa la imagen del fondo..ke es negra y con los lados en gris no se ve centrada por que???
  #2 (permalink)  
Antiguo 24/01/2010, 09:40
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: sobre que tamaño tiene que tener una web!

la imagen de fondo tiene un ancho de 990px puede ser eso el fallo del por que no se ve centrada???...voy a probar a poner background-repeat: no repeat; haber si asi se soluciona el fallo........
  #3 (permalink)  
Antiguo 24/01/2010, 10:39
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: sobre que tamaño tiene que tener una web!

Para centrar totalmente una web, la técnica más útil y sencilla es dar estos estilos al body y al div que engloba todo el contenido (en tu caso el div #contenedor):

body {
text-align: center;
background: url(imagenes/fondo.png) top center;
}

#contenedor {
margin: 0 auto;
text-align:left;
}

Con esto sería suficiente para centrar el contenido y el fondo en el navegador, a parte de los otros estilos que le quieras dar.

Respecto a la resolución, si hablamos de diseño fijo, creo que no es un error hacer la mayoría de diseños para pantallas con resolución de 1024px (la web unos 990 máx.), pero lo mejor, si puedes, es usar diseño elástico y así la web se adaptará a cualquier resolución de pantalla.

Te dejo un par de artículos donde se habla de tipos de diseño y después saca tus conclusiones.

http://www.grancomo.com/e/diseno_fij...l_es_mejor.php
http://www.100px.com/articulos/ni_fi...quido_elastico
  #4 (permalink)  
Antiguo 24/01/2010, 12:28
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: sobre que tamaño tiene que tener una web!

gracias por tu ayuda tio...

Eh puesto los codigos que me as dicho pero sigo teniendo problemas en el internet explorer....


asi tengo el codigo ahora:


body {
background-image: url(imagenes/fondo2b.png);text-align: center; background-position:center;

}


#contenedor{width:800px; height:auto; background-color:#000000; margin:0 auto; text-align:left; }


para ver la web: www.tanato.site11.com

en el firefox se ve bien.
en el ie se ve una linea horizontal blanca en la parte superior
en el chrome se ve muy mal el fondo....
  #5 (permalink)  
Antiguo 24/01/2010, 17:24
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 8 años
Puntos: 16
Respuesta: sobre que tamaño tiene que tener una web!

La línea blanca que ves en explorer seguramente sea el margen por defecto del navegador. Lo puedes quitar poniendo margin:0; al body, pero tambien puedes resetear por completo los estilos css para evitar problemas futuros:

http://www.cssblog.es/resetear-estilos-css/

Y para solucionar lo del fondo, fíjate bien que en el background-position solo tienes center, por lo tanto te lo centra tanto verticalmente como horizontalmente, deberías poner:

backgroun-position: center top;

Etiquetas: tamaño
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 00:55.