Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ferdie de oliveira
Ferdie de oliveira
4,929 Points

CSS text help

Thank you very much for viewing my post.

My work has asked me to build a website using this PDF http://extri-uk.com/Checkout/Forstyleandcopyonly.pdf

The bit that I am stuck on is where the text is curved around the image.

I really just wanted to know what is the best way to do this.

If any anyone could point me in the correct direction or teach me, it will be really helpful.

Saskia Lund
Saskia Lund
5,673 Points

Hi Ferdie! Do they want you to solve this responsive?

4 Answers

Grace Kelly
Grace Kelly
33,990 Points

This article might help you out: http://thenewcode.com/916/Wrapping-Text-Around-Circular-Images-With-CSS-Shapes

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

CSS Shapes is what you need, but it's not well supported yet as you see here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes

To get better support, you need to use shapes-polyfill https://github.com/adobe-webplatform/css-shapes-polyfill or some other library like Bacon http://baconforme.com

Saskia Lund
Saskia Lund
5,673 Points
Saskia Lund
Saskia Lund
5,673 Points

Hi again Ferdie,

I was asking if they want a responsive solution, because the only way I can think of solving this "problem" CSS-wise is not very elegant IMHO.

You could solve it by using absolute positioning on the menu items and simple images on the menu container and for menu item backgrounds.

As soon as they want a responsive solution, this means a lot of tweaking and adjusting by slowly narrowing your browser-window and noting all the breakpoint and then setting up CSS rules for each breakpoint. And I promise you.. there will be a lot.

If you want to solve it purely with CSS, also those graphics, then try out CSS shapes. However that is not well supported. Curved designs are still a bit of a problem when it comes to pure CSS solutions.

Riku S.
Riku S.
11,322 Points

I think he was asking about the text wrapping around circular image, not about menu items.

Saskia Lund
Saskia Lund
5,673 Points

Oh yes, you are right!

I thought he was referring to the menu.. lol.

Well yes, that can be done with CSS shapes.

Ferdie de oliveira
Ferdie de oliveira
4,929 Points
Ferdie de oliveira
Ferdie de oliveira
4,929 Points

Guys, Thank you very much for the advice. I will realy this back to my employer. I knew that the design would be very hard to make responsive and would take a lot of work and the curved image text is not that great. I am not a fan of it.

I was thinking of using SVG and adding a background image to it. If i do that do you think the text would curve around.

But in general do you think this design would be good to work with espically to make responsive or would you have it layed out as a grid style (I prefer grid).

Thanks again guys.