• 1 Post
  • 8 Comments
Joined 1 year ago
cake
Cake day: June 12th, 2023

help-circle
  • Display and layout rules aren’t difficult at all. Maybe I’m just not experienced enough. I’ve been a web dev for nearly a decade now and I feel like I’ve got the hang of it. That being said, I don’t work on projects that have to work on everything from a Nokia to an ultra wide monitor. We shoot for a few common sizes and hope it clears between edge cases nicely. What is an example of something that wraps randomly?


  • Genuinely, though, CSS is fairly clear cut about the rules of positioning and space. Relative positioning is one of the most important concepts to master since it allows things to flow via the HTML structure and not extra CSS. Fixed positioning is as if you had no relative container other than the window itself. Absolute positioning is a little weird, but it’s just like fixed positioning except within the nearest parent with relative positioning.

    Everything else is incredibly straight forward. Padding adds space within a container. Margins add space outside a container. Color changes text color. Background-color changes the background color of an element.

    Top, left, right, and bottom dictate where the element should be positioned after the default rules are applied. So if you have a relative div inside a parent which is half way down the page, top/right/left/bottom would move the element relative to it’s position within the parent. If you made the div fixed, it would be moved relative to the window.

    Lastly, if you’re designing a webpage just think in boxes or rows and columns. HTML can define 75% of the webpage structure. Then with just a bit of CSS you can organize the content into rows/columns. That’s pretty much it. Most web pages boil down to simple boxes within boxes. It just requires reading and understanding but most people don’t want to do that to use CSS since it feels like it should just “know”.

    As someone who has built QT, Swing, and JavaFx applications, I way prefer the separation of concerns that is afforded us via HTML JS and CSS.





  • Captain Janeway@lemmy.worldtoProgrammer Humor@lemmy.mlCSS Humor
    link
    fedilink
    arrow-up
    26
    arrow-down
    1
    ·
    edit-2
    3 months ago
    #moustache {
      position: absolute;
      bottom: 10px;
      margin: 0 auto;
    }
    

    If that doesn’t work:

    #moustache {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    

    Relative positioning is preferred but not always available if the parent face is positioned absolutely.

    Edit: adjusted bottom from 0 -> 10px since 0 would be at the bottom of the chin but there is obviously some padding to bring it nearer the lip