Tengo un problema que me trae de cabeza y no he conseguido encontrar la solución y creedme, soy del tipo de persona que busca hasta la saciedad pero esto ha podido conmigo.
La cuestión es que he creado un menu horizontal que se ajusta al div padre (ya que tiene la misma dimensión y gracias a los padding de los elementos li) pero al hacer zoom in o zoom out se me descuadra en algunos "porcentajes".
Aqui esta la pagina, agradeceria mucho la ayuda.
Código:
Un millón de gracias.<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pruebas S.L</title>
<style type="text/css">
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #CCCC33;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
.contenedor {
width: 1000px;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto;
}
.cabecera {
background: #FFF;
}
.menu {
margin: 5px 0;
}
#nav li {
display: inline;
}
#nav li a {
text-decoration: none;
float:left;
padding: 10px 32px;
background-color: #336633;
color: #fff;
}
#nav li a:hover {
background-color: #63C163;
margin-top: -2px;
padding-bottom: 12px;
}
.contenido {
padding: 10px 5px;
text-align: justify;
float:left;
}
.pie {
background: #336633;
clear: both;
padding: 2px 0;
color: #FFF;
}
.diseñado_por {
background: #CCCC33;
font-size: 10px;
font-style: italic;
color: #FFF;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="cabecera"><a href="#"><img src="img/logo.png" alt="Logotipo " name="Logo " width="383" height="100" style="display:block;" /></a>
<!-- fin .cabecera --></div>
<div class="menu">
<ul id="nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Sevicios</a></li>
<li><a href="#">Marcas</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Ayuda</a></li>
<li><a href="#">Contacto</a></li>
</ul>
<!-- fin .menu --></div>
<div class="contenido">
<h1>Aqui va a ir el contenido</h1>
<p>Cada seccion tendra su propio contenido que aparecera en este div</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ipsum, pulvinar eu consectetur vitae, tempus sit amet arcu. Vivamus mollis venenatis gravida. Quisque congue vulputate aliquet. Suspendisse vitae nunc sed erat ornare viverra. Quisque odio urna, imperdiet id dapibus at, malesuada quis ligula. Aliquam fringilla lorem ut mi eleifend pellentesque at a velit. Ut ante arcu, congue nec rutrum sit amet, tristique vel sem. Sed sit amet enim lectus. Curabitur vitae molestie est.</p>
<p>Pellentesque faucibus, nulla id rhoncus posuere, purus metus condimentum nunc, eu porttitor lorem diam in risus. Integer a varius tellus. Aliquam neque sapien, pharetra ut eleifend sed, lobortis sit amet dolor. Vestibulum sit amet congue elit. Quisque ut ligula sit amet lacus suscipit facilisis fringilla ac sapien. Nullam arcu lectus, convallis sit amet commodo vel, rhoncus non erat. Nulla facilisi. Praesent vehicula interdum sapien, a mattis neque egestas non. Nunc enim diam, gravida accumsan imperdiet convallis, molestie in lectus.</p>
<p>Sed velit augue, feugiat vel aliquam eget, fringilla ornare dui. Aenean accumsan tincidunt metus at viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris rhoncus, tortor at rhoncus fermentum, tellus sem sagittis mi, a sodales lorem nisl sit amet ante. Morbi ac tellus eget enim sagittis interdum. Phasellus eleifend tempor nisi in fermentum. Morbi lobortis dapibus suscipit. Ut bibendum nulla eu nulla luctus commodo. Fusce ut arcu felis, ut rutrum tellus. Suspendisse ac ipsum lorem. Sed luctus sem id lorem ultricies sodales hendrerit eu risus. Donec imperdiet magna at dui porta nec pretium augue placerat. Donec eu sapien risus.</p>
<p>Fusce scelerisque congue vestibulum. Integer faucibus diam a erat aliquam sed rhoncus lectus pretium. Nulla aliquam egestas ullamcorper. Mauris at diam lacus. Sed condimentum auctor sapien id fringilla. Vivamus non urna tellus. In hac habitasse platea dictumst. Nulla at nulla a nunc convallis porta. Vestibulum vulputate eleifend metus, nec dictum nibh tempor nec.</p>
<p>Cras quis metus posuere lorem molestie mattis at tempor nibh. Donec cursus ultricies lacus quis rhoncus. Pellentesque justo risus, iaculis vitae posuere at, vestibulum ac nibh. Sed scelerisque, massa quis aliquet rhoncus, neque velit convallis libero, at sollicitudin est enim ut arcu. Proin pulvinar suscipit neque, id vehicula lacus viverra at. Nullam posuere odio et dui placerat ut egestas arcu porta. Sed risus mauris, malesuada in porta vitae, pellentesque non tellus. Praesent eget mauris a sem elementum suscipit. Mauris dui nisl, interdum id placerat ac, imperdiet nec purus. Nullam ac magna elit. Curabitur facilisis ultrices tincidunt. Morbi tempus fermentum augue id auctor. Donec elementum posuere rhoncus.</p>
<!-- fin .contenido --></div>
<center><div class="pie">
<div class="site_info">
Pruebas S.L | 2012
</div>
<!-- fin .pie --></div>
<div class="diseñado_por">
Diseñada por Nacho
</div></center>
<!-- fin .contenedor -->
</div>
</body>
</html>
Saludos.
