0

Estoy haciendo una pagina web para mi proyecto de Final de Curso y estoy haciendo que mi logo se centre a la izquierda con el nav , he estado intentandolo pero no llega a salir correctamente , Os paso el codigo para que me echeis un cable con esto que llevo unos dias que me esta costando un poco ya que no domino al 100% HTMl

Muchas Gracias.

 <nav class="menu">
      <ul>
      <img src="img/fhes.png" width="10%">  
      <li><a href="#section1">Inici</a></li>
    <li><a href="#section2">Qui som?</a></li>
    <li><a href="#section3">Historia</a></li>
    <div class="dropdown">
    <button class="dropbtn">Serveis 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="ginecologia.html">Ginecologia</a>
      <a href="#">Consultes Externes</a>
      <a href="#">Traumatologia</a>
      <a href="#">Cirugia</a>
      <a href="#">Medicina Interna</a>
      <a href="#">Urgencies</a>
      <a href="#">Quiròfan</a>
    </div>
  </div> 
    <li><a href="#section5">Consultes</a></li>
    <li><a href="#section6">Contacte</a></li>
      </ul>
    </nav>

  </header>  

CSS
body{
    margin: 0;
}
header{
    width: 100%;
    background: #4E94AB;

}
#btn-menu{
    display: none;
}

header label{
    display: block;
    width: 30px;
    height: 30px;
    padding: 10px;
    border-right: 1px solid #fff;
}
header label:hover{
    cursor: pointer;
    background: rgba(0,0,0,0.3);
}


1 respuesta 1

1

Para no dominar al 100% intentas atacar un problema complejo ;)

Bloque horizontal en la parte superior de la página

Por la disposición de tu HTML supongo que quieres un menú horizontal en la parte superior de la página. A la izquierda del menú quieres mostrar el logo.

Para ello necesitas dividir el espacio horizontal en dos partes, una para el logo y otra para el menú. Lo mejor es hacerlo mediante flexbox puesto que así podrás controlar el espacio que ocupan y cómo se comporta en pantallas pequeñas:

#HTML

<header>
   <div class='logo'>
       <img src="img/fhes.png" alt="logo">
   </div>

   <nav>
     El menú
   </nav>
</header>
#CSS

header {
    display: flex;
    justify-content: space-between;
}

Con eso lo que logras es que el espacio de la cabecera se divida en dos partes, una para el logo y otra para el menú.

Además, justify-content: space-between; hace que el logo se vaya contra el margen izquierdo y el menú contra el margen derecho. Esto puedes cambiarlo si quieres otra distribución.

El menú en sí

El menú que te propones hacer es complejo ya que no son dos o tres opciones en línea sino que hay un sub-menú.

Nuevamente, para distribuir las opciones del menú en el espacio disponible te recomiendo que para la lista (elemento <ul>) utilices flexbox.

Sin submenú, quedaría así:

body{
    margin: 0;
}

header{
    width: 100%;
    background: #4E94AB;
    display: flex;
    justify-content: space-between;
}

.logo {
  width: 160px;
}

.logo img {
  width: 100%;
  padding: 10px;
  object-position: center;
  object-fit: cover;
}

.menu ul {
  display:flex;
  flex-wrap:wrap;
}
<header>
  <div class="logo">
    <img src="https://robohash.org/random" width="10%">
  </div>
  
  <nav class="menu">
    <ul>  
      <li><a href="#section1">Inici</a></li>
      <li><a href="#section2">Qui som?</a></li>
      <li><a href="#section3">Història</a></li>
      <li>Serveis</li>
      <li><a href="#section5">Consultes</a></li>
      <li><a href="#section6">Contacte</a></li>
    </ul>
  </nav>
</header>

El sub menú

El tema del submenú es más delicado. Si quieres solucionarlo exclusivamente con HTML y CSS (sin utilizar JavaScript), entonces debes utilizar un elemento que te permita un cambio de estado compatible con todos los dispositivos (esto es, :hover no te va a servir porque en teléfonos móviles y tablets no funciona).

Es habitual utilizar en estos casos un checkbox y controlar según su estado lo que ocurre con el elemento que contiene las opciones del submenú:

body{
    margin: 0;
}

header{
    width: 100%;
    background: #4E94AB;
    display: flex;
    justify-content: space-between;
}

.logo {
  width: 100px; /* el espacio aquí es limitado */
}

.logo img {
  width: 100%;
  padding: 10px;
  object-position: center;
  object-fit: cover;
}

.menu {
  display:flex;
  flex-wrap:wrap;
}

.menu a {
  display: block;
}

input[id="dropdown"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="dropdown"] {
  cursor: pointer;
}

.dropdown-content {
  display: flex;
  flex-direction: column;
}

input[id="dropdown"] ~ .dropdown-content {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}

input[id="dropdown"]:checked ~ .dropdown-content {
  height: 100%;
  width: auto;
  opacity: 1;
}
<header>
  <div class="logo">
    <img src="https://robohash.org/random" width="10%">
  </div>
  
  <nav class="menu">
      <a href="#section1">Inici</a>
      <a href="#section2">Qui som?</a>
      <a href="#section3">Història</a>
      <input type="checkbox" name="serveis" id="dropdown">
      <label for="dropdown">Serveis</label>
      <div class="dropdown-content">
          <a href="ginecologia.html">Ginecologia</a>
          <a href="#">Consultes Externes</a>
          <a href="#">Traumatologia</a>
          <a href="#">Cirugia</a>
          <a href="#">Medicina Interna</a>
          <a href="#">Urgencies</a>
          <a href="#">Quiròfan</a>
      </div>
      <a href="#section5">Consultes</a>
      <a href="#section6">Contacte</a>
  </nav>
</header>

Queda pendiente modificar los colores, márgenes interiores (padding) y exteriores de los elementos, etc., pero espero que te sea útil.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.