0

que tal, quiero poner una imagen (avatar del perfil) dentro de una barra de navegación, pero cuando lo hago, la barra navegación se ajusta al tamaño de la imagen. De momento lo que he hecho es solo posicionarla para que coincida con la barra, lo cual funciona solo con cierto ancho del monitor, obvio con uno mas grande o pequeño se desajusta.

Lo que no se es como hacer que el tamaño de la barra NO cambie al poner la imagen dentro de la barra.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="fondos.css" >
    </head>
    <body>
        <figure>
            <img id="avatar" src="imagenes/avatar.png" title="avatar">
        </figure>
        <nav id="menu">
            <ul>
                <li><a>PRINCIPAL</a></li>
                <li><a>FOTOS</a></li>
                <li><a>VIDEOS</a></li>
                <li><a>CONTACTO</a></li>
                <li><a>ACORTADOR</a></li>
            </ul>
        </nav>
    </body>
</html>
nav {
    padding:10px;
    border-top:3px solid #9b111e;
    border-bottom:3px solid #9b111e;
}

ul {
    color:white;
    text-align:center;
}

li.peque {
    display:inline-block;
    list-style:none;
    padding-left:15px;
}

a.peque {
    color:white;
    text-decoration:none  !important;
}

li a:hover {
  color:black;
}

#avatar {
    position:relative;
    left:18%;
    /*left: 280px;*/
    top:90px;
    width:120px;
    height:120px;
    border-radius:50%;
}

Se agradece cualquier ayuda de antemano.

2
  • ¿El tamaño de la imagen debe ser el mismo o inferior que el de la barra de navegación o debe ser mayor y salirse de ella?
    – JorgeGuz
    el 22 mar. 2020 a las 6:24
  • El tamaño de la imagen debe ser mayor y salir de ella. el 22 mar. 2020 a las 6:36

1 respuesta 1

0

Si lo que necesitas es que la imagen salga del contenedor y se posicione por encima del mismo lo puedes hacer con un "position:absolute" para que salga de ese espacio incluyendo el "figure" dentro de la barra para poder controlar su nueva posición mejor y un "z-index" positivo y más alto que el del "nav" para que quede por encima. He hecho una sencillas modificaciones en tu código para que veas como puede quedar:

nav {
    padding:10px;
    border-top:3px solid #9b111e;
    border-bottom:3px solid #9b111e;
    background:blue;
    margin-bottom: 50px;
}

figure {display:inline;}

ul {
    color:white;
    text-align:center;
    display:inline-block;
    position: relative;
    left: 100px;
    padding-left: 0;
}
li {display:inline-block;}
li.peque {
    display:inline-block;
    list-style:none;
    padding-left:15px;
}

a.peque {
    color:white;
    text-decoration:none  !important;
}

li a:hover {
  color:black;
}

#avatar {
    position:absolute;
    left:40px;
    /*left: 280px;*/
    top:25px;
    width:120px;
    height:120px;
    border-radius:50%;
    z-index:99999;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="fondos.css" >
    </head>
    <body>
        
        <nav id="menu">
        <figure>
            <!--<img id="avatar" src="imagenes/avatar.png" title="avatar">-->
            <img id="avatar" src="http://www.placehold.it/120x120" title="avatar">
        </figure>
            <ul>
                <li><a>PRINCIPAL</a></li>
                <li><a>FOTOS</a></li>
                <li><a>VIDEOS</a></li>
                <li><a>CONTACTO</a></li>
                <li><a>ACORTADOR</a></li>
            </ul>
        </nav>
    </body>
</html>

Comparto además un enlace documentación de interés que puede resultar de ayuda sobre el uso y comportamiento de la propiedad "position": Propiedad Position - w3schools

2
  • 1
    Me ayudo bastante, gracias. el 22 mar. 2020 a las 19:14
  • Sí la respuesta te ha servido de ayuda puntuala y/o márcala como correcta para que sí alguien más tiene el mismo problema o duda con su proyecto sepa que está respuesta es de ayuda. Gracias. Un saludo
    – JorgeGuz
    el 22 mar. 2020 a las 20:39

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.