CODEWITHSUNDEEP
htmlcss
wegelagerer
wegelagerer

Reputation: 3720

Strange div positioning

I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.

At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.

Problem screenshot

As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).

Code can be seen directly on the website. Any help would be appreciated.

Upvotes: 0

Views: 57

Answers (1)

matthias_h
matthias_h

Reputation: 11416

There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps): Your current HTML: 

<div class="w-clearfix main-content karta">
  <div class="slike-wrapper">
   <a class="w-inline-block featured-male-slike karta"     href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
    <img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
    <div class="potpis-mala-slika-featured">
      <div class="potpis-ispod-slike">Zagreb is the capital and the largest city of  Croatia</div>
     </div>
   </a>
   <a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
    <img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
    <div class="potpis-mala-slika-featured">
     <div class="potpis-ispod-slike">Museum of Broken Relationships</div>
    </div>
  </a>
 </div>
 <div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
 <div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>

could be changed into: 

<div class="w-clearfix main-content karta">
 <div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
  <div class="slike-wrapper">
   <a class="w-inline-block featured-male-slike karta"     href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
    <img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
    <div class="potpis-mala-slika-featured">
      <div class="potpis-ispod-slike">Zagreb is the capital and the largest city of  Croatia</div>
     </div>
   </a>
   <a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
    <img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
    <div class="potpis-mala-slika-featured">
     <div class="potpis-ispod-slike">Museum of Broken Relationships</div>
    </div>
  </a>
 </div>
 <div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>

This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.

In the CSS 

.featured-male-slike.karta
{  
   clear: right;
   display: inline;
   float: left;
   margin-top: 30px;
   overflow: hidden;
   /* position: absolute; */  /* <--comment position abolute out */
}

comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g. 

.slike-wrapper img
{
   height:140px;
}

as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.

Upvotes: 1

Related Questions