Conditional space

HTML & CSS
4

Hi mikey_w, I guess it is the 5 nav squares from your other thread with, and that it is the example Ronpat gave that you’re working with.

Just trying to show that it can be done. Not thoroughly tested. :smiley:
I have edit the code from Ronpat’s post #30 in Unordered List as boxes? to add the visual effect I think you are trying to achive now. Tried to make it without changing too much of what you already have. Hopefully somebody else can step in with different examples.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <title>5 Fixed Boxes Nav</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
.outermost{
    margin:0 auto;
    width:52em;
}
.outerwrap{
    position:relative;
    padding-top:20%;
}
.wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
nav{
    display:table;
    table-layout:fixed;
    border-collapse:collapse;
    width:100%;
    height:100%;
    background-color:#bdf;
}
a{
    display:table-cell;
    border:1px solid #854;
    padding:.5em;
    color:inherit;
    vertical-align:top;
    text-align:justify;
    font:.9em/1.2 arial,sans-serif;
    text-decoration:none;
}
a:hover span{
    color:blue;
    text-decoration:underline;
}
span{
    display:table-cell;
    width:1%; /* use available space */
    height:2.4em;
    vertical-align:bottom;
    text-align:center;
    font-weight:bold;
    font-size:1.2em;
}
@media screen and (max-width:53em){
    nav, a, span{ display:block; width:auto; height:auto; text-align:left}
    a+a{ border-top:0}
}
</style>
</head><body>

<div class="outermost">
    <div class="outerwrap">
        <div class="wrapper">
            <nav>
                <a href="#go1"><span>Responsive Design</span>Lorem imsum. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</a>
                <a href="#go2"><span>Mobile</span>Lorem imsum dolor sit amet, maximus mollis erat.</a>
                <a href="#go3"><span>SEO</span>Lorem imsum dolor sit amet, consectetur elit    dipiscing. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</a>
                <a href="#go4"><span>Programming</span>Lorem imsum. Donec lictus nulla, scelerisque    id augue in, maximus mollis erat.</a>
                <a href="#go5"><span>Business Development</span>Lorem imsum. Donec lictus nulla,    celerisque id augue in, maximus mollis erat.</a>
            </nav>
        </div>
    </div>
</div>

</body></html>
4 Likes