Attach elements to fo footer

Question

Attach elements to fo footer

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

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

You're like this:

Final:

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

asked by anonymous 05.11.2014 / 22:45

2 answers

Instantiate a standard global function to call functions Get values with jQuery

score 3 · Answer 1

I've created a small framework 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 of all I set the li to position:relative so that I can then set div.footer to position:absolute and bottom:0 this will make the element limited to li and thus we get the desired result.

DEMO JSFIDDLE

score 0 · Answer 2

Quietly you can do it there with a div and a basic CSS. But if you are wanting to produce more and with a cool and responsive design. I suggest you take a look at the bootstrap 3.Ando working a lot with it. It has enough component ready and to use them just add the scripts in 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>

Andherearesomeofitscomponents link