How can I make a menu on an image?

Navigation
2

I hope and you can help me with a question I have since I do not know much about css yet. Well, how can I make a menu on an image with css example I have the following html and css code: 

<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%;
}

But it does not work out the way I want, I leave a picture of how I think it should be

    
asked by Marcos Villavicencio 06.07.2018 в 00:45
source

2 answers

2

The trick is to use pixels and define the desired margins and fillings (in addition to removing the list style) to the element UL . in this example the left and bottom I put in pixels, you can use them in% but usually you have more control when using pixels (retina devices or with different pixel ratio make the account of where the subject should fall) . 

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

.text-menu {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    font: bold 40px/40px Helvetica, Sans-Serif;
    letter-spacing: 2px;
    padding: 0;
    margin:0;
    list-style: none;
}
.text-menu LI {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
<div class="image-menu">
    <img src="https://picsum.photos/600/480/?random" alt="test">
    <ul class="text-menu">
        <li>TITULO 1</li>
        <li>TITULO 2</li>
        <li>TITULO 3</li>
        <li>TITULO 4</li>
    </ul>
</div>
    
answered by 06.07.2018 / 01:01
source
0

To avoid the problems that you can use absolute, you can put the image as the background of the div, here is an example of how to do it, you can get the effect you want with a responsive design. 

    .image-menu {
        position: relative;
        width: 100%; /* for IE 6 */
        background-image: url(https://picsum.photos/600/480/?random);
        background-size: cover;
    }

    .text-menu {
        list-style:none;
        position: relative;
        bottom: 10%;
        left: 0;
        color: white;
        font: bold 40px/40px Helvetica, Sans-Serif;
        letter-spacing: 2px;
        padding: 0 0 10% 10%;
    }
    <div class="image-menu">
        <ul class="text-menu">
            <li>TITULO 1</li>
            <li>TITULO 2</li>
            <li>TITULO 3</li>
            <li>TITULO 4</li>
        </ul>
    </div>
    
answered by 06.07.2018 в 01:25
Can parameters be passed to a function its own return value? PHP - Delete values of a variable $ _POST with str_replace