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%;
}