By Alexis Richard


2020-05-22 23:16:37 8 Comments

I have a client who is insisting that we use their graphic artist's graphics instead of the coded and fully responsive boxes I had created for their mockup.

So I have positioned the graphics (.png) with position: relative; and the buttons have been put on the graphics with position: absolute;. My problem is that the minute I resize my window everything looks horrible. The buttons float right off the image and don't remain there at all. Is there a way to do this better than I've done it here? I'm frankly a bit fried and I feel like I'm missing something.

Here is the site, at full width and resized.

The site at full width

enter image description here

Here's the current code:

.frontpage-container {
        padding: 50px;
}

.ccimg, .otimg {
        position: relative;
        width: 
}


/* This decides how big the OT and CC sections are on the front page*/

.ccbuttons {
        position: absolute;
        top: 310px;
        left: 100px;
}

.cc_needs, .cc_register, .cc_login, .ot_register {
        width: 120px;
        padding: 10px;
        margin: 5px;
        font-family: inherit;
        
}

.ot_register {
        position: absolute;
        top: 310px;
        left: 100px;
}
<span class="ccimg">
  <figure class="wp-block-image size-large">
    <img src="img url here"></figure>
    <span class="ccbuttons">
      <a href="URL HERE" class="button cc_register">Register</a>
      <a href="#" class="button cc_needs">Needs (FIX)</a>
      <a href="url here" class="button cc_login">Login</a>
    </span>
  </span>

  <span class="otimg">
    <figure class="wp-block-image size-large">
      <img src="url here">
      <a href="url here" class="button ot_register">Register</a>
    </figure>
  </span>

This is done on a generatepress child theme so if you'd like the original style.css I can give you that too. Let me know. And thanks for your help in advance.

2 comments

@Michael Bluejay 2020-05-22 23:56:08

Why wouldn't you just link the graphics?

<a href=jotform.us><img src=clientGraphic1></a>

@Alexis Richard 2020-05-23 00:59:12

Each graphic has several buttons in it to be linked. If it was just one button I would definitely do that. In fact originally I'd done this in my coded version.

@Alexis Richard 2020-05-23 01:05:49

Ah! I see what you mean, I misunderstood. For that one in the second graphic I just did it that way for consistency with the other buttons.

@Michael Bluejay 2020-05-23 01:16:00

Okay, several things: (1) Consider cutting up the single image into multiple images. Then you can link each one separately. (2) Another solution use an image map to assign links to a portion of an image. (3) I can't follow your code so I'm giving up. If I stared at it for a long time I'd figure it out, but you're trying your potential helpers' patience. Post only the minimum code to reproduce the problem. Delete irrelevant code (like alt=""). Don't make the reader scroll the code left and right. Use meaningful names. Also, it looks like you're using classes when you should be using IDs.

@Alexis Richard 2020-05-23 22:35:12

Hmm it's cleanly indented in visual studio code, so I guess I assumed it'd stay that way when I copy/paste-ed. I was really fried when I posted this so, sorry it's inconvenient. I didn't notice it had done that. Also I was taught that classes are almost always better to use than IDs because IDs are only used for the most specific cases. Now that I look at it, I can see why I should use an ID for the buttons, but is there somewhere else an ID would work better? I'll look into image mapping--that sounds really helpful.

@DCR 2020-05-22 23:50:08

this should get you started. Change the width of the img to 50vw. change font_size of .ot-register and set top and left with vw

.frontpage-container {
        padding: 50px;
}

.ccimg, .otimg {
        position: relative;
        width: 
}

img{
width:50vw;
}




/* This decides how big the OT and CC sections are on the front page*/

.ccbuttons {
        position: absolute;
        top: 310px;
        left: 100px;
}

.cc_needs, .cc_register, .cc_login, .ot_register {
        width: 120px;
        padding: 10px;
        margin: 5px;
        font-family: inherit;

}

.ot_register {
        position: absolute;
        top:20vw;
        left:8vw;
        font-size:2vw;
   
   }
   
   img{
   width:50vw;
   }
<span class="ccimg"><figure class="wp-block-image size-large"><img src="img url here" alt="" class="wp-image-280"></figure>
<!--<span class="ccbuttons">
<a href="URL HERE" class="button cc_register">Register</a>
<a href="#" class="button cc_needs">Needs (FIX)</a>
<a href="url here" class="button cc_login">Login</a>
</span>-->
</span>

<span class="otimg"><figure class="wp-block-image size-large"><img src="https://staging.alexisrichard.com/wp-content/uploads/2020/05/homepage-ot-transparent-e1590173452287-735x1024.png" alt="" class="wp-image-279">

<a href="https://form.jotform.us/92176043972158" class="button ot_register">Register</a></figure>
</span>

@Alexis Richard 2020-05-23 23:45:07

I put this in and tried it out, but unfortunately it seems to have the same problem. When I resize the window, the buttons go off the graphics again. :/

@DCR 2020-05-24 01:27:59

when you run the snippet here does it work for you? It works over here. I suspect the reason it doesn't work for you is your css. If you use px in your css it could cause problems with a responsive design. You should have noticed I commented out some of your html so I wouldn't have to deal with your css

@Alexis Richard 2020-05-24 01:57:37

Ahhhhhhh that would explain why that's commented out. I was wondering. Hmm. It may have to do with the original theme's stylesheet too then. I'll have to see. Oh geez this is going to be more in depth than I expected. Not sure I'm willing to rewrite the entire theme's stylesheet to do this.... maybe it's time for me to look at it from another angle.. hm...

@DCR 2020-05-24 14:30:07

are you using word press?

@Alexis Richard 2020-05-28 15:06:26

Well darn I thought I'd responded. Yes I am. What I ended up doing was learning how to do responsive .svg imagemapping with inkscape. It's working so far, but if you have another way I'd appreciate knowing for the knowing.

Related Questions

Sponsored Content

47 Answered Questions

[SOLVED] How to disable text selection highlighting

35 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1991436 View
  • 2134 Score
  • 35 Answer
  • Tags:   html css height

107 Answered Questions

[SOLVED] How to horizontally center a <div>

37 Answered Questions

30 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1521711 View
  • 2282 Score
  • 30 Answer
  • Tags:   html css opacity

33 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 1013445 View
  • 1904 Score
  • 33 Answer
  • Tags:   html css html-table

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1430512 View
  • 2068 Score
  • 38 Answer
  • Tags:   html css width

16 Answered Questions

[SOLVED] How do I disable the resizable property of a textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1345630 View
  • 2644 Score
  • 16 Answer
  • Tags:   html css

66 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

21 Answered Questions

[SOLVED] Vertically align text next to an image?

Sponsored Content