Unordered List as boxes?

HTML & CSS
30

A brief follow-up.

After a little more experimenting, I changed .outermost {min-width:50em} to 52em,
and the max-width of the media query from 51em to 53em. Those values allow a little more leeway for platform differences.

I doubt that the enlarging square boxes are very appealing on wide screens. They sorta leave the text in the middle and looking small.

That behavior can be changed so the boxes remain at their designated size once the page exceeds a certain width. Just change the following two properties:

.outermost {
    min-width:52em;  /* DELETE Me */
    width:52em;   /* ADD Me */
}

@media screen and (max-width:53em) {
    .outermost {min-width:auto;}  /* DELETE Me */
    .outermost {width:auto;}   /* ADD Me */

The page is still responds to the media query nicely as the width of the device (desktop browser window) changes and the square boxes seem more practical to me. Whichever you prefer, you see how easy it is to code.

NEXT:

Let’s pretend that you decided that you only want 4 square boxes instead of 5. Making that change requires 3 fairly simple changes.

  1. Delete one box from the HTML (makes sense :slight_smile: )
  2. Change the padding-top value of .outerwrap from 20% to 25%:
 .outerwrap {
    padding-top:20%;  /* DELETE Me */
    padding-top:25%;  /* ADD Me */
  1. and finally experiment to determine new .outermost and media query widths.
    I came up with .outermost {width:42em}, and a media query max-width of 43em based on the contents of the square boxes.
.outermost {
    width:42em;

@media screen and (max-width:43em)  {

(Do you see that it is necessary to know the approximate contents of boxes to create reasonably accurate code? What we see here is quite different than your original “visual” suggested it might be.)

There are a number of posts by Paul that explain in detail how vertical padding and absolute positioning are used to create a fluid “viewing area” with a fixed aspect ratio usually for videos. The CSS is not trivial, but with enough reading and experimentation it is completely learnable.

That technique is being used here along with the CSS table property {table-layout:fixed} to create the square boxes.

Each box in a 5 box lineup is 1/5 or 20% of the total width. In a 4 box lineup each box is 1/4 or 25% of the total width. That percent width is where the .outerwrap padding-top value comes from which is used to set the height of the boxes.

BACK to your OP:

You were considering divs or list items and wondering which tags would be the most semantically appropriate. At this stage, I would recommend replacing the <ul> tag with a <nav> tag and the <li> tags with <a> anchor tags because the object with 5 boxes seems like a navigation menu. An advantage of replacing the <li> tags with <a> tags is that the entire box (a CSS table-cell) becomes clickable. Try it. See what YOU think:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>5 fixed boxes nav</title>
<!--

-->
    <style type="text/css">

.outermost {
    width:52em;
    margin:0 auto;
}
.outerwrap {
    position:relative;
    padding-top:20%;
}
.wrapper {
    background-color:#bdf;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
nav {
    display:table;
    table-layout:fixed;
    border-collapse:collapse;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
a {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    font-family:Arial,sans-serif;
    font-weight:bold;
    border:1px solid #854;
    text-decoration:none;
}
span {
    display:block;
    font-size:.9em;
    font-weight:normal;
}
@media screen and (max-width:53em) {
    .outermost {width:auto;}
    .outerwrap {padding-top:0;}
    .wrapper {position:static;}
    nav {display:block;}
    a {
        display:block;
        text-align:left;
        padding:.5em;
    }
    a + a {border-top:0;}
}
    </style>
</head>
<body>

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

</body>
</html>
1 Like