Foros del Web » Creando para Internet » CSS »

logo-h1 en medio del menu de navegación

Estas en el tema de logo-h1 en medio del menu de navegación en el foro de CSS en Foros del Web. Hola a todos. No consigo colocar en el medio el logo en este menú de navegación: http://codepen.io/elcollage_com/pen/YyBjyG Código HTML: <section> <header> <nav> <ul> <li> CLASES ...
  #1 (permalink)  
Antiguo 17/11/2015, 06:16
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 2 meses
Puntos: 5
logo-h1 en medio del menu de navegación

Hola a todos. No consigo colocar en el medio el logo en este menú de navegación:

http://codepen.io/elcollage_com/pen/YyBjyG

Código HTML:
<section>
 <header>
  <nav>
   <ul>
      <li>CLASES de ACORDEÓN</li>
      <li>PROFESORADO</li>
      <li>ACORDEONES</li>
      <li>CONTACTO</li>
   </ul>
  </nav>
  <div class="logoh1"></div>
 </header>
</section> 
Código:
.logoh1 {
  text-indent:-99999px;
  width: 338px;
  height: 340px;
  background:   url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
  display: block;
  position: absolute;
  top: 18%;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  opacity: .1;
}


body {
background: #fff;
font-family: arial;
}


header {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

nav li:nth-child(2) {
padding-right: 100px;
}

nav li:nth-child(3) {
padding-left: 120px;
}
Alguien puede echarme una mano?
  #2 (permalink)  
Antiguo 17/11/2015, 06:51
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 2 meses
Puntos: 5
Respuesta: logo-h1 en medio del menu de navegación

Ya he dado con la respuesta.

No recordaba que el header tenia un ancho definido tan pequeño para el tamaño del logo. Le he aumentado a 1070px y luego la clase right le he flotado a la izquierda añadiéndole un padding-left y voila!!!

aqui os dejo el código y el codepene:

http://codepen.io/elcollage_com/pen/rOPPbo

Código HTML:
<section>
 <header>
  <nav>
   <ul class="left">
      <li>CLASES de ACORDEÓN</li>
      <li>PROFESORADO</li>
   </ul>
    
   <ul class="right">
      <li>ACORDEONES</li>
      <li>CONTACTO</li>
   </ul>
  </nav>
  <div class="logoh1"></div>
 </header>
</section> 
Código:
.logoh1 {
  text-indent:-99999px;
  width: 338px;
  height: 340px;
  background:   url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
  display: block;
  position: absolute;
  top: 18%;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  opacity: .1;
}


body {
background: #fff;
font-family: arial;
}


header {
width: 1170px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

.left {
  float: left;
  text-align: left;
}

.right {
  float: left;
  padding-left: 380px;
}
gracias de todos modos y espero que a alguien le pueda valer

Etiquetas: background, medio, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:36.