Alinear nav a una imagen

[falmar]

Hola, mi pregunta es la siguiente.

no puedo subir un unos botones que están dentro de un nav y que se quede al lado de una imagen logo, he intentado poner al nav display:inline-block, pero no sube al lado de la imagen logo.

En la imagen que subo lo entenderéis.



Este es el codigo html:

<header>

<div id="titulo"> Este es el título</div>
<div id="social">Social 1 Social 2</div>

<div id="logo"> Imagen logo</div>

<nav >
<ul>
<li>boton1</li>
<li>boton2</li>
<li>boton3</li>
<li>boton4</li>
<li>boton5</li>
</ul>
</nav>

<div id="imagen">Imagen</div>

</header>


Este el el codigo CSS:


header{
margin: 0 auto;
max-width: 90%;
}

nav {
display:inline-block;
}

nav li{
display:inline-block;
}

nav ul {
list-style:none;
}

#titulo {
display:inline-block;
}

#social {
display:inline-block;
}

#imagen {
display:inline-block;
}

Tiene pinta de ser fácil pero no doy con ello.

Gracias por vuestra respuesta.

[noruas]

No entiendo la distribucion que usas ni como estas usando las propiedades del css... Pero bueno, yo usaria algo similar a esto:

Código HTML:

<header>
    <div id="titulo"> Este es el título</div>
    <div id="social">Social 1 Social 2</div>
</header>
 
<nav>
    <div id="logo"></div>
    <ul>
        <li>boton1</li>
        <li>boton2</li>
        <li>boton3</li>
        <li>boton4</li>
        <li>boton5</li>
    </ul>
</nav>
 

Código CSS:

#logo {
    background-image: url(tu imagen);
    width: el ancho que sea;
    height: el alto que sea;
}
nav ul {
    float: left;
    margin-left: el ancho del div anterior;
}
nav ul li {
    las propiedades que sean necesarias.
}
 

No soy muy ducho en la nueva estructura del HTML5 pero juraria que el nav es un elemento independiente al header por regla general. Tampoco se como va el control de flujo en HTML5 por lo que no se donde seria más correcto usar la limpieza de flujo tras el float, quizas alguien mas entendiedo en esta nueva version pueda matizar mas sobre esto.

[falmar]

Gracias por tu respuesta, yo tampoco soy muy ducho en html5 pero he leido por ahí que si que se puede meter el nav dentro del header.

Esto es lo que he leido Nav

Normalmente el elemento nav aparece dentro de un elemento header. Esto da sentido a la afirmación de la especificación sobre el elemento header cuando dice eso de “grupo de ayudas de introducción o a la navegación“.

En tu código utilizas float y yo ya no quiero utilizarlo, eso es lo que aconsejan, mejor utilizar display:inline-block.

Gracias pero no soluciono el problema.

Un saludo

[Garot]

Si queres usar inline-block entonces agregale el siguiente estilo:

Código CSS:

#logo {
display:inline-block;
}
 

Actualmente el nav no sube porque #logo es un div y por lo tanto un elemento de Bloque entonces ocupa toda la linea.

[falmar]

Muchas gracias, funciona perfectamente.

Un saludo.