Nivo Slider - отзывчивая/центрированная надпись

Я загрузил и внедрил Nivo Slider на своем веб-сайте. С момента его внедрения я обнаружил несколько ошибок, но я ищу помощь в получении моего заголовка на экране.Nivo Slider - отзывчивая/центрированная надпись

маржа: авто, как правило, работает для этого, чтобы обеспечить ДИВ всегда в центре (я думаю ..) - но я не могу заставить его работать с моим сайтом ..

Мой HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Max Klimmek - Portfolio, Clothing, Travel</title> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" /> 
     <script src="script/jquery.nivo.slider.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
     <script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script> 
     <meta name="viewport" content="width=device-width"> 

     <script type="text/javascript"> 
      $(window).load(function() { 
      $('#slider').nivoSlider()   
      }); 
     </script> 

    </head> 
    <body> 

     <header id="site-header"> 
     <div class="row"> 
      <nav class="nav"> 
       <ul> 
        <li><a href="index.html" class="selected"><i class="fa fa-shield"></i></a></li> 
        <li><a href="index.html" class="selected">Home</a></li> 
        <li><a href="index.html" class="selected">Portfolio</a></li> 
        <li><a href="index.html" class="selected">Clothing</a></li> 
        <li><a href="index.html" class="selected">Gallery</a></li> 
        <li><a href="index.html" class="selected">Resume</a></li> 
       </ul> 
      </nav> 
     </div> 
     </header> 
     <div class="wrapper"> 
      <div id="slider" class="nivoSlider"> 
       <img src="img/cover.jpg" alt="" title="#htmlcaption1"/> 
       <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/> 
       <img src="img/cover.jpg" alt="" title="#htmlcaption1"/> 
       <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/> 
      </div> 

      <div id="htmlcaption1" style="display:none"> 
      <div class="nivo-caption1" >Simple. <br> Clean.</div> 
     </div> 

     </div> 

    </body> 
</html>

Мой CSS для заголовка:

.nivo-caption1 { 
    position: absolute; 
    margin:auto; 
    top: 5%; 
    overflow:hidden; 
    background:none; 
    font-family: 'Gotham'; 
    color:#FFF; 
    font-weight:bold; 
    font-size:50px; 
    line-height:44px; 
    text-align:center; 
    text-transform:uppercase; /* converts text to UPPERCASE */ 
}

Если я удаляю Margin-Top, заголовок даже не появляется. Я добавил margin: auto для всех остальных div, которые содержат этот заголовок/слайдер.

У кого-нибудь есть идеи о том, как я мог бы обеспечить, чтобы nivo-caption всегда центрировалась даже при изменении размера окна браузера?

прилагается фотография, как она выглядит сейчас ..

Любая помощь будет здорово!

Спасибо, Max enter image description here

источник

2016-02-04 maxklimmek

В настоящее время ваш класс называется «Nivo-caption1», но вы пытаетесь стиль «Nivo титрами». Это была опечатка? Если нет, вы должны начать с назначения правильного класса. – Patrick

Таким образом, я нашел решение моей проблемы. Я не уверен, правильно ли это должно быть закодировано, но оно работает. Если кто-нибудь сможет увидеть, как мой код может вызвать проблемы в будущем, сообщите мне.

Я добавил некоторые фрагменты кода в css, и он решил все.

Мой HTML точно так же, как описано выше:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Max Klimmek - Portfolio, Clothing, Travel</title> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" /> 
     <script src="script/jquery.nivo.slider.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
     <script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script> 
     <meta name="viewport" content="width=device-width"> 

     <script type="text/javascript"> 
      $(window).load(function() { 
      $('#slider').nivoSlider()   
      }); 
     </script> 

    </head> 
    <body> 

     <header id="site-header"> 
     <div class="row"> 
      <nav class="nav"> 
       <ul> 
        <li><a href="index.html" class="selected"><i class="fa fa-shield"></i></a></li> 
        <li><a href="index.html" class="selected">Home</a></li> 
        <li><a href="index.html" class="selected">Portfolio</a></li> 
        <li><a href="index.html" class="selected">Clothing</a></li> 
        <li><a href="index.html" class="selected">Gallery</a></li> 
        <li><a href="index.html" class="selected">Resume</a></li> 
       </ul> 
      </nav> 
     </div> 
     </header> 
     <div class="wrapper"> 
      <div id="slider" class="nivoSlider"> 
       <img src="img/cover.jpg" alt="" title="#htmlcaption1"/> 
       <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/> 
       <img src="img/cover.jpg" alt="" title="#htmlcaption1"/> 
       <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/> 
      </div> 

      <div id="htmlcaption1" style="display:none"> 
      <div class="nivo-caption1" >Simple. <br> Clean.</div> 
     </div> 

     </div> 

    </body> 
</html>

Новый CSS для контейнера NivoCaption:

/* Caption styles */ 
.nivo-caption { 
    position: absolute; 
    justify-content: center; 
    margin-left: -150px; 
    margin-top: -200px; 
    width: 100%; 
    font-family: 'Gotham', sans-serif; 
    color:#FFF; 
    font-weight:bold; 
    font-size:45px; 
    line-height:44px; 
    text-align:center; 
    text-transform:uppercase; /* converts text to UPPERCASE */ 
} 

.nivo-caption1 { 
    position: absolute; 
    margin: auto; 
    margin-top:5px; 
}

частей, которые я добавил, чтобы обеспечить центральное выравнивание были:

justify-content: center; 
margin-left: -85px; 
margin-top: -200px; 
width: 100%;

Теперь я просто должен выяснить решения других ошибок с помощью этого ползунка:

pauseTime не применяются ко всем слайдам.
Задержка на подписи.

Cheers for your помогает ребятам!

Max

источник

2016-02-05 11:41:09 maxklimmek

Когда вы фиксируете свое имя класса, я считаю, что если вы установите ширину вашего DIV, а затем использовать запас налево: авто и запас правый: авто, элемент должен центрировать.

.nivo-caption { 
width:300px; 
margin-left:auto; 
margin-right:auto; 
}

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

источник

2016-02-04 22:53:36 ketchupisred

Я не думаю, что название класса имеет значение, любые изменения, сделанные для nivo-caption, будут корректно применены к классу nivo-caption1. После применения вашего предлагаемого исправления он действует так же, как и раньше, когда я изменил margin-left/right to auto .. Что происходит, теперь div движется ниже ползунка. Диверс центрирован, но он не накладывается на ползунок div. Любые другие идеи? – maxklimmek

Порог причины: авто не работает для данного конкретного случая в два раза.

Вам необходимо установить ширину.
Подпись помещается абсолютно, и это будет отменять ее. Даже если вы установите ширину, в этом случае это не имеет значения.

Это нормально, чтобы позиционировать его абсолютно для слайдера. Я не думаю, что это будет слишком хорошо, если вы этого не сделаете. Все, что нужно сделать здесь, это установить левый атрибут надписи так, чтобы он подталкивал подпись к центру экрана.

Для этого вам нужно будет рассчитать разницу между шириной ползунка и шириной надписи и разделить результат пополам. Это даст вам правильную сумму. Похоже, что ползунок охватывает всю ширину страницы, поэтому нам нужно будет рассчитать эту разницу динамически, потому что, когда изменяется размер окна, ширина ширины ползунка. Для этого нам понадобится небольшая помощь от javascript.

Нечто подобное могло бы помочь:

function centerCaption(){ var caption = $('.nivo-caption'); caption.css('left', ($('#slider').width() - caption.width())/2); }

Вот похудела рабочий пример: https://jsfiddle.net/sm1215/ma645ao8/2/

источник

2016-02-04 23:30:24 sm1215

Я реализовал то, что вы разместили в скрипке, и это тоже не решает проблему. Дело в том, что ширина слайдера фактически меняет ширину при изменении размера окна. Моя проблема заключается в том, что подпись не центрируется по ползунку, даже когда размер экрана изменяется. Ваше решение до сих пор не решило мою проблему, но я могу теоретически понять, как вы думаете, что нужно. Однако теперь заголовок расположен постоянно слева от экрана, я думаю, что здесь есть некоторые другие функции css, которые перекрывают мои. – maxklimmek

Возможно, существуют другие стили, которые применяются из другого места, но было бы трудно сказать, не проверяя сам сайт. Код, который я опубликовал в jsfiddle, был просто образцом, и его нужно немного изменить, чтобы работать. Например, имена классов различались. Рад, что вы нашли решение, удачи, остальное! – sm1215

Nivo Slider - отзывчивая/центрированная надпись

ответ

Смежные вопросы