Problema con la resoluciones

nob14 · #1 (**permalink**) 21/09/2013, 00:00

Hola gente como va, soy nuevo en el foro, tengo un pequeño problema que no me deja seguir con la creacion de la primera pagina web para un trabajo practico... el problema es que no consigo que los elementos se vean igual en todo tipo de resolucion de pantalla (en la que yo uso solo se ve como yo quiero) o cuando se haga zoom, se me juntan todos los elementos y no hace scroll como deberia, no puedo seguir haciendo el trabajo hasta que arregle esto, gracias desde ya !

Código:

<html>

	<head>

		<title>Indication</title>

		<link href="style.css" rel="stylesheet" type="text/css">
		
	</head>

	<body>
	<div id="wrapper">

		<!-- TOP menu -->
				
					
		<div id="menu">
		
			<ul>
				<li> <a href="index.html">Home </a> </li>
				<li> <a href="empresa.html">La empresa </a> </li>
				<li> <a href="productos.html">Productos </a> </li>
				<li> <a href="m">Servicios </a> </li>
				<li> <a href="l">Links </a> </li>
				<li> <a href="contacto.html">Contacto </a> </li>
			</ul>
			
		</div>
			
		<br><br><br><br><br><br><br><br>
			
		<!-- fin TOP menu -->
				
		
		<!-- Pie de pagina -->
		
		<div id="pie">
        
        <p>
		   
			<span style="text-decoration:underline; font-weight:600; font-size:18px"> Casa Central:</span>
			
			Av.Arijon 185 Bis / (2000) Rosario   
			<span style="font-weight:600;">Telefono:</span> (0341) 4667035   
			<span style="font-weight:600;">Mail:</span> [email protected]   
            
			</p>
        
		</div>
		
		<!-- Fin de pie de pagina -->

	</div>	
	</body>

</html>

Código:

body 
{
	margin: 10%;
	background-color: #FFFFFF; 
	background-image: url(imagenes/img01.jpg);
	background-position: left top;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #787878;
}

h1, h2, h3, h4, h5, h6
{
	color: #32639A;
}


p, ul
{
	line-height: 25px;
}

a 
{
	text-decoration: none;
	color: #4486C7;
}

/* Menu */

#menu 
{
	margin-top: -1%;
	margin-left: 12%;
	
}

#menu li 
{
	float: left;
	list-style-type: none;
}

#menu a 
{
	display: block;
	height: 7%;
	width: 155px;
	padding-top: 12%;
	text-decoration: none;
	text-align: center;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}
 #menu a:hover
 {
	background: #659CEF url(imagenes/img03.jpg) repeat-x left bottom;
}

/* Empresa */

#empresa
{
	background: #A9D0F5; 
	color: #D8D8D8;


}

/* Productos */

#imagen
{
	width: 50px;
	height: 50px;
}

/* Pie */

#pie 
{
margin: -10%;
width: 100%;
background-image: url(imagenes/pie.jpg);
position: absolute;
bottom: 0;
height: 120px;
color: #000000;
text-align: center;
}

#pie p
{
font-size:15px;
margin-top: 4%;
}

pzin · #2 (**permalink**) 21/09/2013, 02:10

Bienvenido al foro.

Si quieres que se vea igual, sólo tendrías que definir un ancho para #wrapper:

Código CSS:

Ver original#wrapper {
  width: 960px;
}

Aunque lo habitual es hacer un diseño responsivo, que precisamente se adapte a diferentes resoluciones.

Lo del zoom, yo no me preocuparía. Primero porque siempre va a descuadrar algo, y segundo porque no se diseña para el zoom.