Conditional space

Need some help with some fancy formatting for a responsive design.

When a display is greater than 53em, I need the following li to insert a carriage return/blank line (i.e. head1) so that I get the effect of this item being bottom-aligned relative to other li’s that have a two work heading.


However, when the display is less than 53em, I want the carriage return/blank line to disappear so that things are on one line. ![|690x149](upload://f9SSQSWFDfDJbfQEE2Zvld3vIEs.png)

Here is my code…

                    <li>
                        <span class="head1">&nbsp</span>
                        <span class="head2">Mobile</span>
                        <span>Lorem imsum dolor sit amet, consectetur adipiscing elit.  </span>
                    </li>

I thought the nbsp would do the job, but it is adding in an annoying space when things are under 53em as shown in the second screenshot.

It would be easy to use PHP to dynamically set the HTML, but I am trying to write the HTML once, and then get my media queries and CSS to do what I want.

Thanks.

If the layout is using display: table then you could have the headers on one row and the text in another. The rows could have a class/id to set the alignment and styling as you like.

Just add padding-top to the li class and remove it later?

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

That’s how I would have done it :smile:

The only other way to do it without setting heights is to use the two table-row method which means divorcing the heading from the content.

I tried to do it with flexbox but couldn’t get the alignment right either.

Thanks, you’re too nice.

I was just going to post a correction of my sloppy omittings in @ronpat’s media ruleset. To be equivalent to the original code it should be:

@media screen and (max-width:53em){
    .outerwrap, .wrapper{ position:static; padding-top:0;}
    .outermost, nav, a, span{ display:block; width:auto; height:auto; text-align:left;}
    a+a{ border-top:0;}
}
1 Like

… and just in case this is what “things on one line” means:

Change the anchor and span rules in the media query to this:

@media screen and (max-width:53em) {
    .outerwrap, .wrapper {position:static; padding-top:0;}
    .outermost, nav, a {display:block; width:auto; height:auto; text-align:left;}
    a+a {border-top:0;}
    a {vertical-align:baseline;}
    span {
        display:inline-block;
        width:auto;
        height:auto;
        vertical-align:baseline;
        padding-right:.5em;
    }
}

Correct. (I loved Paul O’s solution, but I felt this current design would be a better place to start as far as being responsive.)

Thanks for the effort!

Could you help me understand what you are doing here better…

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;
}
  • If you have a{ display: table-cell}, then why must you redefine it here: span{ display: table-cell}?

  • I don’t understand what you are doing with width

  • I’m not seeing how you are forcing headings like “Responsive Design” to break between two words and be on two lines

  • Is height: 2.4em scalable/responsive?

  • You styling for the media query seems inconsistent. In this style…

    .outermost,
        nav,
        a,
        span{
            display: block;
            width: auto;
            height: auto;
            text-align: left;
        }
    a+a{
            border-top: 0;
        }
  • Why do you apply display:block to .outermost? And if you do that, why not also to .outerwrap and .wrapper?

  • Why do you apply width:auto and height:auto to nav, a, span? (Don’t they get that from their ancestor .outermost?

  • What is a+a{ border:top } doing?

Hi, Good questions. I appreciate your effort to analyze the code. Sorry for the late answer.

  1. I wanted the span to be a sole table-cell in a table of its own inside the anchor table-cell. The span actually becomes its own table by generating the missing table-objects. More info: http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes

  2. I wanted full width (note: 100% could be interpretated as content max-width). The 1% is an undefined length, requiring the table algorithm to calculate available width to apply to the cell. As its table element is an anonomous object I couldn’t give it a width, but this would make the cell have all available space given to it. (Note: 100% could be interpretated as content max-width.)
    Also see: http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#the-width-property and http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#width-layout

  3. It only wraps when the line is too short for the text.

  4. The height’s em unit scales with the font-size.

  5. It’s a habit to save code. Those selectors should all have those declarations and to give some what they already had made no difference to them.

  6. See 5.

  7. It’s the adjacent selector, all "a"s that comes after an adjacent “a” is selected. It removes the top border, because in block display only the first anchor should have a top border. In table display their table-cell borders was collapsed, but not as blocks.

1 Like

Some pretty advanced techniques there, @Erik_J!

What benefit does that serve? Seems like overkill.

Again, there seems like an easier way.

Short of using PHP to dynamically define my HTML, is there a way to define where headings break?

In my example it is easy… I want a carriage return between words (e.g. Web
Development) when I am using the “box” layout, and for the mobile layout I want it all on one line.

Am in a hurry again, but managed a quick flex version. Hopefully you can digest this example too. No testing crossbrowser of course. :smiley:

<!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:flex; /* for modern browsers */
    flex-flow:column; /* the main axis flow ttb ltr (wraps columns rightwards instead of lines downwards) */
    justify-content:flex-end; /* aligns main-axis the content (here to column bottom) */
    align-content:center; /* aligns cross-axis, here horizontally the line-boxes */
    padding:0 20% .2em; /* the word's inline-boxes will overflow visible */
    height:2.4em; /* two line-heights caters for max two words */
    text-align:center; /* centers the inline-boxes in the line-boxes, i.e. the words on their lines ;) */
    font-weight:bold;
}
@media screen and (max-width:53em){
  .outermost{ width:auto;}
  .outerwrap{ padding:0;}
  .wrapper{ position:static;}
  nav{ display:block; width:auto; height:auto;}
  a{ display:block; width:auto;}
  a+a{ border-top:0;}
  span{ display:inline; padding:0 1em 0 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>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.