1

estoy creando mi primera página web (muy simple porque estoy aprendiendo) y tengo que realizar un menú con una imagen de fondo.

En mi archivo .css tengo este código:

    header {
    background-image: url(img/fondo_menu2.gif);   
    font-family: 'Arial';
    font-size: 1em;
}

Viendo mi página web me devuelve esta imagen: introducir la descripción de la imagen aquí

Aquí viene mi problema

Cuando sigo metiendo código a mi .css desaparece la imagen, os lo muestro.

 header {
    background-image: url(img/fondo_menu2.gif);   
    font-family: 'Arial';
    font-size: 1em;
}

nav {
    float: left;
}

nav ul {
    list-style: none;
    overflow: hidden;
}

nav ul li {
    float: left;
    font-family: Arial;
    font-size: 1em;
}

nav ul li a {
    font-weight: bold;
    display: block;
    padding: 10px;
    text-decoration: none;
}

El resultado que me da es el siguiente: introducir la descripción de la imagen aquí

Por una parte, se me colocan las páginas, pero por otra, pierdo mi imagen de fondo.

No consigo resolver este pequeño problema.

El código HTML con el que estoy trabajando es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina web</title>
    <link rel="stylesheet" href="menu.css">
</head>
<body>
    <header>
        <div>
            <nav>
                <ul>
                    <li> <a href="#">Inicio</a></li>
                    <li> <a href="#">Tablas</a></li>
                    <li> <a href="#">Formularios</a></li>
                    <li> <a href="#">Página Personal</a></li>
                </ul>
            </nav>

        </div>
       
    </header>
</body>
</html>

2 respuestas 2

1

Cuando tienes un elemento con float, su parent no tiene forma de saber la altura de este, por lo que "colapsa" teniendo una altura 0. En otras palabras, lo que esta pasando aqui, es que, al no poner altura a tu <header> este depende de la altura de sus sub-elementos, los cuales a su vez tienen sus propios sub-elementos, hasta llegar al <li>, el cual sin la propiedad float tiene la altura predeterminada del texto

lo que podrias hacer es ponerle un heigth predeterminado al header o cualquiera de sus sub-elementos, o quitar el float y hacer un display: flex a el <ul>, mas o menos asi

header {
      background-image: url(img/fondo_menu2.gif);   
      font-family: 'Arial';
      font-size: 1em;
  }
  
  nav ul {
      display: flex;
      list-style: none;
  }
  
  nav ul li {
      font-family: Arial;
      font-size: 1em;
  }
  
  nav ul li a {
      font-weight: bold;
      display: block;
      padding: 10px;
      text-decoration: none;
  }  
1
  • Gracias por tu comentario, me ha servido para recordar cosas y arreglar otro tipo de problemas.
    – pabl1ku
    el 20 nov. 2022 a las 23:30
1

Si le quitas el float:left; en esta línea te aparecerá el fondo:

     nav {
       /*    float: left;  */
     }

Ejemplo:

 header {
   font-family: 'Arial';
   font-size: 1em;
   background-image: url(https://media.istockphoto.com/id/656453072/es/foto/fondo-de-grunge-retro-vintage-dise%C3%B1o-y-patr%C3%B3n-de-la-textura.jpg?s=612x612&w=0&k=20&c=HcDsoas5pAJPbXM7zwZkhhk7ZwtCzpgyvex0pncz6nw=);
 }


 nav {
   /*    float: left;  */
 }

 nav ul {
   list-style: none;
   overflow: hidden;
 }

 nav ul li {
   float: left;
   font-family: Arial;
   font-size: 1em;
 }

 nav ul li a {
   font-weight: bold;
   display: block;
   padding: 10px;
   text-decoration: none;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina web</title>
    <link rel="stylesheet" href="menu.css">
</head>
<body>
    <header>
        <div>
            <nav>
                <ul>
                    <li> <a href="#">Inicio</a></li>
                    <li> <a href="#">Tablas</a></li>
                    <li> <a href="#">Formularios</a></li>
                    <li> <a href="#">Página Personal</a></li>
                </ul>
            </nav>

        </div>
       
    </header>
</body>
</html>

1
  • Gracias, me ha servido de mucho
    – pabl1ku
    el 20 nov. 2022 a las 23:29

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.