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:
y index.css:<!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>
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???
