Ссылки на боковой панели не кликабельны

Я делаю веб-сайт с 3 ящиками с контентом.

Поле 1 — это мой заголовок, поле 2 — это боковая панель, а поле 3 — это содержимое страницы.

Так это выглядит так:

    |   HEADER
----|--------------------------
    |
 S  |   PAGE CONTENT
 I  |
 D  |
 E  |
 B  |
 A  |
 R  |
    |

Теперь я получил код боковой панели:

https://jsfiddle.net/zr90fk05/

Домашняя страница:

    <div style="z-index: 5; margin-left: 30.5% !important; width: 780px !important; height: 215px;" id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>


  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img style="width: 780px; height: 215px;" src="#" alt="...">
      <div class="carousel-caption">
          <div class="carousel-caption"><p style="font-size: 20px; margin-left: -100%; margin-bottom: 40%;">Design is not for philosophy, it's for life.</p></div>
      </div>
    </div>
    <div class="item">
      <img style="width: 780px; height: 215px;" src="#" alt="...">
      <div class="carousel-caption">
          <p style="font-size: 20px;">Fashion is architecture: it is a matter of proportions.</p>
      </div>
    </div>
    <div class="item">
      <img style="width: 780px; height: 215px;" src="#" alt="...">
      <div class="carousel-caption">
          <p style="font-size: 20px; margin-left: -20%;">The details are not the details. They make the design.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#" class="carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#" class="carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- Carousel -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- 4 blocks to sub pages -->

<div style="z-index: 5; width: 1024px; margin: 0 auto;">

<div style="float: left; margin-left: 20%;"><a href="huiden"><img style="padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#"  alt="" /></div>
</a>

<div style="float: right; margin-right: 40px;"><a href="geweien"><img style="padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt=""/></div>
</a>

<br />
<br />

<div style="float: left; margin-left: 20%;"><a href="wonen"><img style="margin-top: 40px; margin-bottom: 1%; background: #C6A970; padding: 10px; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></a></div>

<div style="float: right; margin-right: 40px;"><a href="accessoires"><img style="margin-top: 40px; margin-bottom: 1%; padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></div>
</a></div>

<br />
<br />


</div>

Но содержимое моей страницы имеет этот CSS:

<div style="margin-left: 30% position: relative;">

И я думаю, что это моя проблема, из-за которой я не могу щелкнуть свои ссылки на боковой панели.

Что я делаю не так? Или что мне нужно изменить?

Заранее спасибо!


wordpress html sidebar css webshop
person TLR    schedule 17.03.2016    source источник
comment
Вы уверены, что не можете нажать? Ссылки кажутся кликабельными. Вы ожидаете, что в этом месте появится #? jsFiddle использует фреймы, поэтому вы не увидите # в расположении браузера.   -  person Silkster    schedule 17.03.2016
comment
Пожалуйста, опубликуйте полный пример, чтобы мы могли воспроизвести проблему. Ваш JSFiddle содержит только боковую панель, и это работает.   -  person Daniel Diekmeier    schedule 17.03.2016
comment
Кроме того, -10px недопустимо для padding-bottom. Вместо этого используйте margin-bottom.   -  person Silkster    schedule 17.03.2016
comment
Вы уверены, что проблем не возникает?   -  person Mustafa KÜÇÜK    schedule 17.03.2016
comment
Пока все работает, глючит только боковая панель.   -  person TLR    schedule 17.03.2016
comment
@Silkster здесь только для примера, в моем реальном коде он ссылается на страницу.   -  person TLR    schedule 18.03.2016
comment
@Daniel diekmeier Стиль другого кода предназначен для содержимого страницы. ‹div style=margin-left: 30% position: relative;› И это моя проблема на данный момент.   -  person TLR    schedule 18.03.2016
comment
Сначала я сделал дочернюю тему, чтобы было проще пользоваться. После этого я сделал сайдбар с position: absolute и теперь он работает!   -  person TLR    schedule 23.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я исправил свою проблему, добавив это:

.sidebar {
    position: absolute;
}
person TLR    schedule 31.03.2016