La verdad es que estoy haciendo una web y el codigo CSS empieza a ser largo. He quitado partes en el codigo que os pongo aqui para no hacerlo muy largo.
Este es el primer problema que tengo. Es la primera web responsiva que hago y la verdad que me esta costando mucho la parte del menu. Entre tanto tocar por alli y por alla, ya no se que es lo que pasa para que esté saliendo así.
el caso es que cuando estrechas la ventana del navegador el menú que tengo en horizontal estoy trabajandolo para que se ponga en bloque, pero resulta que no consigo que se ponga al 100 % de ancho, se queda desplazado com 30 pixeles desde la izquierda y no consigo ver donde esta el error. Ya empiezo a tocar cosas que luego se me descolocan y me estoy volviendo loco.
Solo quiero saber porque se desplaza hacia la derecha ese poco.
El Código css:
Código:
y el html:
h1{
font-size: 1.96em;
line-height: 0.9em;
font-weight: normal;
text-align: left;
margin:0px;
}
header{
position: relative;
height: 449px;
width: 65.956487%;
margin:58px auto 0;
max-width: 891px;
min-width: 671px;
}
#topnav{
display: block;
position: relative;
margin: 0 0 0 -15px;
background: #3e4845;
box-shadow: 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
top:116px;
height: 62px;
}
#topnav:after{
content: '';
position: absolute;
}
#topnav:before{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
border-width: 0 20px 10px 0;
border-right-color: #000;
left: 0;
}
#topnav #navbtn {
display: none;
float: right;
margin-right:26px;
margin-top:18px;
width: 33px;
height: 25px;
background: url('../img/menu.svg') center no-repeat;
text-indent: -99999px;
overflow: hidden;
}
#topnav nav{
position: absolute;
top: 0px;
right: 0px;
height: 62px;
}
#topnav nav ul {
list-style: none;
margin:0;
}
#topnav nav ul li{
display: block;
float: left;
font-size: 0.95em;
margin-right: 6px;
}
#topnav nav ul li a{
display: block;
text-decoration: none;
color: #fff;
line-height: 62px;
padding: 0 15px;
}
#topnav nav ul li a:hover{
color: #3e4845;
background: #8b918f;
}
ul{
list-style: none;
}
ul li{
display: block;
float: left;
}
#controles{
z-index:101;
width: 85px;
height:30px;
background: black;
position: absolute;
top:192px;
left:20px;
overflow: hidden;
}
#controles p{
z-index:100;
position: relative;
top:-6px;
left:9px;
margin: 0px;
padding: 0px;
color: white;
width: 51px;
}
#controles #toggle{
position: relative;
top:10px;
left:65px;
width:11px;
height: 13px;
cursor: pointer;
}
#address_top{
text-align: right;
padding-right: 30px;
border-right: 1px solid black;
position: absolute;
top:47px;
right:210px;
font-size:0.75em;
line-height: 1.2em;
}
#logo{
position: relative;
width: 250px;
height: 90px;
margin: 19px 0 17px;
float: left;
}
#logo img {
width: 30.296875px;
height: 21px;
position: absolute;
top: 31.390625px;
left: 4.0625px;
}
#social_top{
position: absolute;
right:-6px;
top:44px;
}
#social_top li{
margin-right: 6px;
}
#slide{
width:99.956487%;
height:271px;
background:green;
position:absolute;
top:178px;
box-shadow: 0 0 10px #555;
-moz-box-shadow: 0 0 10px #555;
-webkit-box-shadow: 0 0 10px #555;
}
.addsearch{
background:#8b918f;
border:none;
height: 27px;
width: 168px;
z-index: 100;
position: absolute;
left:20px;
top:132px;
font-size: 1em;
}
.bold{
font-family: mostra_nuovabold;
}
.play {
background: url('../img/play.svg') no-repeat;
}
.pause {
background: url('../img/pause.svg') no-repeat;
}
/* responsive styles */
@media screen and (max-width: 690px) {
header{
width: 100%;
min-width: 320px;
}
#logo{
margin: 19px 0 17px 15px;
}
#address_top{
display: none;
}
#topnav{
width: 100%;
margin: 0px;
padding:0px;
z-index: 9000;
}
#topnav:after{
display: none;
}
#topnav:before{
display: none;
}
#topnav nav{
width:100%;
margin:0;
left:0;
}
#topnav nav ul li {
float: none;
margin: 0;
display: block;
}
#topnav nav ul li a {
display: block;
width: 100%;
line-height: 1.4em;
border: 0;
padding: 6px 9px;
background: #272822;
margin: 0;
}
#topnav nav ul li a:hover {
background: #ccc;
margin: 0;
}
#topnav #navbtn {
display: block;
z-index: 9001;
}
}
Código HTML:
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>escuela de acordeón mario torres</title> <link rel="stylesheet" href="css/estilos4.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var audio = $('audio')[0] $('#toggle').click(function(){ if (audio.paused){ audio.play(); } else { audio.pause(); } $(this).toggleClass('pause'); }); }); </script> </head> <body> <header> <div id="logo"> <img src="img/logo.svg" alt="escuela de acordeón mario torres"> <h1>ESCUELA <br> <span class="bold">DE ACORDEÓN</span><br>MARIO TORRES</h1> </div> <p id="address_top">Barrio de las letras.<br> C/ Ventura de la Vega, 11<br> 1º 1, 28014 – Madrid </p> <ul id="social_top"> <li><a href="https://www.facebook.com/escueladeacordeon.mariotorres" target="_blank"><img src="img/facebook_v.svg" alt="facebook"></a></li> <li><a href="https://plus.google.com/+EscueladeAcordeónMarioTorresMadrid" target="_blank"><img src="img/googleplus_v.svg" alt="google plus"></a></li> <li><a href="https://www.youtube.com/channel/UC8aK0CaCeoWvD8IKKiQiS2A" target="_blank"><img src="img/youtube_v.svg" alt="canal de youtube"></a></li> <li><a href="mailto:[email protected]"><img src="img/mail_v.svg" alt="email de contacto"></a></li> </ul> <div> <input type="text" class="addsearch" /> </div> <div id="topnav"> <nav> <ul> <li><a href="/clasesdeacordeon.html">CLASES</a></li> <li><a href="/escueladeacordeon.html">ESCUELA</a></li> <li><a href="/ventadeacordeones.html">VENTA DE ACORDEONES</a></li> <li><a href="/contacto.html">CONTACTO</a></li> </ul> </nav> <a href="#" id="navbtn">Nav Menu</a> </div> <div id="controles"> <audio src="audio/For_No_One.mp3"> </audio> <div id="toggle" class="play"></div> <p>MÚSICA</p> </div> <div id="slide"> </div> </header> </body> <script type="text/javascript" src="https://addsearch.com/js/?key=698b9bb5a9b8d7741590529845c184e6"></script> </html>
