[SOLUCIONADO] Header y nav

[ilu7ionHD]

<header>Aca una imagen con el logo</header>
<nav> aquí contacto, principal, etc</nav>

como hago para que queden los 2 en una misma linea?, o sea, el logo y al lado las opciones como contacto, etc..

[Pantera80]

Buenas!!!

Puedes usar CSS, concretamente float

Código CSS:

header{
        float:left;
}
nav{
        float:right;
}
 

Al HTML te recomiendo que pongas después de esto un div con clear:both. De lo contrario, lo que esté después de <nav> también se desplazará a la derecha. Así quedaría todo:

Código HTML:

<header>Aca una imagen con el logo</header>
<nav> aquí contacto, principal, etc</nav>
<div class="limpiador"></div>
 

Código CSS:

header{
        float:left;
}
nav{
        float:right;
}
.limpiador{
        clear:both;
}
 

[ilu7ionHD]

Código HTML:

<header class="logo">
               
                <img src="logo.png" class="logoclass"/>
                
        </header>
        <!-- NAV-->
        <nav class="menu">
            <ul>
                <li><a href="index.html" class="button">Principal</a></li>
                <li><a href="nosotros.html" class="button">Sobre nosotros</a></li>
            </ul>
        <!-- LIMPIADOR-->
            <div class="limpiador"></div>
 

Código CSS:

header 
{
    float: left;
}
nav
{
    float: right;
}
 
.limpiador
{
    clear: both; /* Limpiar */
}
 

No funciona!, es lo mismo poner esto?

Código CSS:

.logo 
{
    float: left;
}
.menu
{
    float: right;
}
 

[Pantera80]

Código CSS:

.logo 
{
    float: left;
}
.menu
{
    float: right;
}
 

Sí es lo mismo.

Así salen en la misma línea la imagen y el menú. La imagen a la izquierda y el menú a la derecha.
¿No era eso lo que pedías?

[ilu7ionHD]

si, es lo que quiero pero no funciona.

Me queda el logo arriba y el nav abajo.

[Pantera80]

OK,

Para "bajar" la imagen, métele en el CSS un margin-top que deberás ajustar a tu gusto, este es de ejemplo:

Código CSS:

margin-top: 25px;
 

Si en cambio quieres "subir" el menú imagen, métele en el CSS un margin-top negativo que deberás ajustar a tu gusto, este es de ejemplo:

Código CSS:

margin-top: -13px;
 

[ilu7ionHD]

Me rindo, no anda jaja.

Código CSS:

body   
    {
        margin: 0px;
        padding: 0px;
        background: #eee;
        font-family: 'Varela', sans-serif;
        font-size: 12pt;
        font-weight: 500;
        color: #000;
    }
.logo
{
   position: relative;
   float: left;
}
.img_logo
{
    height: 17%;
    width: 17%;
}
 
 
 
.menu 
    {
        background: #333333;      
        position: relative; 
        padding: 2em 0em;
        width: 100%;
        height: 9%;
        float: right; 
        margin-top: -200px;
        
    }
 

[Pantera80]

Al menú quítale el width:100%, y el marging-top en vez de -200px pon -20px

[ilu7ionHD]

Jajajaja,

Ya casi.. ahora están alineados, pero quiero que toda la linea sea del color del menú. Sin embargo solo el 40% es aprox... del color del menú.
El resto es del color del body o sea gris

[Pantera80]

Bueno, primero tienes que encerrar todo lo de arriba en un div y ponerle un nombre de clase, por ejemplo así, llamando a la clase "cabecera":

Código HTML:

<div class="cabecera">
            <header class="logo">
                <img src="logo.png" class="logoclass"/>
            </header>
            <!-- NAV-->
            <nav class="menu">
                <ul>
                    <li><a href="index.html" class="button">Principal</a></li>
                    <li><a href="nosotros.html" class="button">Sobre nosotros</a></li>
                </ul>
                </nav>
            <!-- LIMPIADOR-->
                <div class="limpiador"></div>
    </div>
 

Luego tienes que ir al CSS y ponerle color y la altura que a tí te guste. Si es poca, no se verá:

Código CSS:

.cabecera{
        background-color: #333333;
          height: 125px;
             }
 

[ilu7ionHD]

Muchas gracias, funciono, aunque no entiendo nada del código jaja

[Rafael]

Hola. Llego un poco tarde pero hago unos comentarios.

¿Un div llamado Cabecera, para meter dentro el header?

No tiene mucho sentido, la lógica de estructura no creo que vaya por ahí.

1) Tienes un header. Dentro pueden ir otras cosas. El header es un elemento de bloque y de los principales.

2) Un nav también es un elemento de caja como todo. Está bien usar el float, peeeeero en lo personal yo trato de evitarlo totalmente. Trato de usar mejor inline-block. Con estas dos premisas queda:

Código HTML:

<header>
      <img src="Logo.png">
         <nav>
 
      </nav>
 </header>
 

Y el css

Código CSS:

header > img, header > nav {
   dislpay: inline-block; 
      vertical-align:top;}
 

Y ya el alineado será con vertical-align, o middle o bottom a escojer. Puedes jugar con márgenes también.

Prueba esto https://jsfiddle.net/ba5b68h3/1/:

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

[ilu7ionHD]

Muchas gracias, pero no entiendo porque usas ">" arriba después del header

O sea, header> nav{}
que significa?

[Rafael]

Aplica el estilo sólo a aquellos navs que estén diréctamente abajo de un header. En el caso del nav probablemente estoy exagerando ya que tal vez sólo tengas un nav en tooodo el documento.

Peeeero en el caso del header > img te previene de aplicarle los estilos digamos a las imágenes que tengas adentro de la barra del menú por ejemplo.

header > img: aplica sólo a los que estén directamente en el header, no a los que anden dentro de algún div, nav, li o nada.

Usar esta sintáxis hace que tu código html esté casi completamente limpio de class sobrantes y de hacks como el div limpiador.

[wultoons]

Aportando a lo que @Rafael comentó. El carácter mayor que (>) es un combinador de selectores.

Un combinador no es más que un carácter específico que une (o combina, por eso el nombre) dos o más selectores.

Según tengo entendido existen 4 tipos de combinadores:

1. Descendientes (su carácter es un espacio en blanco " ").
2. Hijos (su carácter es un mayor que ">", este es el que preguntaste).
3. Hermanos adyacentes ( su carácter es un símbolo de suma "+").
4. Hermanos en general ( su carácter es la tilde "~").

Posiblemente los selectores que más uses sean descendientes " " e hijos ">", por eso sería bueno diferenciarlos y saber su uso. Una breve explicación es que los hijos seleccionan al elemento que esta inmediatamente dentro del elemento padre, mientras que los descendientes seleccionan a cualquier elemento que esté dentro del elemento padre (sin importar si está inmediatamente dentro), por ejemplo:

Combinador hijo:

Código:

main>section>p

Aquí se seleccionará el elemento p, que reside dentro de un section, que a su vez está dentro de un main. Solo ese parrafo dentro de todos los que puedan haber en tu sitio web será seleccionado.

Combinador descendiente:

Código:

main p

Aquí se seleccionarán todos los elementos p que esten dentro del main, sin importar si estan dentro de otro elemento o no, todos los p en general serán seleccionados.

Una nota importante es que cuando trabajes con combinadores no dejes espacios, ya que como te expliqué, el espacio en blanco es un combinador.

Es muy bueno saber estos detalles, realmente ayudan a la hora de codificar, espero haber aportado un granito de arena.