cross-posted from: https://lemmy.world/post/2566953

Hi, I’m an old webdev who is rusty in CSS; I learn about calc() recently and never really learnt display: flex properly.

I made some webs with a responsive menu layout (relevant CSS code posted on bottom). I tried using flex but I still had to do one ugly hack: I have the menu heights for the different resolutions hardcoded and I have to update them manually every time a new chapter is added. It’s not a big deal, but I would like to know if there is a proper way to do this.

Some alternatives I’ve thought about:

  • The new round(), but it’s too new and not supported by most browsers.
  • JavaScript

… but I feel like there must be a clean CSS-only way to achieve this.

Thanks!

Relevant CSS code (link to full stylesheet in case I missed something).

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 624px; /* =27x23+3 | 23 = 91/4 */
  margin: 0;
  padding: 16px 16px 4px 16px;
  vertical-align: top;
}
@media screen and (max-width: 1000px) {
  ul {
    height: 840px; /* =27x31+3 | 31 = 91/3 */
  }
}
@media screen and (max-width: 582px) {
  ul {
    height: 1245px; /* =27x46+3 | 46 = 91/2 */
  }
}
@media screen and (max-width: 400px) {
  ul {
    height: auto;
  }
}
  ul li {
    list-style-type: none;
    margin: 2px 16px 2px 4px;
    font-size: 120%;
  }
  ul li a {
    display: inline-block;
    background-color: #3fa79e;
    color: #d2e7e2;
    text-decoration: none;
    padding: 2px 8px;
    border: solid 1px #d2e7e2;
  }
    ul li a:first-child {
      width: 106px;
      margin-right: -3px;
    }
    ul li a:hover {
      background-color: #144c48;
      color: #fff;
      border: solid 1px #fff;
    }
  • RobotDrZaius
    link
    fedilink
    211 months ago

    I’m not entirely sure what behavior you’re trying to achieve with the hard-coded heights. Can you describe how you want the menu to behave? I do think it’s very doable in pure CSS without any magic numbers.

    If your goal is just to make sure the menu creates the right number of “columns”, you should try using display:grid instead of flex. It gives you much more control over that kind of layout, and you can set it up to automatically fill the available area with columns of constrained width. You can then also have items populate vertically instead of horizontally (grid-auto-flow:column).

    Other stuff that seems weird to me - why set the height to 10,000px? Also, if the menu links just take you to anchors lower down on the page, consider using the :target pseudo-class so that only the selected one is shown, the rest can be display:none.

    • @CrulOP
      link
      English
      1
      edit-2
      11 months ago

      Can you describe how you want the menu to behave?

      I want it to behave exactly how it’s behaving now. Trying to explain it with words is much harder :/.

      I do think it’s very doable in pure CSS without any magic numbers.

      I agree, I would be very surprised if that’s not the case.

      you should try using display:grid instead of flex. It gives you much more control over that kind of layout

      I didn’t even know display: grid exists… I’m really outdated. I will give it a try!

      why set the height to 10,000px?

      Yeah, that’s really weird. It’s been a long time since I started this and I don’t remember. As the comment says, it’s later reset on JS:

      $(‘html, body’).css(‘min-height’, 0);

      I think it was related to some weird case when you reload the page ant the content being slow to render (because the KaTeX formulas). But I removed the code and tried to replicate any unwanted behavior and I wasn’t able. So it’s probably dead code.

      if the menu links just take you to anchors lower down on the page, consider using the :target pseudo-class so that only the selected one is shown, the rest can be display:none.

      I didn’t know about :target either, thanks for the tip. I just took a quick look at the documentation and, from what I see on the demos, it seems that only one chapter could be open at once, but I want to allow to open multiple chapters. Is that possible with :target?

      Thank you very much for the suggestions!