Slider centered

Question

Slider centered

Navigation

#1 by (1 votes)

0

Well, I'm trying to center a slider, however with the float change left I can not, already tried align: center; also no, change of measures does not stay as I want, can anyone 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><divclass="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

asked by anonymous 01.05.2015 / 16:35

1 answer

Find directory using wildcards Edit txt file remotely

score 1 · Answer 1

The browser uses default values for margin, padding, etc ... If they are not defined. What you can do there is simply get your #slider ul and zero the margin and padding:

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

But I advise you to clear ALL the css and search CSS Resets.

* {margin: 0; padding: 0;}