CODEWITHSUNDEEP
htmlcsstext
Constantine Linardakis
Constantine Linardakis

Reputation: 67

CSS/HTML Wrapping Text Around Image Not Working

Problem : I can't get the Text to wrap around the image that I've created. Please let me know if I am calling it wrong or placing the float's in the wrong place?

What I have tried : I have tried to use this website for reference - https://www.homeandlearn.co.uk/WD/wds4p6.html

but, I still can't figure out what's wrong with my code? I looked at float, and thought if I put float:left lets say in the image css properties it should make that border. I also tried making the image shape around it be like a circle? That tended to not work either?

Im guessing that the main problem is i'm not putting it in the right place or need to fix something.

Also - This HTML doc has much more things and many more css with it.

Here is my website if you want to look more into it! https://constantinelinardakis.github.io/OfficialWebsite/Home.html

.outline {
    position: absolute;
    height: 90%;
    top: 30%;
    left: 6%;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9) inset;
    background: url("../assets/backg.png") no-repeat center;
    background-color: #3156a0;
    border-radius: 25px;
    transition: all 0.7s;
    -webkit-transition: color 0.3s;
    transition: all 0.7s;
}

/* OUTLINE IMAGE ICON */
.costaicon {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 350px;
    height: 350px;
    max-width: 500px;
    max-height: 500px;
    transition: all 0.7s;
    float: left;
    border-radius: 50%;
    shape-outside: url(https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png);
    shape-margin: 15px;
    shape-image-threshold: 0.5;
    mask-image: url(https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png);
    margin: 10px;
}

/* OUTLINE PARAGRAPHS */
.outline > p {
    display: block;
    float: left;
    /* 
    position: absolute;
    top:10%;
    left:35%;
    */
    font-size: 20px;
    color: white;
    font-family: "Abel", sans-serif;
    transition: all 0.7s;
    margin: 10px;
}
<div class="outline">
    <!-- MY ICON -->
    <div class="costaicon">
        <img alt="MyLogo" src="https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png" style="width: 350px; height: 350px; float: left;" />
    </div>

    <p>
        Hello my name is Constantine Linardakis as known as TwinPlayz on Youtube. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I
        blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I
        blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal.
    </p>

    <!-- STYLE -->
    <p style="color: transparent;"></p>
</div>

Upvotes: 2

Views: 60

Answers (1)

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Can you please check the below code? Hope it will work for you. We have removed position, shape-outside and mask-image from .costaicon and also removed float from .outline > p.

Please refer to this link: https://jsfiddle.net/yudizsolutions/vrguhok7/

.outline {
  position: absolute;
  height: 90%;
  top: 30%;
  left: 6%;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.9) inset;
  background: url("../assets/backg.png") no-repeat center;
  background-color: #3156a0;
  border-radius: 25px;
  transition: all 0.7s;
  -webkit-transition: color 0.3s;
  transition: all 0.7s;
}


/* OUTLINE IMAGE ICON */

.costaicon {
  float: left;
  border-radius: 50%;
  margin: 10px;
}


/* OUTLINE PARAGRAPHS */

.outline>p {
  display: block;
  font-size: 20px;
  color: white;
  font-family: 'Abel', sans-serif;
  transition: all 0.7s;
  margin: 10px;
}
<div class="outline">

  <!-- MY ICON -->
  <div class="costaicon">

    <img alt="MyLogo" src="https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/OTHERLOGO%20TRANSPARENT.png" style="width:350px;height:350px;float:left;">

  </div>

  <p>
    Hello my name is Constantine Linardakis as known as TwinPlayz on Youtube. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I
    blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal.
    I blbababablablablal. I blbababablablablal. I blbababablablablal. I blbababablablablal.
  </p>

  <!-- STYLE -->
  <p style="color: transparent;"></p>

</div>

Upvotes: 1

Related Questions