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

66 Answered Questions

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

108 Answered Questions

[SOLVED] How to horizontally center a <div>

22 Answered Questions

[SOLVED] Vertically align text next to an image?

33 Answered Questions

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

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

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
  • 1524977 View
  • 2294 Score
  • 30 Answer
  • Tags:   html css opacity

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
  • 2024096 View
  • 2161 Score
  • 35 Answer
  • Tags:   html css height

37 Answered Questions

38 Answered Questions

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

  • 2009-01-16 16:03:07
  • George Snider
  • 1454269 View
  • 2096 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
  • 1361897 View
  • 2672 Score
  • 16 Answer
  • Tags:   html css

Sponsored Content