1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to add text to a hexagon without breaking the layout?

Discussion in 'CSS' started by sarahk, Aug 5, 2022.

0
  1. #1
    The problem with cut-and-paste code is that you don't have to understand it! I've found a great way to use CSS to create hexagons of images that I can then screenshot and submit as an official event photo.

    My mockup is at https://codepen.io/itamer/pen/abYGLxV

    It works beautifully UNTIL I try to add text to one of the hexagons.
    All the IMG hexagons are ok
    The empty DIV hexagon is ok
    The DIV hexagon with text drops down

    [​IMG]

    My workaround is just to edit the screenshot but it would be good to generate it in one go. Any ideas on how to fix?


    FYI: original code with more shapes at https://dev.to/this-is-learning/hexagons-and-beyond-responsive-grid-patterns-sans-media-queries-1nb4
     
    Solved! View solution.
    sarahk, Aug 5, 2022 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    This is weird, somehow the clipping cared that the text was wrapping and when I added a BR to force the new line it was happy to move the hexagon up. I then needed to move the text down a smidgen - vertical align didn't work so I've ended up with this

    <div><span style=" line-height: 3px;"><br></span>IFS<br />
      Britomart, Auckland, NZ<br />August 22</span></div>
    HTML:
    Is there a better way?
     
    sarahk, Aug 5, 2022 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    You're overthinking the content ones slightly; that or you're not aware of inline-flex which can solve a bunch of problems.

    Also not helping is shitting on the page with pixels. A negative letter spacing and vertical-alignment is now viable since we don't care about IE/Trident anymore.

    https://codepen.io/jason-knight/pen/WNzJzmO

    No extra spacing span rubbish. No dicking around in pixels... a bunch of redundancies removed.

    I'm pretty sure this whole thing could be done a bit simpler, but I'd have to play with it more. The offset height calculation looks too complex for its own good.
     
    deathshadow, Aug 6, 2022 IP
  4. #4
    Here's a bit simpler an approach on the math side of things.

    https://codepen.io/jason-knight/pen/XWEqqVL

    1.5x the height being simpler than 1.7whateva. Also less prone to "creep" as it gets taller as here at around 12 rows tall, the offset of the original didn't line up.
     
    deathshadow, Aug 6, 2022 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    As I added the pixels I imagined your horror but figured that since it's for a screenshot and the HTML was not actually intended for an audience I could afford to be lazy.

    It's midnight and my eyes are hurting but I'm going to study your version and work out what it's doing. I'll be handing it over to my co-organiser when I go travelling in November so it needs to be easy to understand. Whatever happens, it's going to be better than asking non-designers to do something similar in Gimp.

    As always, I appreciate your input.
     
    sarahk, Aug 6, 2022 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I am amazed how often now rather than opening up Gimp or Inkscape -- or even Font Creator -- I instead start out with HTML and CSS. I mean, I've always done design in the stylesheet not a paint program, but still now I'm using code for stuff that SHOULD be a paint program's job. Because it's actually easier for me.

    Though to be fair, 30 years ago I was creating 3d models for POV-RAY in DOS "edit".
     
    deathshadow, Aug 7, 2022 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #7
    So much for don't make the browser do the photo editors job!
     
    sarahk, Aug 8, 2022 IP