Como puedo hacer un menu sobre una imagen?

publicado por: Anonymous

Espero y me puedan ayudar con una duda que tengo ya que desconozco mucho sobre css todavía.
Bueno, como puedo hacer un menu sobre una imagen con css ejemplo tengo el siguiente código html y css:

<div class="image-menu">
    <img src="images/img-bg.jpg" alt="test">
    <ul class="text-menu">
        <li>TITULO 1</li>
        <li>TITULO 2</li>
        <li>TITULO 3</li>
        <li>TITULO 4</li>
    </ul>
</div>

.image-menu{
    position: relative;
    width: 100%; /* for IE 6 */
}

.text-menu {
    position: absolute;
    bottom: 10%;
    left: 0;
    color: white;
    font: bold 40px/40px Helvetica, Sans-Serif;
    letter-spacing: 2px;
    padding: 0 0 10% 10%;
}

Pero no me sale como quiero, dejo una imagen de como pienso que debería quedar

introducir la descripción de la imagen aquí

solución

El truco está en usar pixels y definir los margenes y rellenos deseados (además de sacarle el estilo lista) al elemento UL. en este ejemplo el left y bottom los puse en pixels, los podes usar en % pero por lo general tenes mas control al usar pixels ( los dispositivos retina o con diferentes pixel ratio hacen la cuenta de donde debería caer el asunto).

_x000D_

_x000D_

.image-menu{_x000D_
    position: relative;_x000D_
    width: 100%; /* for IE 6 */_x000D_
    overflow:auto;_x000D_
}_x000D_
_x000D_
.text-menu {_x000D_
    position: absolute;_x000D_
    bottom: 30px;_x000D_
    left: 30px;_x000D_
    color: white;_x000D_
    font: bold 40px/40px Helvetica, Sans-Serif;_x000D_
    letter-spacing: 2px;_x000D_
    padding: 0;_x000D_
    margin:0;_x000D_
    list-style: none;_x000D_
}_x000D_
.text-menu LI {_x000D_
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);_x000D_
}

_x000D_

<div class="image-menu">_x000D_
    <img src="https://picsum.photos/600/480/?random" alt="test">_x000D_
    <ul class="text-menu">_x000D_
        <li>TITULO 1</li>_x000D_
        <li>TITULO 2</li>_x000D_
        <li>TITULO 3</li>_x000D_
        <li>TITULO 4</li>_x000D_
    </ul>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *