Attach elements to the footer of the div

Asked

Viewed 3,463 times

1

I made some boxes using lists < ul> and < li> and would like to put a title and a "subtitle" in the footnote, which is the best way to do this?

It’s like this:

inserir a descrição da imagem aqui

Ending:

inserir a descrição da imagem aqui

The HTML code looks like this.

<div class="primario">
    <img src="..." title="..." />
    <div class="titulo">
        <h1>Titulo</h1>
        Info
    </div>
</div>
<div class="secundario">
    <ul>
        <li>
            <img src="..." title="..." />
            <div class="titulo">
                <h1>Titulo</h1>
                Info
            </div>
        </li>
        <li>
            <img src="..." title="..." />
            <div class="titulo">
                <h1>Titulo</h1>
                Info
            </div>
        </li>
        <li>
            <img src="..." title="..." />
            <div class="titulo">
                <h1>Titulo</h1>
                Info
            </div>
        </li>
        <li>
            <img src="..." title="..." />
            <div class="titulo">
                <h1>Titulo</h1>
                Info
            </div>
        </li>
    </ul>
</div>
css

2 answers

3

I created a small structure for you to understand how it works.

HTML

<ul>
    <li>
        <div class="footer">
            <h2>Titulo</h2>
            <span>Info</span>
        </div>
    </li>
    <li>
        <div class="footer">
            <h2>Titulo</h2>
            <span>Info</span>
        </div>
    </li>
    <li>
        <div class="footer">
            <h2>Titulo</h2>
            <span>Info</span>
        </div>
    </li>
</ul>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ul {
    margin: 10px;
    padding:0;
    list-style:none;
}

ul li {
    width:220px;
    height:220px;
    background:#999;
    position:relative;
    float:left;
    margin:10px;
}

ul li div.footer {
    width:100%;
    padding:8px 20px;
    position:absolute;
    bottom:0;
    background:rgba(0,0,0,0.8);
}

ul li div.footer h2 {
    font-size:18px;
    color:#336699;
    margin:0;
    padding:0;
}

ul li div.footer span {
    display:block;
    color:#e1e1e1;
}

First I define in li to position:relative so that I can later define the div.footer to position:absolute and bottom:0 this will cause the election to be limited to li and so we arrive at the desired result.

JSFIDDLE DEMO

0

Quietly you can do it there with a div and a basic CSS. But if you want to produce more and with a nice and responsive design. I suggest you take a look at bootstrap 3.I’ve been working a lot with it.There are plenty of components ready and to use them just add the scripts to html.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

And here are some of its components http://getbootstrap.com/components/

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.