Reputation: 33

Nivo Slider - Responsive/Centered Caption

I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.

Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..

My 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>

My CSS for the caption:

    .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 */
}

If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.

Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?

Attached is a photo of how it looks now..

Any help would be great!

Thanks, Maxenter image description here

Upvotes: 2

Answers (3)

maxklimmek

Reputation: 33

So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.

I added some bits of code to the css and it solved everything.

My HTML is exactly the same as above:

<!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>

The New CSS for the NivoCaption container:

/* 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;
}

The pieces I added to ensure center alignment were:

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

Now I just have to figure out solutions to the other bugs with this slider:

pauseTime not being applied to all slides.
Delay on caption load.

Cheers for your helps guys!

Max

Upvotes: 0

sm1215

Reputation: 436

The reason margin:auto isn't working for this particular case is two-fold.

You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.

It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.

In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.

Something like this might help:

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

Here is a slimmed down working example: https://jsfiddle.net/sm1215/ma645ao8/2/

Upvotes: 1

ketchupisred

Reputation: 651

When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.

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

This assumes you don't have other elements that force that element to not be able to move.

Upvotes: 0

Nivo Slider - Responsive/Centered Caption

Answers (3)

Related Questions