[SOLUCIONADO] Problema con display: inline-block no coloca el menú al lado del logo

orianay · #1 (**permalink**) 01/05/2013, 21:00

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

Triby · #2 (**permalink**) 01/05/2013, 23:11

Bueno, h1 es un elemento de bloque y es al que deberías aplicarle el inline-block, no al logo.

orianay · #3 (**permalink**) 02/05/2013, 21:28

Muchas Gracias!! Con eso queda solucionado!!!