Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How do I place on a text-wrapped floating image?

Participant ,
May 08, 2021 May 08, 2021

I am having trouble placing text on an image that has float, particularly for wrapping text. I can place a caption below, I can place text in flex-boxed images, but I have not yet figured out how to do it for an image with float. I figure if I have the txt in a container with the image, it ought to stay with it, but it does not. I want to figure this out in plain old HTML and CSS. I'll look at Bootstrap maybe after I have this figured. Here is my futile attempt so far (CSS could use compaction but I'm leaving it like this until I have it cracked):

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SK Test Wrap 2</title>
<style>
.wrapimage-right-50 {
    margin: 0 auto 20px auto;
    overflow: hidden;
}
.wrapimage-right-50 img {
    float: right;
    margin: 0 0 0 0;
    margin-left: 20px;
    width: 50%;
}
.wrapimage-right-50 figcaption {
    float: right;
    width: 50%;
    color: red;
}
.contentheading {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 150%;
    font-weight: bold;
    margin-top: 0;
}
.textonimage {
    position: relative;
}
.textonimage img {
    text-align: center;
}
.imagetext_topleft {
    top: 10px;
    left: 10px;
    width: 50%;
    position: absolute;
    color: blue
}
.imagetext_topright {
    top: 10px;
    right: 10px;
    float: right;
    width: 50%;
    position: absolute;
    color: blue
}
.imagetext_btmleft {
    bottom: 30px;
    left: 10px;
    float: right;
    width: 50%;
    position: absolute;
    color: blue
}
.imagetext_btmright {
    bottom: 10px;
    right: 10px;
    float: right;
    width: 50%;
    position: absolute;
    color: blue
}
</style>
</head>

<body>
    
    <!-- #################################### CAPTION BELOW IMAGE -->
    
    <section class="wrapimage-right-50">
        <figure>
            <img src="https://www.dummyimage.com/1600x800/" alt="Photo 2">
            <figcaption>Block 1 Caption Below</figcaption>
        </figure>
        <div class="contentheading">Image Wrap Text - Right + Caption Below</div>
        <p>Nam eleifend ultrices metus, ut auctor ipsum porttitor ut. Etiam imperdiet euismod mi ac tincidunt. Proin
            commodo, dui a venenatis molestie, ex diam maximus magna, quis volutpat quam mi at mi. Nam ullamcorper
            ipsum
            nec mauris vulputate tincidunt. Suspendisse neque lacus, pretium sit amet sapien ac, eleifend viverra
            metus.
            Sed molestie diam sit amet risus pellentesque mollis. Cras nec risus libero. Sed condimentum finibus
            orci.
            Phasellus non ligula auctor, sodales felis sit amet, facilisis metus. Aliquam quis ante sollicitudin,
            tincidunt nisi et, consequat ex. Aenean vitae euismod risus. </p>
        <p>Nullam a iaculis quam, tristique vehicula nibh. Vestibulum sit amet felis bibendum, feugiat turpis non,
            aliquet risus. Etiam sit amet enim et tellus tempus consectetur. Morbi semper auctor nibh, ultrices
            pellentesque urna lobortis a. Aenean consequat vel dui vitae rutrum. Vivamus ut luctus sapien. Orci
            varius
            natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in condimentum mauris. In
            et
            est sit amet ex consequat consectetur hendrerit quis ante. Etiam bibendum leo eget neque bibendum, nec
            vehicula mauris ultricies. Proin venenatis nunc tortor, non egestas neque finibus id. Suspendisse auctor
            nunc non erat imperdiet tristique. Nulla vulputate nulla ut auctor tristique. Nulla sit amet tempor
            elit,
            vel aliquam libero. </p>
    </section>
    
    <!-- #################################### CAPTION IN IMAGE -->
    
    <section class="wrapimage-right-50">
        <figure class="textonimage">
            <img src="https://www.dummyimage.com/1600x800/" alt="Sunset">
            <div class="imagetext_topleft"> Caption in Picture - Top Left </div>
            <div class="imagetext_topright"> Caption in Picture - Top Right </div>
            <div class="imagetext_btmleft"> Caption in Picture - Bottom Left </div>
            <div class="imagetext_btmright"> Caption in Picture - Bottom Right </div>
        </figure>
        <div class="contentheading">Image Wrap Text - Right + Caption in Picture</div>
        <p>Nam eleifend ultrices metus, ut auctor ipsum porttitor ut. Etiam imperdiet euismod mi ac tincidunt. Proin
            commodo, dui a venenatis molestie, ex diam maximus magna, quis volutpat quam mi at mi. Nam ullamcorper
            ipsum
            nec mauris vulputate tincidunt. Suspendisse neque lacus, pretium sit amet sapien ac, eleifend viverra
            metus.
            Sed molestie diam sit amet risus pellentesque mollis. Cras nec risus libero. Sed condimentum finibus
            orci.
            Phasellus non ligula auctor, sodales felis sit amet, facilisis metus. Aliquam quis ante sollicitudin,
            tincidunt nisi et, consequat ex. Aenean vitae euismod risus. </p>
        <p>Nullam a iaculis quam, tristique vehicula nibh. Vestibulum sit amet felis bibendum, feugiat turpis non,
            aliquet risus. Etiam sit amet enim et tellus tempus consectetur. Morbi semper auctor nibh, ultrices
            pellentesque urna lobortis a. Aenean consequat vel dui vitae rutrum. Vivamus ut luctus sapien. Orci
            varius
            natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in condimentum mauris. In
            et
            est sit amet ex consequat consectetur hendrerit quis ante. Etiam bibendum leo eget neque bibendum, nec
            vehicula mauris ultricies. Proin venenatis nunc tortor, non egestas neque finibus id. Suspendisse auctor
            nunc non erat imperdiet tristique. Nulla vulputate nulla ut auctor tristique. Nulla sit amet tempor
            elit,
            vel aliquam libero. </p>
    </section>
</body>
</html>

 

4.4K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 08, 2021 May 08, 2021

You need to float the 'figure' element that the image is contained within, NOT the image itself.

 

/* FLOAT FIGURE ELEMENT */

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

 

/* ADD BELOW TO PREVENT IMAGE SPILLING OUT OF FIGURE ELEMENT */
.wrapimage-right-50 img {
max-width: 100%;
}

 

/* THEN UPDATE THE CSS SELECTORS BELOW */

 

/*TOP LEFT*/
.imagetext_topleft {
top: 10px;
left: 10px;
position: absolute;
color: blue
}
/*TOP RIGHT*/
.imagetext_topright {
top: 10px;

...
Translate
Community Expert ,
May 08, 2021 May 08, 2021

You must position both elements  -- the figure and the figcaption which has consequences because you're working with floated images.  It might be easier to just add some caption text to the actual image with Photoshop.  That said, see this tutorial. 

https://alt-web.com/TUTORIALS/?id=responsive_text_overlays

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 08, 2021 May 08, 2021

I realize now you want 4 captions OUCH! 

 

image.png

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>4 Figure Captions</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
figure.overlay {    
position: relative;    
z-index: 1;  
/**same size as image**/
height: 600px;    
width: 900px;
}  

figure.overlay img {
height:600px; 
width: 900px;
}
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;   
font-weight: 700;
text-shadow: 2px 1px 1px #000, 0 0 15px #FFF;
font-size: 24px;  
}

/**adjust values as required**/
.tp-lt{top: 25px; left: 12px; color:whitesmoke;}
.tp-rt{top: 25px; left:700px; color:aquamarine;}
.bt-lt{top:550px; left: 12px; color:orchid;}
.bt-rt{top: 550px; left:700px; color: lightsalmon}

</style>
</head>
<body>
<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.</p>
<figure class="overlay">      
<img src="https://placeimg.com/900/600/people/1" alt="person">
<figcaption class="tp-lt"> Figcaption tp-lt</figcaption> 
<figcaption class="tp-rt"> Figcaption tp-rt</figcaption> 
<figcaption class="bt-lt"> Figcaption bt-lt</figcaption> 
<figcaption class="bt-rt"> Figcaption bt-rt</figcaption> 
</figure>
</div>
</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 08, 2021 May 08, 2021

OK.  This version is floated AND responsive.

image.png

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>4 Figure Captions</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
p.wrap {position:relative; border:1px dotted silver;}

figure {float:right}

figure.overlay {    
position: relative; 
z-index: 1;  
border:4px solid red;
box-sizing: border-box;
}  

figure.overlay img {
height:100%; 
width: 100%;
}
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;   
font-weight: 700;
text-shadow: 2px 1px 1px #000, 0 0 15px #FFF;
font-size: 3.0vw;  
}

/**adjust values as required**/
.tp-lt{top: 5%; left: 2%; color:whitesmoke;}
.tp-rt{top: 5%; left:68%; color:aquamarine;}
.bt-lt{top:86%; left: 2%; color:orchid;}
.bt-rt{top:86%; left:68%; color: lightsalmon}

</style>
</head>
<body>
<div>

<p class="wrap">
<figure class="overlay">      
<img src="https://placeimg.com/900/600/people/1" alt="person">
<figcaption class="tp-lt"> Figcaption tp-lt
</figcaption> 
<figcaption class="tp-rt"> Figcaption tp-rt
</figcaption> 
<figcaption class="bt-lt"> Figcaption bt-lt
</figcaption> 
<figcaption class="bt-rt"> Figcaption bt-rt
</figcaption> 
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.</p>
</div>
</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 08, 2021 May 08, 2021
quote

OK.  This version is floated AND responsive.

 

image.png


By @Nancy OShea

 

Thanks Nancy - That looks spot-on. Will take me a while to absorb the details (z-index etc.)  Actually, the reason I have 4 captions is that I thought I had it solved the other night and it turned out it was a fluke that one of the captions appeared where it "should" be. When I added the others I realised I was on the wrong track.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 08, 2021 May 08, 2021

You need to float the 'figure' element that the image is contained within, NOT the image itself.

 

/* FLOAT FIGURE ELEMENT */

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

 

/* ADD BELOW TO PREVENT IMAGE SPILLING OUT OF FIGURE ELEMENT */
.wrapimage-right-50 img {
max-width: 100%;
}

 

/* THEN UPDATE THE CSS SELECTORS BELOW */

 

/*TOP LEFT*/
.imagetext_topleft {
top: 10px;
left: 10px;
position: absolute;
color: blue
}
/*TOP RIGHT*/
.imagetext_topright {
top: 10px;
right: 10px;
position: absolute;
color: blue
}
/*BOTTOM LEFT*/
.imagetext_btmleft {
bottom: 10px;
left: 10px;
position: absolute;
color: blue
}
/*BOTTOM RIGHT*/
.imagetext_btmright {
bottom: 10px;
right: 10px;
position: absolute;
color: blue
}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 08, 2021 May 08, 2021
quote

You need to float the 'figure' element that the image is contained within, NOT the image itself.

 

By @osgood_

Thanks - That's just what I was trying to do to keep the elements together. I tried a bunch of variations but it never quite clicked.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 09, 2021 May 09, 2021
quote
quote

You need to float the 'figure' element that the image is contained within, NOT the image itself.

 

By @osgood_

Thanks - That's just what I was trying to do to keep the elements together. I tried a bunch of variations but it never quite clicked.


By @Galeodan

 

No problem, its nice to see someone in the forum taking an actual interest in what they are doing for a change and using the traditional workflow instead of resorting to frameworks........thats the way you will learn faster and be able to solve more issues in the future.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 09, 2021 May 09, 2021

Frameworks are exactly what I'm trying to get away from. I've been managing my pages for some 25 years now, starting with FrontPage 97, and finally Netobjects Fusion. I've always had the urge, but never the time to look under the hood and figure out how it all works. So now I'm building my own templates in preparation for the major task of migrating my business sites to the 21st century. I can already see how critical it is to do a thorough job because it falls apart so easily. And I am really appreciating the help I am getting fron this forum - So here's another little puzzle 🙂

 

I now have a fairly good hand on floating images, wrapping text and addng captions but I'm stymied again. Whenever I put text into the bottom of an image, it appears higher if the image is floated and the greater the line-height, the greater the discrepancy. The odd thing is that the bottom text in non-floated images stays put, regardless of line-height. Here is the code. There are some surplus CSS definitions cos I've pulled it from my template-in-progress.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Wrap 5</title>
<style>
body {
    background-color: #F1FFED;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 40px;
    box-sizing: border-box;
}
/* ******************************** REMOVE <FIGURE> MARGINS          */
figure {
    margin: 0;
    padding: 0;
}
/* ########################################### IMAGE BLOCKS IN FLEX CONTAINER */
        /*  */
.flex-blocks-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-block-half {
    width: 49%;
}
.flex-block-third {
    width: 32.5%;
}
.flex-block-2thirds {
    width: 66%;
}
.flex-block-half h5, .flex-block-third h5, .flex-block-2thirds h5 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 25px;
}
.flex-block-half figcaption, .flex-block-third figcaption, .flex-block-2thirds figcaption {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    line-height: 5px;
    color: red;
}
.flex-block-half img, .flex-block-third img, .flex-block-2thirds img {
    max-width: 100%;
    height: auto;
}
.wrapimage-right-50 {
    margin: 0 auto 20px auto;
    overflow: hidden;
}
.wrapimage-right-50 img {
    float: right;
    margin: 0 0 0 0;
    margin-left: 20px;
    width: 100%;
}
.wrapimage-right-50 figure {
    position: relative;
    float: right;
    margin: 0;
    margin-left: 20px;
    width: 50%;
}
.wrapimage-right-70 {
    margin: 0 auto 20px auto;
    overflow: hidden;
}
.wrapimage-right-70 img {
    float: right;
    margin: 0 0 0 0;
    margin-left: 20px;
    width: 100%;
}
.wrapimage-right-70 figure {
    position: relative;
    float: right;
    margin: 0;
    margin-left: 20px;
    width: 70%;
}
.wrapimage-right-70 figcaption {
    float: right;
    width: 100%;
}
.contentheading {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 150%;
    font-weight: bold;
    margin-top: 0;
}
.textonimage {
    position: relative;
}
.textonimage img {
    text-align: center;
}
.imagetext-btmcenter, .imagetext-btmleft, .imagetext-btmright, .imagetext-center, .imagetext-topcenter, .imagetext-topleft, .imagetext-topright {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: blue;
}
.imagetext-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.imagetext-topcenter {
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 10px;
}
.imagetext-btmcenter {
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0%);
}
.imagetext-topleft {
    top: 10px;
    left: 10px;
}
.imagetext-topright {
    top: 10px;
    right: 10px;
}
.imagetext-btmleft {
    bottom: 10px;
    left: 10px;
}
.imagetext-btmright {
    bottom: 10px;
    right: 10px;
}
.wrapimage-right-70 {
    margin: 0 auto 20px auto;
    overflow: hidden;
}
.wrapimage-right-70 img {
    float: right;
    margin: 0 0 0 0;
    margin-left: 20px;
    width: 100%;
}
.wrapimage-right-70 figure {
    position: relative;
    float: right;
    margin: 0;
    margin-left: 20px;
    width: 70%;
}
.wrapimage-right-70 figcaption {
    float: right;
    width: 100%;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% MEDIA - <= 600px */
        /*  */


@media screen and (max-width: 600px) {
body {
    color: darkblue
}
.wrapimage-right-50 img, .wrapimage-right-70 img, .wrapimage-left-50 img, .wrapimage-left-70 img {
    float: none;
    margin: 0;
    width: 100%;
}
.wrapimage-right-50 figure, .wrapimage-right-70 figure, .wrapimage-left-50 figure, .wrapimage-left-70 figure {
    float: none;
    margin: 0;
    width: 100%;
}
.flex-block-half, .flex-block-third, .flex-block-2thirds {
    float: none;
    width: 100%;
    margin: 0 0 25px 0;
}
}
</style>
</head>

<body>
    
    <!-- ######################################### 2 FLEX-BOXES  --> 
    <!-- ######################################### ONE WITH WRAP TEXT  -->
    <section>
        <h1> Two Flex-Blocks - One with Wrap-Text (width 2/3, 1/3)</h1>
        <div class="flex-blocks-wrapper">
            <div class="flex-block-2thirds">
                <h5>Block 1 of 2</h5>
                <hr>
                <section class="wrapimage-right-70">
                    <figure class="textonimage">
                        <img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
                        <div class="imagetext-topleft"> Text Top Left </div>
                        <div class="imagetext-topright"> Text Top Right</div>
                        <div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
                        <div class="imagetext-btmright"> Text Bottom Right</div>
                    </figure>
                    <div class="contentheading">Wrapped Text Image</div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ornare quam, quis hendrerit
                        lorem. Vestibulum eros dolor, congue quis purus ut, tristique rhoncus nisl. Quisque sagittis,
                        urna ac dignissim posuere, neque nibh viverra ex, ut consectetur magna arcu vel justo. Phasellus
                        lobortis vestibulum elit, at fermentum felis dignissim rutrum. Morbi at mauris eget sem tempor
                        pretium vitae ac urna. Vivamus at auctor justo. Donec risus arcu, volutpat nec mattis sed,
                        finibus id purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
                        cubilia curae; </p>
                    <p>Pellentesque ultrices, metus a gravida tempor, odio urna pharetra ex, at tincidunt nisi justo vel
                        ligula. Duis at enim facilisis nisl molestie vehicula. Vestibulum facilisis est a ligula lacinia
                        pellentesque. Curabitur a nunc consequat, aliquam lacus eget, egestas justo. Maecenas varius
                        lacus ac viverra posuere. Praesent gravida massa molestie metus suscipit elementum. Etiam mi
                        nisl, volutpat at purus ac, fringilla scelerisque elit. In vitae neque imperdiet odio laoreet
                        posuere non eu lectus. </p>
                </section>
            </div>
            - 
            <!-- end flex-block -->
            
            <div class="flex-block-third">
                <h5>Block 2 of 2</h5>
                <hr>
                <figure class="textonimage">
                    <img src="https://www.dummyimage.com/800x1200/" alt="Portrait">
                    <div class="imagetext-topleft"> Text Top Left </div>
                    <div class="imagetext-topright"> Text Top Right</div>
                    <div class="imagetext-btmleft"> Text Bottom Left </div>
                    <div class="imagetext-btmright"> Text Bottom Right</div>
                </figure>
            </div>
            <!-- end flex-block --> 
        </div>
        <!-- end flex-blocks-wrapper -->
        <h3>Next Bit... not encroaching - OK</h3>
    </section>
    
    <!-- ########################################################## 2 BLOCKS  -->
    <section>
        <h1> Image Blocks with Text in Image x 2</h1>
        <div class="flex-blocks-wrapper">
            <div class="flex-block-half">
                <h5>Block 1 of 2</h5>
                <figure class="textonimage">
                    <img src="https://www.dummyimage.com/1600x300/" alt="Portrait">
                    <div class="imagetext-topleft"> Text Top Left </div>
                    <div class="imagetext-topright"> Text Top Right</div>
                    <div class="imagetext-btmleft"> Text Bottom Left </div>
                    <div class="imagetext-btmright"> Text Bottom Right</div>
                </figure>
                <p>Pellentesque ultrices, metus a gravida tempor, odio urna pharetra ex, at tincidunt nisi justo vel
                    ligula.
                    Duis at enim facilisis nisl molestie vehicula. Vestibulum facilisis est a ligula lacinia
                    pellentesque.
                    Curabitur </p>
            </div>
            <!-- end flex-block -->
            
            <div class="flex-block-half">
                <h5>Block 2 of 2</h5>
                <figure class="textonimage">
                    <img src="https://www.dummyimage.com/1600x300/" alt="Portrait">
                    <div class="imagetext-center"> Text Center</div>
                    <div class="imagetext-topcenter"> Text Top-Center</div>
                    <div class="imagetext-btmcenter"> Text Btm-Center</div>
                </figure>
                <p>Pellentesque ultrices, metus a gravida tempor, odio urna pharetra ex, at tincidunt nisi justo vel
                    ligula.
                    Duis at enim facilisis nisl molestie vehicula. Vestibulum facilisis est a ligula lacinia
                    pellentesque.
                    Curabitur </p>
            </div>
            <!-- end flex-block --> 
        </div>
        <!-- end flex-blocks-wrapper --> 
    </section>
    <hr>
</body>
</html>

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 10, 2021 May 10, 2021

I have watched this with great amusement. Meanwhile I have completed another project. One of the reasons why I use Bootstrap.

 

Have a look at the following code which uses Bootstrap 5

 

 

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-4">
        <section>
            <figure class="display-inline-block position-relative float-end">
                <img src="https://www.dummyimage.com/300x200/" alt="Portrait">
                <div class="position-absolute top-0 start-0 p-2"> Text Top Left </div>
                <div class="position-absolute top-0 end-0 p-2"> Text Top Right</div>
                <div class="position-absolute bottom-0 start-0 p-2"> Text Bottom Left</div>
                <div class="position-absolute bottom-0 end-0 p-2"> Text Bottom Right</div>
            </figure>
            <div>Wrapped Text Image</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ornare quam, quis hendrerit
                lorem. Vestibulum eros dolor, congue quis purus ut, tristique rhoncus nisl. Quisque sagittis,
                urna ac dignissim posuere, neque nibh viverra ex, ut consectetur magna arcu vel justo. Phasellus
                lobortis vestibulum elit, at fermentum felis dignissim rutrum. Morbi at mauris eget sem tempor
                pretium vitae ac urna. Vivamus at auctor justo. Donec risus arcu, volutpat nec mattis sed,
                finibus id purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
                cubilia curae; </p>
            <p>Pellentesque ultrices, metus a gravida tempor, odio urna pharetra ex, at tincidunt nisi justo vel
                ligula. Duis at enim facilisis nisl molestie vehicula. Vestibulum facilisis est a ligula lacinia
                pellentesque. Curabitur a nunc consequat, aliquam lacus eget, egestas justo. Maecenas varius
                lacus ac viverra posuere. Praesent gravida massa molestie metus suscipit elementum. Etiam mi
                nisl, volutpat at purus ac, fringilla scelerisque elit. In vitae neque imperdiet odio laoreet
                posuere non eu lectus. </p>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>

</html>

So simple, so fool proof, so modern web development.

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2021 May 10, 2021

Oh do behave, you're just recyling the same project deploying alternative and not so good approaches like Wappler. I pity your client if at any time you are unable to manage their website. Using a 'closed shop' approach like Wappler does really limits the clients chances of finding a developer with the necessary skills to manage their website without rewriting large chunks of it..........as you say modern web development at its worst, especially where the client is conerned.

 

The OP is learning and any worflow at that stage will be foreign regardless of if you use a framework or manually code it. Once you can code or use a framework then its simple. Personally l avoid frameworks simply because of the bloat they cause in the html code which for me at least slows down the process once the construct becomes more complex. They also 'hide' css attributes which you then have to find again slowing down the build process. Its far better in my opinion to write your own code as you use only that which is required plus you are learning to build beyond the few options a framework is capable of.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 10, 2021 May 10, 2021

OK. getting personal again. In that case how can you mislead the OP by saying

 

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

 

This ties the `figure` down to a width of `50%`, meaning that you would have to create a class for each different sized image. And to think that this answer was marked as `correct`.

 

The correct way is to display `figure` as an `inline-block` causing it to automatically adjust to the intrinsic size of the image.

 

BenPleysier_0-1620637565331.png

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2021 May 10, 2021
quote

OK. getting personal again. In that case how can you mislead the OP by saying

 

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

 

This ties the `figure` down to a width of `50%`, meaning that you would have to create a class for each different sized image. And to think that this answer was marked as `correct`.

 

The correct way is to display `figure` as an `inline-block` causing it to automatically adjust to the intrinsic size of the image.

 

 

 

inline-block won't limited the image to be 100% of its container.  If I set the image to a specific size like 400px or 300px you can use inline block but then the image/container is NOT responsive...........so to say its misleading/incorrect to set the container to a percentage size is incorrect. Generally you would want to use a larger image than is necessary to cater for smaller screen devices where the image is likey going to be full width of the screen, unless of course you switch out the images using scrset or javascript..........but hey its a matter of choice and how you are setting the construction up for various senarios.

 

I'm not being personal, just making observations which no-one really can usually be bothered to anwser or address because generally they are observations which developers like to forget, those that use framework/niche workflows.

 

In the case of your Bootstrap example you forget to mention that you are using thousands of lines of unneeded css in the default Bootstrap css file just to do something which take a few lines of css and a few kbs.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 10, 2021 May 10, 2021

Interesting. Using oversized images involving bytes that overshadow a few lines of unused code, is a matter of choice????

 

Anyhow, this is the correct way to create responsive images.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2021 May 10, 2021

Im not saying its the correct way  - to use oversized images, srcset should be used if you are doing it correctly but that just adds another layer to the build process which in my observation most developers are still keen to avoid or turning a blind eye to.

 

Handling images is an area which needs much improvement because what we have now, if you are doing it the correct way, means a lot of extra work and asset management.

 

I was just surprised at your response as your suggestion in regards to using a specific width image and inline block would probably look small on a large screen device so you would have to use some kind of techinque to swap the image at a certain window width, which in an ideal world is what should happen and ideally one wouldnt use an overly aggressive sized image where its not necessary. If only the images physical size could be recalculated without loss of data on the fly we could just use the one image, l wonder if that will ever happen.

 

I think in the end it comes down to just trying to do the best. Seeking perfection will result in never finishing a project

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2021 May 12, 2021
quote

If only the images physical size could be recalculated without loss of data on the fly we could just use the one image, l wonder if that will ever happen.


By @osgood_

 

Upload the image(s) to an S3 bucket and use

<img
 srcset="
  {BUCKET}/600x600/theshot.jpg 600w,
  {BUCKET}/1000x1000/theshot.jpg 1000w,
  {BUCKET}/3000x3000/theshot.jpg 3000w
 "
 src="{BUCKET}/600x600/theshot.jpg"
>

For more, see https://medium.com/frontend-at-scale/resize-images-on-the-fly-with-s3-lambda-and-api-gateway-36032f4...

 

The process is super easy when using the correct IDE.

 

BenPleysier_0-1620860026760.png

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2021 May 12, 2021

To add to the above, I had thought of using Sharp, but this requires saving the resized images, thus adding to storage.

 

Here I have created just the one image size and removed the original image to save space:

 

BenPleysier_0-1620861144408.png

 

All too easy when using the correct IDE.

 

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 13, 2021 May 13, 2021

How long has that taken you to figure out........2 days?

 

Its just more time and more management of 3rd party dependencies. This should be native in the browser but l wont hold out any hope of it happening any time soon. 

 

Still l guess it gave you an exercise to fill in your time, which can only be positive, well done, its better than having to create 3 different sized images.

 

Lets not forget though you most likely would not want to use the same image in terms of dimensions for all devices in a lot of cases, a hero image which appears on desktop is going to look stupid on a smartphone unless its cropped specifically for that device so the management of images l think will remain a concern if youre looking to create the optimum impact across devices.

 

Ive been doing some research into which websites do it correctly and which dont (to fill in my time) and its safe to say, my observations at least, only found 1, out of many, used srcset to manage inline images. This tells me theres a problem, which is largely being ignored on account managing images correctly ads another layer of complexity to the build process.

 

Still, a poll relating to web development the other day suggested 35% of those that responded had never heared of emmet so these days l dont have a clue as to what qualifications, knowledge and skills you need to do this job, not a lot it seems.

 

Edited:

Thinking about it couldnt you just use a simple php resize script which seems a lot less complex. Its something lve used in the past to create thumbnails from a folder full of larger sized images but never used in combination with srcset, maybe thats something for me to investigate and work through to see if it can happen in any useful way. I cant see why not off the top of my head.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 13, 2021 May 13, 2021

Thinking about it couldnt you just use a simple php resize script which seems a lot less complex.

Took you long enough to figure that one out.

 

If you want a great example, see WebAssist's PowerGallery.

 

Having said that, who currently starts a new project using PHP as the server model?

 

PS, thanks for the pat on the back!

Still l guess it gave you an exercise to fill in your time, which can only be positive, well done, its better than having to create 3 different sized images.

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 14, 2021 May 14, 2021

Took you long enough to figure that one out.

 

I'm sure that you are only too aware, being a senior citizen yourself, once you reach your 'sell-by-date' the brain starts to fail.

 

Having said that, who currently starts a new project using PHP as the server model?

 

According to the figures still a vast amount more than the current workflow you are using. From memory, 78% of all wesbites are built using php, only 1% using node js. Even if you factor in some really old php websites the vast difference between 78% and 1% would suggest even today php accounts for the majority of websites being built.

 

Further evidence, Wordpress (not my cup of tea) is the most popular website builder/cms in the World............driven by php. According to you whatever is the most popular must also be superior.

 

Still if you want to waste your time having to adhere to strict file structures, building your own routes, bringing in 3rd party middleware, managing a lot more dependencies, folders and files be my guest. I have no need for such complex workflows in terms of what I build or used to build, maybe others have a genuine reason.

 

Sure if you dont know php then this extra management all might fade into insignificance in terms of the amount of time you would need to spend learning enough php to get through - that's a significant reason why developers use node js because they are familar with javascipt, which is fine but this dumb rhetoric that node is better than php or php is better than node is put about by those with limited experience in only one or the other, not both.

 

Lets be honset here php is better for certain projects and node is for others. What you use should be based on that critera, anything inbetween you can use both workflows to great effect.

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 10, 2021 May 10, 2021

Follow the steps below and your 'Text Bottom Left - Higher - Why?' and 'Text Bottom Right' captions will be accurately positioned.

 

You have the below css selectors repeated twice in your code: Delete or comment out the first instances of each in the in the list of css. Slow down and be more observant. 

 

/* Comment out or delete */

.wrapimage-right-70 {
margin: 0 auto 20px auto;
overflow: hidden;
}

/* Comment out or delete */
.wrapimage-right-70 img {
float: right;
margin: 0 0 0 0;
margin-left: 20px;
width: 100%;
}

/* Comment out or delete */
.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}

 

Use less css. You DONT need to add a class "textonimage" to the figure element......

 

<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>

 

.......as you are already declaring the same attribute 'position: relative;' which targets the figure element in the wrapimage-right-70 container:

 

.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}

 

So the below selctors are redundant as you have already declared the figure element to have a 'position of relative' in the 'wrapimge-right-70 figure' css selector........so delete or comment out the below:

 

/* Comment out or delete */

.textonimage {
position: relative;
}

/* This css selecor is not needed at all - comment out or delete*/
.textonimage img {
text-align: center;
}

 

So lets have a look at the css selectors just above the 600px media queries break point:

 

/* This css selecor is not needed at all - comment out or delete */

.wrapimage-right-70 {
margin: 0 auto 0 auto;
overflow: hidden;
}

 

/* Comment out or remove the commented lines shown below */
.wrapimage-right-70 img {
/*float: right;*/
/* margin: 0 0 0 0;*/
/* margin-left: 20px; */
max-width: 100%;
}

 

/* This is fine as it is */
.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}

/* This css selecor is not needed at all - comment out or delete */
.wrapimage-right-70 figcaption {
float: right;
width: 100%;
}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 12, 2021 May 12, 2021

Thanks Osgood. I will check out the corrections you suggest - I have had only intermittent access to a computer lately, and will for the next week . I would be very happy to simplify the code. It's partly the result of trying different things until something works and not going back to cleanup the stuff that has become  superfluous. I have responses to some of the other posts in this thread - Hope I can get onto it soon.

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 23, 2021 May 23, 2021
quote

...

Use less css. You DONT need to add a class "textonimage" to the figure element......

 

<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>

 

.......as you are already declaring the same attribute 'position: relative;' which targets the figure element in the wrapimage-right-70 container:

 

.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}

 

So the below selctors are redundant as you have already declared the figure element to have a 'position of relative' in the 'wrapimge-right-70 figure' css selector........so delete or comment out the below:

 

/* Comment out or delete */

.textonimage {
position: relative;
}

.......


By @osgood_

 

Hi Osgood - This is really ancient history by now - I have only just got back on my own PC. I have applied most of the recommended changes and the output is what I was seeking. Regarding the .textonimage selector, I see can see how the very first image does not need it because it is in the wrapimage-right-70 img selector, as you point out. But it seems to me that the other images do need that selector as their text still needs to be set "relative". If I delete the .textonimage selector, as suggested, the text is no longer contained in any of the other images. Or perhaps I misunderstood your meaning there.

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 24, 2021 May 24, 2021
LATEST
quote
quote

...

Use less css. You DONT need to add a class "textonimage" to the figure element......

 

<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>

 

.......as you are already declaring the same attribute 'position: relative;' which targets the figure element in the wrapimage-right-70 container:

 

.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}

 

So the below selctors are redundant as you have already declared the figure element to have a 'position of relative' in the 'wrapimge-right-70 figure' css selector........so delete or comment out the below:

 

/* Comment out or delete */

.textonimage {
position: relative;
}

.......


By @osgood_

 

 I see can see how the very first image does not need it because it is in the wrapimage-right-70 img selector, as you point out. But it seems to me that the other images do need that selector as their text still needs to be set "relative". If I delete the .textonimage selector, as suggested, the text is no longer contained in any of the other images. Or perhaps I misunderstood your meaning there.

 

 


By @Galeodan

 

I don't recall what is the first image and what the other images are. I'm saying you dont need to add '.textonimage' css class to figure elements which are inside the '.wrapimage-right-70' container as they already have a position: relative; set.

 

So the class in red in the situation below is redundant.....

 

<div class="wrapimage-right-70">

<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>

</div>

 

.....as 'position: relative;' has already been set in the below css selector.

 

.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}

 

If you have a situation like below where the figure tag is NOT wrapped in '.wrapimage-right-70 ' container then you need to apply the css selector '.textonimage'

 

 

<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>

 

 

Hope that makes things a little clearer.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines