3

Tengo que hacer un scrollbar con imagenes e información dentro, con las imagenes me funciona bien pero mi problema esta en cuando inserto información en mi h3, se rompe todo y no sé cómo incluirlo

Sin los h3 me queda perfecto, el problema es cuando quiero poner el h3 encima de cada imagen, muchas gracias por su ayuda!

div.scrollmenu {
    background-color: #ffffff;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}
 <div class="scrollmenu">
                <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3>
                <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
                <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3>
                <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
                <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3>
                <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
                <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3>
                <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
                <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3>
                <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
            </div>

1 respuesta 1

4

La pregunta tal y como la formulas es algo difícil de entender, pero me supongo que el resultado final deseado son bloques de título con imagen juntos horizontalmente y que se pueda hacer scroll horizontal. Ten en cuenta que <h3> es un block por defecto, por lo que sin cambiarle el width ocupará el 100%. Procedo a cambiar la propiedad del <h3> por display: inline. Contenidos en un <div> no pasaría nada, además sería recomendable cambiar a inline-block si se quiere darle una separación.

La solución es sencilla, para que puedan agruparse los elementos <h3> y <a> verticalmente, necesitas que lo contenga otro elemento así que vamos a crear un <div> alrededor que tenga la propiedad CSS display: inline-block. Esto se debe a que los divs por defecto son bloques que ocuparán el 100% de width y nosotros no deseamos eso.

div.scrollmenu {
    background-color: #ffffff;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

.scrollmenu h3 {
    display: inline;
}

.scrollmenu div {
    display: inline-block;
}
<div class="scrollmenu">
    <div>
        <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3><br>
        <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
    </div>
    <div>
        <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3><br>
        <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
    </div>
    <div>
        <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3><br>
        <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
    </div>
    <div>
        <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3><br>
        <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
    </div>
    <div>
        <h3 class="infoImgSugerencia">Fab/Art/Desc/Color</h3><br>
        <a href="#"><img src="img/zapato.jpg" border="1" width="200px" height="200px"></a>
    </div>
</div>

También te recomendaría, ya que en HTML5 no es recomendable usar los atributos width, border, etc. (que además se utilizan sin indicar px al final), que lo cambiases todo a CSS.

2
  • 2
    Muchas gracias amigo! era exactamente esooo
    – tato8vio
    Commented el 13 ago. 2019 a las 13:37
  • Podrías agregar que white-space: nowrap; es lo que evita que los div internos se bajen de linea y así obtener el scroll horizontal.
    – Marcos
    Commented el 13 ago. 2019 a las 13:55

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.