CODEWITHSUNDEEP
htmlcssresponsive-design
None
None

Reputation: 5670

Make image positioned on another container

My HTML is like this

    <div class="container-panel">
  <div class="inner-bannerbg">
  </div>
  <div class="home-second-holder">
    <div class="wrapper clearfix">
      <ul class="service-menu">
        <li>
          <a href="/qw/privat/" class="inner-nav inner-nav01 active">Privat</a>
          <span class="arrow01"></span>
        </li>
        <li>
          <a href="/qw/lorem/" class="inner-nav inner-nav02">Lorem</a>

        </li>
        <li>
          <a href="/qw/some/" class="inner-nav inner-nav03">some</a>

        </li>
        <li>
          <a href="/qw/numquam/" class="inner-nav inner-nav04">numquam</a>

        </li>
        <li>
          <a href="/loesninger/ducimus/" class="inner-nav inner-nav05">ducimus</a>

        </li>
        <li>
          <a href="/qw/2/" class="inner-nav inner-nav06">2</a>

        </li>
        <li>
          <a href="/qw/4/" class="inner-nav inner-nav07">4</a>

        </li>
      </ul>
    </div>
  </div>
  <div class="private-block">
  </div>
</div>

As you can see there is a span inside first li .And an arrow image is attached to this span . CSS for this span

    ul.service-menu li span.arrow01 {
position: absolute;
width: 100%;
height: 44px;
background: url(../Images/active-arrow01.png) no-repeat center bottom;
left: 0;
bottom: -161px;
}

Using this css I have arranged arrow to come direct under current active li . and position right above my private-block div.This positioning completely relying on my CSS

 bottom: -161px;

The problem is that as the number of li is dynamic some times an extra row may come and break my style.If number of li grows there will be extra rows present and that will make this arrow align wrong.To get more in to this I will post the screen here enter image description here Can any one help me to make a css that will make arrow reside on top of private-block div ,neverthles how many rows are there.

Upvotes: 0

Views: 51

Answers (1)

matewka
matewka

Reputation: 10148

Define the arrow as the pseudo element of the .wrapper. Don't forget to set position: relative for the .wrapper:

.wrapper {
    position: relative;
}

.wrapper::after {
    position: absolute;
    width: 100%;
    height: 44px;
    content: url(../Images/active-arrow01.png); /* notice that the image becomes the "content" of the pseudo-element, not the background */
    left: 0;
    bottom: 0; /* the arrow will always be at the bottom of teh .wrapper */
}

Upvotes: 1

Related Questions