[SOLUCIONADO] Desplazamieto de imagen dentro de divs

marcgarcia51 · #1 (**permalink**) 12/09/2015, 12:32

Muy buenas, estoy intentando conseguir que la imagen de mi logo, se desplace hacia la izquierda cuando reduzca el ancho del navegador y no me refiero a tamaño smartphone, mas bién tablet o simplemente una ventana más chiquita.
Pueden ver el efecto en www.taringa.net ; si reducen el ancho de la ventana los elementos de la barra de navegación se desplazan hacia la derecha u izquierda. Pensé que con "margin-left/right : auto" funcionaría pero no.
Los mios se quedan fijos, aqui mi código:

Código HTML:

<body>
  		<header >
		 <div class="container">
		  <div id="logo" >
		   <a href="index.html" ><img id="img1" src="images/logo.png" ></img> </a>
		   <a href="index.html" ><img id="img2" src="images/logo-mobile.png"></img><img id="img3" src="images/menu.png"></img></a>
   		  </div>
		 </div>
		<div class="container">
		<nav>
			 <ul>
					<li><a href="">algo</a></li>
					<li><a href="">algo</a></li>
					<li><a href="">algo mas</a></li>
					<li><a href="">algo mas</a></li>
				</ul>
		</nav>
		</div>
		</header>
<body>
</body>

css:

Código:


.container {
margin-left: auto;
margin-right: auto;}

#img1{
display:block;
z-index:1;
margin-left:170px;
 }

#img2{
display:none;
z-index:-1;
 }
#img3{ display:none;}

#logo{
height: 79px;
width:100%;

background: green url('fondo.png') repeat;
 }

nav{
padding: 0.5em 1em 0.01em;
display:inline-block;
width:100%;
height:60px;
background-color:#F6E3CE;
 }
 
nav ul li {
letter-spacing: 0.09em;
text-transform: uppercase;
padding-left:2em;
}

nav ul li a {
text-decoration:none;
color:black; }
 
li {font-family:'Questrial','Arial'; 
}

xfxstudios · #2 (**permalink**) 12/09/2015, 13:25

prueba asi:

Código HTML:

Ver original<style>
.top{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    height:100px;
}
.logo{
    background-color:#FF6E00;
    width:150px;
    height:100px;
    float:left;
}
.menu{
    background-color:#00437B;
    color:#fff;
    width:150px;
    height:100px;
    float:right;
}
</style>
 
<div class="top">
 
    <div class="logo">
    AQUI EL LOGO
    </div>
    
    <div class="menu">
    AQUI EL MENU
    </div>
    
</div>

marcgarcia51 · #3 (**permalink**) 12/09/2015, 16:28

No funcionó, aparte que decirle al div contenedor que tenga margin: auto a ambos costados no es el caso, los elementos de adentro tienen que tener margin: auto; mas que nada porque el elemento contenedor ocupa todo el ancho de la página no necesita margenes.

fede5426 · #4 (**permalink**) 12/09/2015, 22:57

En el sitio Taringa.net no veo que el logo se desplace.. los cambios que hace al reducir el tamaño de la ventana son reducir el padding de los elementos del menú y reducir el ancho de la columna central..

Eso lo haces con media queries indicando los cambios a determinada resolución..

Código CSS:

Ver originalnav ul li {
    padding:1em;
}
 
@media screen and (max-width:720px){
    nav ul li{
        padding:.5em;
    }
}

marcgarcia51 · #5 (**permalink**) 14/09/2015, 06:41

Lo logré con el logo agregandole margin-left/right: auto a la img1 y quitandole el 170px. El ".container" no sirve da nada. Pero no hay manera con la <nav>. Le agregue margin-left/right: auto a <li> porque son los elementos que tienen que adaptarse el div contenedor pero no funciona. ¿Alguna idea de como hacerlo?

Código:

nav ul li {
letter-spacing: 0.09em;
text-transform: uppercase;
padding-left:2em;
display:inline-block
margin-left:auto;
margin-right:auto;
}

#img1{
width:auto;
display:block;
z-index:1;
margin-right:auto;
margin-left: auto;
 }

marcgarcia51 · #6 (**permalink**) 18/09/2015, 11:53

Lo solucioné, use una tabla <tr> <td> envez de <ul><li>