Desorden de elementos al hacer zoom

Asbjorn · #1 (**permalink**) 12/01/2014, 18:25

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&oacute;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;
	}

pzin · #2 (**permalink**) 13/01/2014, 04:20

Usar posiciones absolutas para la maquetación es una mala práctica. Algo que deberías de evitar a toda costa.

Asbjorn · #3 (**permalink**) 13/01/2014, 08:58

Gracias por la respuesta, cambie lo de position absolute por el atributo float (es el uso de float recomendable o existe otra cosa?), pero sigue existiendo el problema al hacer zoom, creo que seguiré practicando en otras cosas hasta solucionar esto, saludos y gracias.

Adbane · #4 (**permalink**) 13/01/2014, 09:58

Tal vez si adjuntaras alguna captura de pantalla de como se ve o un enlace sería más sencillo.

PD: Podrias subir el código a jsFiddle para que lo veamos los demás.

Asbjorn · #5 (**permalink**) 13/01/2014, 10:15

Gracias por responder, aquí está el link de JSFiddle http://jsfiddle.net/Asbjorn91/4898P/
Saludos.