positioning in html and css not working properly

Question

Hi I am trying to get a list of images placed one below other and on top of each image there is some text. I thought of this layout. I have a main wrapper with relative positioning which contains a img-txt div this also has relative positioning. and then this contains two divs one for image and other for text. But my images are stacked on top of each other why?

    .wrapper{
      position:relative;
    }
    .img-txt{
      position: relative;
    }
    .iimg{
      position: absolute;
    }
    .text{
      position: absolute;
    }

      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>
    
      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>
    
      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>
      
      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>

Edit : The text should be centered horizontally and vertically

First of all, your structure is all wrong. What you have is a list of images. Use a list. Then set a position: relative; on the <li> of that list, and use some sort of container for the text inside (<span> springs to mind), and position that with position: absolute; — junkfoodjunkie
– junkfoodjunkie, Commented Dec 24, 2016 at 12:27
@Leothelion second one but text should be on top of images .basically what i want is to have a div of same size as image with some text on it .and when i hover over images div with text pops up. texts are to be centered. if you can show how this can be done — anekix
– anekix, Commented Dec 24, 2016 at 12:30
And I repeat, the structure is wrong - use proper markup, no a bunch of <div>s. — junkfoodjunkie
– junkfoodjunkie, Commented Dec 24, 2016 at 12:47

ab29007 · Accepted Answer · 2016-12-24 12:44:25Z

1

change your .iimg to position:relative; and add z-index to the text. you can adjust text's position using top and left

.wrapper{
      width:400px;
  margin:0;
  padding:0;
  border:1px solid black;
    }
    .img-txt{
      position: relative;
      width:100%;
  margin:0;
  padding:0;
    }
    .iimg{
      position:relative;
      width:100%;
  margin:0;
  padding:0;
    }
.iimg img{
      width:100%;
  margin:0;
  padding:0;
      display:block;
    }
    .text{
      position: absolute;
      top:50%;
      left:50%;
      z-index:10;
    }

<div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>
    
      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>
    
      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>
      
      <div class="wrapper">
        <div class="img-txt">
          <div class="iimg">
            <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
          </div>
          <div class = "text">Test</div>
        </div>
      </div>

edited Dec 24, 2016 at 12:44

answered Dec 24, 2016 at 12:29

ab29007

7,7662 gold badges19 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

anekix Over a year ago

thanks a lot but text should be vertically and horizontally centered

junkfoodjunkie Over a year ago

Then say that when you ask the question.

ab29007 Over a year ago

ok. I updated it. is it good? If it is can you please accept the answer. if not let me know

anekix Over a year ago

Yeah perfect .just a little explanation to why the first div was made relative would be immensely helpful

ab29007 Over a year ago

it's not necessary. I thought you had any other use for that . so I kept it

|

junkfoodjunkie · Accepted Answer · 2016-12-24 12:59:19Z

1

Here. Proper markup, and CSS.

ul {
  list-style-type: none;
  }
li {
  position: relative;
  display: inline-block;
  }
li span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 25%;
  text-align: center;
  z-index: 100;
  visibility: hidden;
  }
li:hover span,img:hover ~ span {
visibility: visible;
  }

<ul class="wrapper">
   <li>
      <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
     <span>Test</span>
   </li>
  <li>
    <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
    <span>Test</span>
  </li>
  <li>
    <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
    <span>Test</span>
  </li>
  <li>
    <img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
    <span>Test</span>
  </li>
</ul>

edited Dec 24, 2016 at 12:59

answered Dec 24, 2016 at 12:33

junkfoodjunkie

3,1861 gold badge22 silver badges33 bronze badges

6 Comments

anekix Over a year ago

thanks a lot. how can we center the texts (both way) .see edit

junkfoodjunkie Over a year ago

It is centered - see the updated version. Centered (vertically/horisontally) and with hover-effect.

junkfoodjunkie Over a year ago

Eh, yes it is. What browser are you using?

anekix Over a year ago

i am using chrome browser

junkfoodjunkie Over a year ago

Sorry, saw the problem now when I tested anew, updated the answer. Now it works fine in both Chrome and Firefox.

|

Yonas Hailu · Accepted Answer · 2016-12-24 12:33:49Z

0

You can use min height if you know the height of the images but not for images with unknown heights

.wrapper{ min-height: 300px; }

answered Dec 24, 2016 at 12:33

Yonas Hailu

8537 silver badges20 bronze badges

Collectives™ on Stack Overflow

positioning in html and css not working properly

3 Answers 3

6 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related