Foros del Web - Ver Mensaje Individual

nacho_ocnos · #6 (**permalink**) 23/10/2012, 06:03

Cita:

Iniciado por furoya

Sí, por supuesto. Flotan, es absolutamente lógico que si no caben en ancho, se bajen. Y que si sobra espacio se vea en los lados.

Tiene que ver conque el zoom se maneja como en páginas web, no es lo mismo que un zoom fotográfico para imágenes o imprimibles.
En algunas escalas las fuentes se acomodan de una forma distinta que en otras.

Te voy a creer que te molestaste en resolver el problema. Por un lado hay cosas obvias, y por otro hay algunos trucos que quizá aún no conozcas.

Código:

<?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: 1270px;
	min-width: 780px;
	background: #ffffff;
	margin: 0 auto;
}

#nav {
	width: 100%;
	background: #336633;
	margin: 0; 
	padding: 10px 0; 
}

.cabecera {
	background: #ffffff;
}

.menu {
	height: 40px; 
	margin: 0; 
	text-align: center; 
	background: #ff00ff;
}

#nav li {
	display: inline; 
	white-space :nowrap;
}

#nav li a {
	text-decoration: none;
	padding: 10px 32px;
	background-color: #336633;
	color: #ffffff;
}

#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: #ffffff;
}

.diseñado_por {
	background: #CCCC33;
	font-size: 10px;
	font-style: italic;
	color: #ffffff;
}



	</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 &nbsp;|&nbsp; 2012
         </div>
		 
    <!-- fin .pie --></div>
    
    <div class="diseñado_por">
		 Diseñada por Nacho
	</div></center>
    

    
<!-- fin .contenedor -->
</div>

</body>
</html>

También te dejo un tema que no es el más explicativo del problema, porque el autor no tenía ganas de entender mucho y por eso no lo seguimos, pero te va a dar una idea.

Supongo que con esto ya podrás seguir solo.

[URL="http://www.forosdelweb.com/f53/zoom-las-paginas-web-974903/"]Zoom en las paginas web[/URL]

Gracias por tu respuesta furoya. Solucionaba el problema pero eliminaba el efecto del hover ya que no se "elevaba" el botón.

Cita:

Iniciado por diegobrice

Solo tienes que modificar esto:

Código HTML:

#nav li a {
	background-color: #336633;
	color: #fff;
	float:left;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	width: 12.5%;
}

El width le puse 12.5% porque son 8 elementos
Entonces divides 100/8 = 12.5

Muchas gracias diegobrice. Esto a solucionado mi problema y ha mantenido el efecto del hover. Podéis cerrar el tema.

Saludos