Сделать отзывчивый график времени в HTML / CSS

0

Я хочу сделать навигацию следующим образом: Изображение 174551Изображение 174551Изображение 174551

как я могу сделать это отзывчивым?

Это мой текущий код, но я не считаю его отзывчивым:

HTML

<figure class="pagenation"> 
        <a href="#1" data-liquidslider-ref="main-slider" class="colone">adddddddd</a>
        <a href="#2" data-liquidslider-ref="main-slider" class="coltwo">adddddddd</a>
        <a href="#3" data-liquidslider-ref="main-slider" class="colthree">adddddddd</a>

      </figure>

CSS

#one {position:absolute;top:200px;background-image: url('imgact/a1.png');}
#one:hover {background-image: url('imgact/a1-over.png');}
.onehold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:130px;z-index: 4}

#two {position:absolute;top:238px;background-image: url('imgact/a2.png');}
#two:hover {background-image: url('imgact/a2-over.png');}
.twohold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:171px;z-index: 3}

#three {position:absolute;top:325px;background-image: url('imgact/3.png');display:inline-block;text-indent: 9999999px}
#three:hover {background-image: url('imgact/3over.png');}
.threehold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:171px;z-index: 2;}


#four {position:absolute;top:432px;background-image: url('imgact/4.png');}
#four:hover {background-image: url('imgact/4over.png');}
.fourhold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:171px;z-index: 1}
  • 0
    Не используйте значения px, но вместо этого используйте значения в процентах (для ширины). Должна ли эта «навигация» быть перетаскиваемой (черный ящик)?
Теги:

2 ответа

0

Спасибо за ответы, я решил проблему с "%", там мой код

.pagenation {position:absolute;float:left;margin-left:100px;margin-top: 0px;text-indent: -9999px;display: inline-block;background-image: url('ruler.png');background-size:100%;width:525px;text-align: left}
        .pagenation a{ text-align: left}

        .colone {width: 20%;top:8px;left:1px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
        .colone:hover {float:left;display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colone:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colone:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .coltwo {width: 240px;top:-3px;left:199px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
        .coltwo:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .coltwo:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .coltwo:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colthree {width:74px;top:-12px;left:450px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
        .colthree:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colthree:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colthree:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}


  /* Large desktop */
@media (min-width: 1200px) { 




 }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 



 }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

    .thumbcontainer {margin-top: 150px;width: 100%;margin-left: 10%}  
    .pagenation {background-size: 100%;width:67%;height:30px;margin-left: 30px}
    .colone {width: 20%;top:8px;left:1px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
      .colone:hover {float:left;display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colone:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colone:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .coltwo {width: 20%;top:-3px;left:199px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
      .coltwo:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .coltwo:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .coltwo:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colthree {width:20%;top:-12px;left:450px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
      .colthree:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colthree:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colthree:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}


 }
Поделиться
0

Представьте себе эту иерархию и уровни в вашем коде (я не имею ничего общего с вашими подклассами, как одна ловушка, трюк,... на самом деле они хорошие ИМХО.):

ВРЕМЕНА (ВЕСЬ)> РАЗНЫЕ БЛОКИ (Подмножество вашего "Цельного", как и ваше....)> РАЗДЕЛА И ССЫЛКИ В ВАШИХ БЛОКАХ

(Предполагая, что вся ваша временная шкала не находится в фиксированном контейнере, таком как 960px, чтобы он мог сжиматься или расширяться на вашей веб-странице)

1-й уровень: вся ваша шкала времени, она будет иметь width равную 90% вашей страницы. Сумма не важна, просто процентная ширина.

2-й уровень: если у вас есть определенное количество блоков, выполните математику с вашим любимым калькулятором, чтобы определить каждую ширину блока. (Если у вас есть 4 блока, то каждый из них должен быть 25%). Если нет, я думаю, вам нужно использовать некоторую магию JavaScript и позволить ему рассчитать ширину для вас, поскольку количество блоков будет расти со временем.

3-й уровень: ваши ссылки, это будет отличаться в разных классах в зависимости от того, сколько ссылок они будут удерживать. Затем, исходя из этого определенного номера, вы указываете margin в процентах.

Я думаю, что это решит вашу проблему и потеряет px ;)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню