1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

problema con mi slideshow

Tema en 'HTML y CSS' comenzado por michael patricio, 5 de Mayo de 2017.

  1. michael patricio

    michael patricio Nuevo Miembro

    Se incorporó:
    5 de Abril de 2017
    Mensajes:
    9
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    saludo. tengo un problrma con mi slideshow en mi web no aparese no se que es la ruta esta bien y todo si me pudieran ayudar.

    este es el codigo html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Alquila.com</title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    </head>
    <body>
    </div>
    <header>
    <nav>
    <ul>
    <li><a href="#"><span class="primero"><i class="icon icon-house"></i></span>Inicio</a></li>
    <li><a href="#"><span class="segundo"><i class="icon icon-tag"></i></span>Categorias</a>
    <ul>
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2</a></li>
    <li><a href="#">Item #3</a></li>
    <li><a href="#">Item #4</a></li>
    <li><a href="#">Item #5</a></li>
    </ul>
    </li>
    <li><a href="#"><span class="tercero"><i class="icon icon-suitcase"></i></span>Servicios</a></li>
    <li><a href="#"><span class="cuarto"><i class="icon icon-text"></i></span>Acerca de</a></li>
    <li><a href="#"><span class="quinto"><i class="icon icon-mail"></i></span>Contacto</a></li>
    </ul>
    </nav>
    </header>



    <h1>Alquila.com</h1>
    <div>
    <p><br>Si quiere vender o alquilar resulta clave publicitarla correctamente en el lugar idóneo, siendo internet el mejor escaparate, y a través de un anuncio efectivo. En los diferentes portales inmobiliarios se pueden ver cientos de miles de anuncios de inmuebles, pero hay algunos que levantan más curiosidad que otros. El primer paso para comercializar rápidamente una vivienda pasa por utilizar webs con credibilidad y prestigio que funcionen correctamente, pero esto no es todo.</p>
    </div>

    <h2>descripcion</h2>
    <div>
    <p>Los últimos años han sido toda una revolución en el márketing inmobiliario gracias a internet. Está claro que no hay ninguna plantilla para hacer un buen anuncio pero sí, unas reglas que se deben seguir a la hora de confeccionarlo. Como es lógico, "lo más importante son los contenidos multimedia, ya que internet es visual, con lo que con unas buenas fotografías proporcionarán más visitas", afirma Fernando Pinillos, director general de Globaliza.com, que ha analizado las claves para que un anuncio coseche un mayor éxito.</p>
    </div>

    <div class="main">
    <div class="slides">
    <img src="img/1.jpg" alt="">
    <img src="img/2.jpg" alt="">
    <img src="img/3.jpg" alt="">
    <img src="img/4.jpg" alt="">
    </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.slides.js"></script>
    <script>

    $(function(){
    $(".slides").slidesjs({
    play: {
    active: true,
    // [boolean] Generate the play and stop buttons.
    // You cannot use your own buttons. Sorry.
    effect: "slide",
    // [string] Can be either "slide" or "fade".
    interval: 5000,
    // [number] Time spent on each slide in milliseconds.
    auto: true,
    // [boolean] Start playing the slideshow on load.
    swap: true,
    // [boolean] show/hide stop and play buttons
    pauseOnHover: false,
    // [boolean] pause a playing slideshow on hover
    restartDelay: 2500
    // [number] restart delay on inactive slideshow
    }
    });
    });

    </script>

    </body>
    </html>



    y este el css


    * {
    margin:0;
    padding:0;
    }

    body {
    background:#f2f2f2;
    }

    .mai {
    width:50%;
    max-width:100px;
    margin:20px auto;
    }
    .slide img {
    width:50%;
    }

    .slidesjs-pagination {
    background:#424242;
    list-style: none;
    overflow: hidden;
    }
    .slidesjs-pagination li {
    float: left;
    }
    .slidesjs-pagination li a{
    display:block;
    padding:10px 20px;
    color:#fff;
    text-decoration:none;

    }
    .slides .active {
    background:#ccc;

    }
    .slidesjs-navigation{
    background:#000;
    color: #fff;
    display:inline-block;
    padding: 10px 20px;
    float: right;

    }
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.217
    Me gusta recibidos:
    544
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Última modificación: 6 de Mayo de 2017
  3. oscar fernando

    oscar fernando Miembro Activo

    Se incorporó:
    20 de Noviembre de 2015
    Mensajes:
    144
    Me gusta recibidos:
    93
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    colombia
    pues en el css haces referencia a una clase . mai la cual no tienes en tu html es .main
    igual mira bien la ruta de tus imagenes y la de los arhivos .js yo lo probe y tambien funciona..
    Código (CSS):
    .main {
        width:90%;
        max-width:1000px;
        margin:45px auto;
    }
    .slide img {
    width:100%;
    }
     
  4. michael patricio

    michael patricio Nuevo Miembro

    Se incorporó:
    5 de Abril de 2017
    Mensajes:
    9
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Código (CSS):
    nav {
        top:-20px;
        position: absolute;
        left:0;
        right:0;
        margin:20px auto;
        max-width:1000px;
        width:90%;
    }

    nav ul {
        list-style:none;
    }

    nav > ul {
        display:table;
        width:100%;
        background:#000;
        position:relative;
    }

    nav > ul li {
        display:table-cell;
    }

    /*Sub-menu*/
    nav > ul > li:hover > ul {
        display:block;
        height:100%;
    }

    nav > ul > li > ul {
        display:block;
        position:absolute;
        background:#ccc;
        left:0;
        right:0;
        overflow:hidden;
        height:0%;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    nav > ul li a {
        color:#fff;
        display:block;
        line-height:20px;
        padding:20px;
        position: relative;
        text-align:center;
        text-decoration:none;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    nav > ul > li > ul > li a:hover {
        background:#5da5a2;
    }

    nav > ul > li > a span {
        background:#174459;
        display:block;
        height:100%;
        width:100%;
        left:0;
        position:absolute;
        top:-55px;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    nav > ul > li > a span .icon {
        display:block;
        line-height:60px;
    }

    nav > ul > li > a:hover > span {
        top:0;
    }

    /*Colores*/
    nav ul li a .primero {
        background:#ccc;
    }

    nav ul li a .segundo {
        background:#5da5a2;
    }

    nav ul li a .tercero {
        background:#f25724;
    }

    nav ul li a .cuarto {
        background:#174459;
    }

    nav ul li a .quinto {
        background:#37a4d9;
    }




    a {
      background:#ffff;
      border-style: solid;
      text-decoration: none;
      color:white;
    }
    a: hover {
      text-decoration: underline;
      background:#000;
      color:#fff;
    }
    a: active
      background:#df1338
    }

    p {
      font-family:arial, Helvetica, sans-serif, "miriad pro";
      font-size:20px;
      text-align:;
      line-height:20px;
      text-transform: lowercase;
      letter-spacing: 20px,;
      text-shadow:white;
      text-decoration: none;
    }
    h1 {
       text-align: center;

    }
    h2 {
        text-align: center;
    }

    div {
        text-align: center;
      background:#D0CAC6;
      width:1000px  10px;
      height:50px;
      margin:20px 50px;
      padding:30px;
      border:10px solid;

    }

    body {
      background:url(../imagenes/dormitorio.jpg);
    background-size: cover;
    }

    img {
    margin:left;
    }


    * {
      margin:0;
      padding:0;
    }

    body {
       background:#f2f2f2;
    }

    .main {
        width:90%;
        max-width:1000px;
        margin:45px auto;
    }
    .slide img {
    width:100%;
    }

    .slidesjs-pagination {
      background:#424242;
      list-style: none;
      overflow: hidden;
    }
    .slidesjs-pagination li {
      float: left;
    }
    .slidesjs-pagination li a{
      display:block;
      padding:10px 20px;
      color:#fff;
      text-decoration:none;

    }
    .slides .active {
      background:#ccc;

    }
    .slidesjs-navigation{
      background:#000;
      color: #fff;
      display:inline-block;
      padding: 10px 20px;
      float: right;

    }
     
    [​IMG] queda asi no se por que
     

    Archivos adjuntos:

    Última modificación: 6 de Mayo de 2017
  5. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.217
    Me gusta recibidos:
    544
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    como queda? no veo el problema
     
  6. oscar fernando

    oscar fernando Miembro Activo

    Se incorporó:
    20 de Noviembre de 2015
    Mensajes:
    144
    Me gusta recibidos:
    93
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    colombia
    Aun te falta mucho manejo de html y css a los div que contiene dentro los parrafos ponles una clase por ejemplo .contenido asi
    HTML:
    <div class="contenido">
    <p><br>Si quiere vender o alquilar resulta clave publicitarla correctamente en el lugar idóneo, siendo internet el mejor escaparate, y a través de un anuncio efectivo. En los diferentes portales inmobiliarios se pueden ver cientos de miles de anuncios de inmuebles, pero hay algunos que levantan más curiosidad que otros. El primer paso para comercializar rápidamente una vivienda pasa por utilizar webs con credibilidad y prestigio que funcionen correctamente, pero esto no es todo.</p>
    </div>

    <h2>Descripcion</h2>
    <div class="contenido">
    <p>Los últimos años han sido toda una revolución en el márketing inmobiliario gracias a internet. Está claro que no hay ninguna plantilla para hacer un buen anuncio pero sí, unas reglas que se deben seguir a la hora de confeccionarlo. Como es lógico, "lo más importante son los contenidos multimedia, ya que internet es visual, con lo que con unas buenas fotografías proporcionarán más visitas", afirma Fernando Pinillos, director general de Globaliza.com, que ha analizado las claves para que un anuncio coseche un mayor éxito.</p>
    </div>
    css corregido algunas cosas nada mas el resto va por tu cuenta

    Código (CSS):
    * {
      margin:0;
      padding:0;
    }
    /*algunas propiedades extras para tu imagen de fondo*/
    body {
    background:url(../imagenes/imagen5.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }
    nav {
        top:-20px;
        position: absolute;
        left:0;
        right:0;
        margin:20px auto;
        max-width:1000px;
        width:90%;

    }

    nav ul {
        list-style:none;
    }

    nav > ul {
        display:table;
        width:100%;
        background:#000;
        position:relative;
    }

    nav > ul li {
        display:table-cell;
    }

    /*Sub-menu*/
    nav > ul > li:hover > ul {
        display:block;
        height:100%;
    }

    nav > ul > li > ul {
        display:block;
        position:absolute;
        background:#ccc;
        left:0;
        right:0;
        overflow:hidden;
        height:0%;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    nav > ul li a {
        color:#fff;
        display:block;
        line-height:20px;
        padding:20px;
        position: relative;
        text-align:center;
        text-decoration:none;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    nav > ul > li > ul > li a:hover {
        background:#5da5a2;
    }

    nav > ul > li > a span {
        background:#174459;
        display:block;
        height:100%;
        width:100%;
        left:0;
        position:absolute;
        top:-55px;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    nav > ul > li > a span .icon {
        display:block;
        line-height:60px;
    }

    nav > ul > li > a:hover > span {
        top:0;
    }

    /*Colores*/
    nav ul li a .primero {
        background:#ccc;
    }

    nav ul li a .segundo {
        background:#5da5a2;
    }

    nav ul li a .tercero {
        background:#f25724;
    }

    nav ul li a .cuarto {
        background:#174459;
    }

    nav ul li a .quinto {
        background:#37a4d9;
    }




    a {
      background:#ffff;
      border-style: solid;
      text-decoration: none;
      color:white;
    }
    a:hover {
      text-decoration: underline;
      background:#000;
      color:#fff;
    }
    a:active{
      background:#df1338;
    }
    h1 {
       text-align: center;

    }
    h2 {
        text-align: center;
    }
    /* remplazo el div por .contenido*/
    /* estilos para los contenedores de loa parrafos*/
    .contenido {
      background:#D0CAC6;
      width:73%;
      height:65px;
      margin:60px auto;
      padding:30px;
      border:5px solid;
      text-align: center;
      display: table;
    }
    /* centramos verticalmente el contenido*/

    .contenido p {
      font-family:arial, Helvetica, sans-serif, "miriad pro";
      font-size:1em;
      text-transform: lowercase;
      text-align: center;
      padding: 0 1rem;
      margin: 0;
      display: table-cell;
      vertical-align: middle;
    }

    img {
    margin:left;
    }




    .main {
        width:90%;
        max-width:980px;
        margin:45px auto;
    }
    .slide img {
    width:100%;
    }

    .slidesjs-pagination {
      background:#424242;
      list-style: none;
      overflow: hidden;
    }
    .slidesjs-pagination li {
      float: left;
    }
    .slidesjs-pagination li a{
      display:block;
      padding:10px 20px;
      color:#fff;
      text-decoration:none;

    }
    .slides .active {
      background:#ccc;

    }
    .slidesjs-navigation{
      background:#000;
      color: #fff;
      display:inline-block;
      padding: 10px 20px;
      float: right;

    }
    espero ver sido de ayuda y ve los videos de html y css te seran de gran ayuda ..o_O
    se me olvidaba mira bien tu codigo css no estas cerrando ; y { } en algunas partes de tu codigo por ejemplo
    Código (CSS):
    a: active
      background:#df1338
    }
    te falta el ; al final de la propiedad y el corchete de cierre y la pseudo-clase active va pegada a los : ojo con eso
     

    Archivos adjuntos:

    Última modificación: 6 de Mayo de 2017
    A AngelKrak le gusta esto.
  7. michael patricio

    michael patricio Nuevo Miembro

    Se incorporó:
    5 de Abril de 2017
    Mensajes:
    9
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    gracias por sus consejos ya lo pude arreglar
     

Comparte esta página