Centered slider

Asked

Viewed 141 times

0

Good, I’m trying to center a slider, however with the change of the float left I can’t, already tried align: center; also no, changing measures does not look like I want, someone can help pfv?

/* SLIDER */

#slider-over {
  background: url(http://s23.postimg.org/lugd1z0ez/slider_over.png);
  width: 621px;
  height: 250px;
  position: absolute;
  margin-top: 10px;
}
#slider {
  width: 595px;
  margin: 22px;
  float: left;
  margin-left: 12px;
}
#slider ul {
  list-style: none;
}
#slider li {
  width: 595px;
  height: 219px;
}
#prevBtn a {
  display: block;
  width: 37px;
  height: 38px;
  position: absolute;
  background: url(images/slider-btn.png);
  z-index: 10;
  margin: 205px 0 0 550px;
}
#nextBtn a {
  display: block;
  width: 37px;
  height: 38px;
  position: absolute;
  background: url(images/slider-btn.png)0 -38px;
  z-index: 10;
  margin: 205px 0 0 570px;
}
/* SLIDER */

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- HEAD -->

<head>
  <title>Armas</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script type="text/javascript" src="jsp/jquery.js"></script>
  <script type="text/javascript" src="jsp/jquery.core.js"></script>
  <script type="text/javascript" src="jsp/slide.core.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#slider").Slider({
        auto: true,
        continuous: true
      });
    });
  </script>
</head>

<body>
  <center>

    <!-- NAVIGATION -->
    <div class="bg-top">
      <div id="navigation">
        <ul>
          <li><a href="index.html">Inicio</a>
            <li><a href="armas.html">Armas</a>
              <li><a href="armaduras.html" class="navi-trenn">Armaduras</a>
                <li><a href="acessorios.html" class="navi-trenn">Acessórios</a>
                  <li><a href="escudos.html" class="navi-trenn">Escudos</a>
                    <li><a href="capacetes.html" class="navi-trenn">Capacetes</a>
                      <li><a href="contas.html" class="navi-trenn">Contas</a>
        </ul>
      </div>
      <!-- HEADER -->
      <div id="logo"></div>
      <!-- MAIN -->
      <div id="main">
        <div id="main">
          <!-- STATUSBAR -->
          <div id="statusbar">
            <div class="status">
            </div>
          </div>
          <!-- SILDERBAR -->
          <span id="prevBtn" class="fade"><a href="javascript:void(0);"></a></span> 
          <span id="nextBtn" class="fade"><a href="javascript:void(0);"></a></span>
          <div id="slider-over" align="center"></div>
          <div id="slider" align="center">
            <ul>
              <li>
                <a href="#">
                  <img src="http://s9.postimg.org/fgeltxojj/hiperion.png" />
                </a>
              </li>
            </ul>
          </div>
          <div class="trenn"></div>
        </div>
        <!-- FOOTER -->
        <div id="footer" style="text-align:center;">
          Copyright by <a>Rui Neto</a> | Code by <a href="/index.html">M1n6u3x</a>
        </div>
      </div>
    </div>
  </center>
</body>

</html>

css
  • 1

    Enter only the code that is important for the question. http://answall.com/help/mcve

  • To be honest, your HTML code looks terrible. I recommend you to study more. The tag is no longer used <center>, and you didn’t close the tags <li>. By the way, it’s 2015, use the DOCTYPE HTML5 and the new tags it provides.

1 answer

1

The browser uses default values of margin, padding, etc... if not set. What you can do there is simply take your #slider ul and zero margin and padding:

#slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

But I advise you to reset ALL the css and do a search for CSS Resets.

* {margin: 0; padding: 0;}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.