How do I make Text sit on top of...

User 63917 Photo


Registered User
12 posts

Wondering if any one can help me with how to place text on top of a photo? I have v3 Site Designer.
thanks
Keryn
User 2699991 Photo


Registered User
4,782 posts
Online Now

Keryn Stevens wrote:
Wondering if any one can help me with how to place text on top of a photo? I have v3 Site Designer.
thanks
Keryn

Hi kern
There are two ways to do it
1/ make the image a background image in the container set container to the height as youo want set the image to cover or cutom or contain whichever you prefer or looks ok
2/ place another container within the background container and place / position the text wherever you want

3/ place a container where you want the image to be
3a/place 2 more containers in that container
3b/place your image in the first container make that container relative
3c/put the text in the second container make that container absolute use margins etc to position the text.

Sounds harder to do than it really is

Perhaps a short video showing how it's done might help
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

actually one thing to mention is that it may be different for other frameworks, depending on which one you are using
Foundation
Bootstrap
Materialize
Vanilla

I only use foundation so although it may be the same way in the others I wouldn't know
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Wayan Jaya wrote:
Keryn Stevens wrote:
Wondering if any one can help me with how to place text on top of a photo? I have v3 Site Designer.
thanks
Keryn

Hi kern
There are two ways to do it
1/ make the image a background image in the container set container to the height as youo want set the image to cover or cutom or contain whichever you prefer or looks ok
2/ place another container within the background container and place / position the text wherever you want

3/ place a container where you want the image to be
3a/place 2 more containers in that container
3b/place your image in the first container make that container relative
3c/put the text in the second container make that container absolute use margins etc to position the text.

Sounds harder to do than it really is

Perhaps a short video showing how it's done might help


actually I got relative & absolute containers the wrong way round
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

oops again
forget all I have put previously I just notice you are using sdv3 I dont have sdv3 on this pc only sdv4 so it won't be the same
sorry although the principles may be the same the containersd/row/column thingy might be different
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Keryn, Maybe this will help: Go to my sharing folder, you find the URL below here in my signature. Click on 'Other', and look for two lines starting with Translucent. If you can use one of them, you can download the source code. They were both made with SD 3.0.
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 63917 Photo


Registered User
12 posts

Thank you Wayan and Inger for all the info. Much appreciated.
I'll see how I go.
Keryn :)

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.