Need help implementing this design into html and css

Hi!

I hope everyone had a wonderful New year’s.

Any suggestion on how I can implement this design into html and css?

I can’t think of a way to split the background into white and gray and at the same time position the button and image where a part of them lies on the gray background. Any idea?

Thanks!

Ellie

Over lap effects can be achived with relative positioning.
For example the “Let’s Talk” button could be in a lower grey div, but nudged up with relative postioning.

2 Likes

What does the layout look like if there is less than 6 lines of text to the side?

What does the layout look like if there are 12 lines or more of text or if the text expands or wraps on screen width.

How does the gray background and design react to those changes.

Until the dynamics are understood all we have is a picture and the web is not a photograph :slight_smile:

If you can elaborate on how the design reacts to differing amounts of content then we can start to work out the best way to code it.

You should also at this stage be thinking of how it needs to look on mobile because that will also affect the way this is tackled.

As it stands it would be quite easy to code and the background could be a linear gradient but if you specifically want to match the button over half the white and gray then we need to know the answers to the above questions first.

You need to avoid magic numbers to position the button or background change but instead find a way that works automatically for any amount of content.

5 Likes

Hi, @SamA74. Yes, this is what I’ve been trying to do now but having issues on smaller screen resolutions.

Hi, @PaulOB. Now that you asked it, content for this part is not provided yet so I’m using dummy text.

The gray background actually serves as sort of like a table for the .png, refer to image. So gray background reacts primarily relative to the image and half of the button should lie over the gray background only on higher resolutions.

Here’s what it should look like on mobile.

1 Like

Dummy text is the bain of a web developers life :slight_smile: it serves no real purpose and disguises issues that may not be noticed until real content arrives.

You should always use real content and use it ‘extravagantly’. That is to say if the designer has shown you six lines of text you need to test with 20 lines of text or one line of text to see how it can be coded properly for the web. Remember that a user can simply set a very large minimum font size for their text only and that would blow a fixed design out of the water.

You still didn’t answer the question of where the background overlap occurs if the text height is greater than the image height or indeed if there is only one line of text?

If you can answer that question then we can start with a few simple examples to get you going:)

Thinking ahead is a pre-requisite of a good developer and you should always ask yourself “what if” :slight_smile:

4 Likes

Not sure if this answers your question as my English is limited but I talked to the designer, raised this issue and finally made things clear. Whether the background overlaps the button, doesn’t matter anymore. If the text only has one line, the button can be out of the gray background and if the text has way too many lines, the button can be out of the white background. Instead, the gray background should always be inline with this part of the image.

need-ideas

Yes, I’ll keep this in mind from now on. You are always so helpful. Thank you very much, @PaulOB. :slight_smile:

1 Like

Ok as a start here’s a very basic codepen (10 mins work max) that can serve as a starting point to highlight issues and discuss how things whould be handled at various stages.

As you can see at wide screens the background will overlap the image as required but as you narrow the screen and the image is made responsive its size gets smaller and thus no longer meets the gray background.

If the background needs to keep track with the image and the image is required to be responsive then this simple basic approach will not be enough to manage this.

The choices are that you go for a fixed height and width image that does not change with viewport width but in order to accommodate different widths you would need an ‘adaptive approach’ rather than a fluid approach. You would then use a series of media queries to change the height/width of the image and also the amount of the background overlap so that it is maintained exactly. You will probably need to align the image at the bottom of that left container when there is more text to the side because eventually the text will push the gray background further down and away from the image.
There are probably a number of other scenarios to deal with also.

I’ve finished for the night so if you want to fork the codepen and play around with it you should be able to get close to what you are after. I’ll be around tomorrow or one of the others can jump in and may have a better idea :slight_smile:

3 Likes

That pen is a huge help. I’ve been playing with multiple backgrounds earlier as I can’t think of anything else but yours is a better approach.

Sooo, I’ve been thinking if it’s alright to replace the image with an image where it is merged with the gray background and remove those paddings and negative margins on mobile? That way, I don’t have to make adjustments on multiple media queries. I’m not sure if that’s okay according to coding standards.

Thank you so much, @PaulOB! I’ve been saving a lot of time and learning a lot. :slight_smile:

1 Like

Mobile won’t be as much of an issue because you are dealing with a linear approach and the background doesn’t get affected by the text content. I would avoid adding the gray to the image as hat changes the image and makes it harder to control especially for full widths.

I would use the approach shown in my codepen but possibly align the image to the flex-end instead. The mobile view is easily maintained (just resize the codepen to see the effect).

e.g.

Alternatively use adaptive resizing instead of fluid image resizes and manually configure it. Two or three little media queries should suffice but there will still be the issue of controlling the image position in relation to fluid text.

1 Like

Yes, I think I got it now. I have one last question which isn’t related to my original question in this thread. May I send you a PM?

Thank you so much, @PaulOB. :slight_smile:

Yes you can but I’m not around until tomorrow most likely now.:slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.