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';
}