1

Tengo una consulta con HTML y CSS. Quiero centrar mi menu y logo en css y ponerlo en position fixed pero css no me toma las clases correctamente. Quiero saber si capaz yo estoy poniendo algo de forma incorrecta. Desde ya muchas gracias! Este sería el codigo de html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Alex Saberi</title>
    <meta name="keywords" content="Photographs, photography, fotografia, 
    camara reflex">
    <meta name="author" content="Alex">
    <meta name="copyright" content="Alex">
    <meta name="robots" content="index">
    <link rel="icon" href="camara.icon">
    <link rel="stylesheet" type="text/css" href="probemos.css">
    <link rel="stylesheet" type="text/css" href="normalize.css">

</head>

<body>
      <header>
        <div class="logo">
          <img id="imagenlogo" alt="Logo profesional" 
           src="https://www.alexsaberi.com/wp- 
           content/uploads/2020/04/logo5.png">
         </div>
      <div class="barras">
    
          <nav class="nav">
            <ul class="barra-ul">
                <li class="bio"><a class="link" href="parte2.html" 
                target="_blank">Contact</a></li>
                <li class="bio"><a class="link" href="parte3.html" 
                 target="_blank">Photographs</a></li>
                <li class="bio"><a class="link" href="parte4.html" 
                 target="_blank">Works</a></li>
                <li class="bio"><a class="link" href="parte5.html" 
                 target="_blank">Bio</a></li>
            </ul>
          </nav>
         </div>

y este en CSS:

 #imagenlogo .barra-ul{
    height: 150px;
    background: #262626;
    width: 100px;
    z-index: 12;
    position: fixed;
    font-family: georgia;
    }
6
  • 1
    Y esta clase .barra-ul donde está?
    – user128299
    Commented el 13 ene. 2021 a las 0:51
  • Me equivoque y no la puse en la publicación, ya la agregue sería <ul class="barra-ul"> Commented el 13 ene. 2021 a las 0:55
  • ¿Y no estará algún estilo de terceros sobrescribiendo los tuyos? Añade tu <head> para descartar esta opción.
    – Rodrigo
    Commented el 13 ene. 2021 a las 0:57
  • Es que no tiene sentido que si quieres a 2 elementos que son la imagen y el menú en posición fixed, entonces le des ese posicionamiento a la etiqueta img, sobre todo por que ese selector no parece estar correcto, me parece que será mas simple con aplicar esos estilos pero a la etiqueta header
    – user128299
    Commented el 13 ene. 2021 a las 1:00
  • 1
    Finalmente, he encontrado una posible razón, ese imagenlogo no tiene ningún ul ¿Has querido decir #imagenlogo, .barra-ul?
    – Rodrigo
    Commented el 13 ene. 2021 a las 1:01

3 respuestas 3

1

Como te menciono en los comentarios, el selector que estas usando no es correcto, puedes leer mas al respecto aqui sobre selectores descendientes; pues la imagen no tiene como descendiente a .barra-ul.

Entonces igualmente como te mencionaba si lo que deseas es que tanto el logo como el menú tengan un posicionamiento fixed, entonces sería mas simple darle esa instrucción a la etiqueta padre de ambos que sería el header.

Quedando así:

header{
    height: 150px;
    background: #262626;
    width: 100px;
    z-index: 12;
    position: fixed;
    font-family: georgia;
    }

Comentarios finales

  • Igual el logo puede quedar como elemento directo del menú, ya con flexbox puedes desplazar los items y que tenga la presentación deseada
  • La etiqueta nav es un elemento en bloque, entonces se me hace un tanto innecesario que exista dentro de un div
  • Te recomiendo apliques alguna metodología a tu CSS, puedes investigar sobre BEM eso puede beneficiar incluso que mas fácilmente des semántica a tus clases
0

Tu selector css es #imagenLogo .barra-ul y eso haria referencia a un elemento HTML que contenga la clase class="barra-ul" y que a su vez se encuentre dentro de otro elemento que contenga el id id="imagenLogo". Cosa que no existe en tu codigo, porque ese elemento no se encuentra dentro del otro.

Una posible solucion seria cambiar el selector #imagenLogo .barra-ul por #imagenLogo, .barra-ul (la diferencia esta en poner una coma).

U otra posible solucion seria envolver todo los elementos lo que necesitas en position: fixed dentro de un div y en el css seleccionar este elemento y aplicarle la propiedad position: fixed.

0

amigo tu imagenlogo lo tienes con un .(id) no con una #(class).

<img id="imagenlogo" alt="Logo profesional"

como lo tienes con (id) lo llamas como este :

.imagenlogo{

}

2
  • 1
    El selector # es para los id, y . para las clases. Lo que mencionas en tu respuesta está al revés.
    – padaleiana
    Commented el 12 jul. a las 11:17
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 15 jul. a las 14:06

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.