Wrap Text around an image - Page 1 -...

User 126492 Photo


Ambassador
1,525 posts

Hi all.

I have not used Site Designer for a very long time now and I just cannot get text in a paragraph wrap around a image on the right of the page.

I really need to sort my problem out so that I can build a very special website.

Jim
Jim
---------------------------
User 2699991 Photo


Registered User
5,282 posts
Online Now

Float the image left or right in a container holding the image and text

You can use CSS shape OUTSIDE to wrap the text all around the image.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 122279 Photo


Senior Advisor
14,611 posts
Online Now

Hi Jim, good to see you here! It's been a while.

With ordinary, right-angled images you just do as Wayan said about floating the image. If the image has any other kind of shape, you'll have to use the shape-outside property. You may find this component useful:
https://mock-up.coffeecup.com/va-comps/ … pping.html
The component is made in the 'Frameworkless' layout system. If you are using one of the frameworks, you can replicate it, it is built the same way in all frameworks.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 126492 Photo


Ambassador
1,525 posts

Hi Inger.

It has been a long time since I was here.

I have been doing what Wayan says, I can float the image right but the paragraph text still shows underneath the image, it all so does it if I float the image left.

My wife is in the final stage of Parkinsons and I have just been award some funding so that she can go into a Nursing Home where she will continue get the best care. I don't want to do that but it will be better for her, I can visit every day and it will only be a couple of miles away.

I am building the website to share how we have had to deal with each of the 5 stages so that it may help others.
There is a lot of information about Parkinsons but nothing about the daily tasks one has to do to make things a little easier.


Inger wrote:
Hi Jim, good to see you here! It's been a while.

With ordinary, right-angled images you just do as Wayan said about floating the image. If the image has any other kind of shape, you'll have to use the shape-outside property. You may find this component useful:
https://mock-up.coffeecup.com/va-comps/ … pping.html
The component is made in the 'Frameworkless' layout system. If you are using one of the frameworks, you can replicate it, it is built the same way in all frameworks.
Jim
---------------------------
User 122279 Photo


Senior Advisor
14,611 posts
Online Now

Jim, I'm so sorry to hear about Anne. I've seen your postings on FB from time to time. I'm sure you're doing what is best for her.

Regarding that website, which framework are you using? And is it a square or rectangular image you're using?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,611 posts
Online Now

Hi again Jim,

I have made a wee mockup of the floated image with paragraphs going right through them, but the text does not. Again I've used Frameworkless, but it is the same in the frameworks.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 126492 Photo


Ambassador
1,525 posts

Inger wrote:
Jim, I'm so sorry to hear about Anne. I've seen your postings on FB from time to time. I'm sure you're doing what is best for her.

Regarding that website, which framework are you using? And is it a square or rectangular image you're using?


Thanks Inger, it has not been easy, I will send you a message on Facebook later.

What do you mean by Framework? the images are square.

I will look at the zip file now. Thankyou.


I will look at
Jim
---------------------------
User 126492 Photo


Ambassador
1,525 posts

Inger wrote:
Hi again Jim,

I have made a wee mockup of the floated image with paragraphs going right through them, but the text does not. Again I've used Frameworkless, but it is the same in the frameworks.


had looked at the example you sent, will try with different images, it just seems strange as I have done it many times when I was working on websites, must be old age setting in.
Thanks again.
Jim
---------------------------
User 2699991 Photo


Registered User
5,282 posts
Online Now

The container holding everything should be "block" not flex or anything else.
And the image needs to be the fist one in the container.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 122279 Photo


Senior Advisor
14,611 posts
Online Now

The frameworks are the layout systems that are built into SD. You have Bootstrap, Foundation and Materialize, each with its own system of helper files (JS and CSS) and attributes to make responsive pages work nicely. 'Frameworkless' used to be a framework too, by the name of Vanilla, but it appeared that there actually is another Vanilla framework out there, so the name was changed. Also, it doesn't have any attributes.

It appears that Foundation has the largest 'congregation' here, so if you want to use it, you will be sure to get help if needed. I have gone over to using 'Frameworkless' more and more, as I feel somewhat restricted in the other ones. I don't like that name though, so I call it BareBone. But I'm kind of able to use them all if I have to.

I'll keep an eye on FB ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.