Buenas Noches, soy practicamente nueva haciendo web, y además estoy haciendo mi primera web responsive con HTML5 y CSS3, he comenzado teniendo un par de problemillas que no se como solucionar, si alguien me podría ayuda se lo agradecería.
1) No puedo colocar el menú justo al lado del logo, a pesar de poner display:inline-block; me continua saliendo el logo centrado en la parte superior y luego el menú
2) Al poner el navegador más pequeño la imagen que estoy usando como banner estático no se redimenciona sino que se achata
Dejo aquí mis lineas de código para que les echen un vistazo a ver que me dicen
Código HTML:
<body>
<section id="container_header_principal">
<header id="header_principal">
<h1>
<figure id="logo"> <a href="http://www.forosdelweb.com/f53/index.html"><img src="http://www.forosdelweb.com/f53/images/logo_movyco.png" width="165" height="165"></a> </figure>
</h1>
<nav id="menu_principal">
<ul>
<li><a href="http://www.forosdelweb.com/f53/diseno_grafico.html">Diseño Gráfico</a></li>
<li><a href="http://www.forosdelweb.com/f53/diseno_web.html">Diseño Web</a></li>
<li><a href="http://www.forosdelweb.com/f53/social_media.html">Social Media</a></li>
<li><a href="http://www.forosdelweb.com/f53/rotulacion.html">Rotulación</a></li>
<li><a href="http://www.forosdelweb.com/f53/portafolio.html">Portafolio</a></li>
<li><a href="http://www.forosdelweb.com/f53/contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
</section>
<figure id="banner_principal">
<img src="http://www.forosdelweb.com/f53/images/banner_home.png" width="1024" height="300" alt="banner_home">
</figure>
</body> CSS
*{
border:0;
margin:0;
padding:0;
}
article,figure,footer,header,hgroup,nav,section{
display:block;
}
img, video{
max-width:100%;
border:0;
}
body {
font-size: 1em;
margin: 0px;
padding: 0px;
text-align: center;
text-decoration: none;
width: 100%;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: rgb(255,255,255);
}
section#container_header_principal {
text-align: center;
height: 175px;
width: 100%;
background-image: url(../images/textura_gris_claro_png.png);
background-repeat: repeat-x;
position: fixed;
z-index: 5;
}
#header_principal {
width: 90%;
margin:0 auto;
max-width: 1024px;
height: 175px;
text-align: center;
}
#logo {
height: 165px;
width: 165px;
padding-top: 10px;
display:inline-block;
}
#menu_principal {
height: auto;
width: 80%;
margin-top: 2em;
display:inline-block;
}
#menu_principal ul{
font-size:0;
padding:0;
}
#menu_principal ul li{
background:rgba(0,0,0,.5);
display: inline-block;
font-size:1.2px;
height:40px;
line-height:40px;
vertical-align: top;
width:15%;
font-family: Arial, Helvetica, sans-serif;
color: rgb(230,231,232);
padding: 0px;
margin-right: 5px;
margin-left: 5px;
}
#menu_principal ul li:hover{
background:rgba(0,0,0,.6);
font-family: Arial, Helvetica, sans-serif;
}
#menu_principal ul li a{
display: block;
text-align:center;
color: rgb(219,220,221);
text-decoration:none;
}
#banner_principal {
text-align: center;
height: 100%;
width: 100%;
padding-top: 175px;
}
Muchas Gracias de antemano
