Hola a todos espero estén bien, acabo de unirme al foro ya que estoy empezando con todo lo que es programación web, y haciendo una página sencilla de prueba me he topado con el problema de que esta se desordena al hacer zoom, he buscado por la web y aún no soluciono el problema, he leido en algunos casos que se debe a el uso de position absolute o a el uso de px y %, pero aún no logro que me resulte, espero que me puedan ayudar, muchas gracias desde ya.
Mi código es el siguiente
Código HTML:
<HEAD>
<title>Prueba</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<link rel="stylesheet" type="text/css" href="colores.css"/>
</HEAD>
<BODY>
<DIV id="arriba"></DIV>
<!-- ###### Cabecera ###### -->
<div id="cabecera">
<a href="./index.html" class="cabeceraTitulo" title="Homepage">
<span class="textoexp" id="textoexpand">EmpresaX</span></a>
<div class="cabeceraEnlaces">
<a href="./index.html">Mapa Web</a>
<a href="./index.html">Contacto</a>
<a href="./index.html">Ayuda</a>
</div>
</div>
<div class="barraMenu">
<a href="./index.html">Productos</a>
<a href="./index.html">Soluciones</a>
<a href="./index.html">Tienda</a>
<a href="./index.html">Atención usuario</a>
<a href="./index.html">Contactenos</a>
<a href="./index.html">Sobre EmpresaX</a>
</div>
</BODY>
Código:
/* ###### Body ###### */
body {
font-family: verdana, tahoma, helvetica, arial, sans-serif;
margin: 0;
}
/* ###### Cabecera ###### */
#cabecera{
height: 4em;
/*padding: 0.25em 2.5mm 0 4mm;*/
padding: 10;
}
.cabeceraTitulo {
font-size: 50;
text-decoration: none;
font-weight: bold;
font-style: italic;
line-height: 1;
}
.cabeceraTitulo span {
font-weight: normal;
}
.cabeceraEnlaces {
font-size: 20;
padding: 5 7 5 100;
position: absolute;
right: 10px;
top: 10px;
}
.cabeceraEnlaces * {
text-decoration: none;
padding: 0 2ex 0 1ex;
}
.cabeceraEnlaces a:hover {
text-decoration: underline;
}
.barraMenu {
text-align: center;
padding: 5 5;
}
.barraMenu * {
text-decoration: none;
font-weight: bold;
padding: 0 30;
}