4

prevents text from entering the image using the "superior" css attribu...

 3 years ago
source link: https://www.codesd.com/item/prevents-text-from-entering-the-image-using-the-superior-css-attribute.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

prevents text from entering the image using the "superior" css attribute

advertisements

I have one image below with 2 different paragraphs below it --- due to the shape of the image i am facing an issue keeping the text on the left of the image in the correct place. See jsfiddle here to get a clearer idea of how the image looks.

The issue I am facing with the way i have implemented the code is that the text on the left pushes up into the image when the screen becomes smaller. does anyone know how i can prevent this.

if you make the screen smaller in the jsfiddle you will see the text on the left hand side goes into the image. it is because of the following lines:

.left {
   position: relative;
   top: -100px;
}

perhaps it is a case that I need to keep writing media queries for different screen sizes? Hopefully not but so far this is the only solution I can think of.

see full code below.

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.col-1-2 {
  width: 50%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  padding-right: 20px;
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

.left {
  position: relative;
  top: -100px;
}

img {
  width: calc(100% - 1.2em);
  display: block;
}

.img-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
}

<div class="img-wrap">
  <img class="section-img" src="http://i.stack.imgur.com/LcAqZ.jpg">
</div>

<div class="bottom-section">
  <div class="grid">
    <div class="left col-1-2">
      <h3>Test</h3>
      <p>Test test</p>
    </div>
    <div class="col-1-2">
      <h3>Test</h3>
      <p>Test</p>
    </div>
  </div>

I don't think this is doable in an acceptable way with this approach. Since the background is part of the image, it resizes with it, and that's what is causing your text to slide up into the image.

My recommendation is, to cut the image in two pieces and create the following structure:

  • Put the whole thing inside a relatively positioned div
  • Split your image in two and place them in your columns.
  • Place the texts into a wrapper div so you have easier control over them
  • Place the texts alongside the .img-wrap divs in your columns
  • Use positioning and margins to align the elements inside the column
  • Create the VS badge with CSS

Please note, that this is a very roughly done example (I have used some generated images to show how to put this together). Also, some positioning values may not be completely accurate. This is just to show you the idea.

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.col-1-2 {
  width: 50%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  padding-right: 20px;
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

.details {
  height: 50px;
}

.right .details{
  position: absolute;
  bottom: -50px;
}

.right .img-wrap {
   margin-top: 50px;
}

img {
  width: calc(100% - 1.2em);
  display: block;
}

.img-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
}

.item {
    position: relative;
}

.vs {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px - 0.3em);
  background-color: #fff;
  width: 50px;
  height:50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  border-radius: 25px;
}

<div class="item">
<div class="img-wrap">
  <div class="grid">
    <div class="col-1-2">
      <div class="img-wrap">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" class="img-wrap" />
      </div>
      <div class="details">
        <h3>Test</h3>
        <p>Test test</p>
      </div>
    </div>
    <div class="col-1-2 right">
      <div class="details">
        <h3>Test</h3>
        <p>Test</p>
      </div>
      <div class="img-wrap">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" class="img-wrap" />
      </div>
    </div>
  </div>
  <div class="vs">VS</div>
</div>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK