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

Ayuda Progress bar responsive error top

Tema en 'HTML y CSS' comenzado por victorcf999, 15 de Agosto de 2017.

  1. victorcf999

    victorcf999 Nuevo Miembro

    Se incorporó:
    19 de Abril de 2017
    Mensajes:
    29
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Buenas,

    Tengo una progress bar como la que pueden ver en las capturas de pantalla adjuntas, el problema es que cuando la pantalla es menor de 500px hago una cosa para que sea responsive, el problema como pueden ver en las imagenes adjuntas es que entonces se que queda en mitad del menu y no abajo.

    Cambio la propiedad del top con un @media pero no funciona

    Si quieren ver todo el codigo lo pueden ver haciendo inspeccion de elemento aqui http://trainyourc.esy.es/ es un subdominio que uso para hacer pruebas

    Adjunto los trozos de codigo relevantes

    HTML:
    <header>
               <a href="index.html" id="home"><img src="images/home.png" alt="Inicio"></a>
            <nav>
                <a href="servicios.html">Servicios</a>
                <a href="productos.html">Productos</a>
                <a href="contacto.html">Contacto</a>
            </nav>
        </header>
        <!-- PROGRESS BAR -->
        <progress value="0" id="progressBar">
              <div class="progress-container">
                  <span class="progress-bar"></span>
             </div>
        </progress>
    Código (CSS):
    @media(max-width:500px){
        header{
            flex-flow: column;
        }
        header nav{
            flex-flow:row wrap;
        }
        header nav a{
            margin: 0px;
        }
        #home{
            margin-bottom: 7px;
        }
        progress{
            top:103;
        }
    }
    /*### PROGRESS BAR ###*/
    progress {
      /* Positioning */
      position: fixed;
      left: 0;
      top: 72px;

      /* Dimensions */
      width: 100%;
      height: .25em;
    Cualquier cosa no duden en pedirmela

    Muchas gracias escritorio.PNG mobile.PNG escritorio.PNG escritorio.PNG mobile.PNG
     
    Última modificación: 15 de Agosto de 2017
  2. Kaine

    Kaine Miembro

    Se incorporó:
    6 de Junio de 2016
    Mensajes:
    55
    Me gusta recibidos:
    25
    Puntos de trofeos:
    18
    Género:
    Hombre
    Hola a tu progress que tiene el numero 103, prueba a ponerle la unidad en pixeles (top: 103px).

    Si aun asi el de 72px no funciona agregale la propiedad importante algo asi: "top: 72px !important"
     
    A victorcf999 y AngelKrak les gusta esto.
  3. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.464
    Me gusta recibidos:
    674
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    recuerda que CSS significa Hojas de estilo en cascada los estilos los va mostrando de abajo hacia arriba, en este caso para reemplazar los estilos normales por los de movil, necesitan las media queries estar al final del CSS para que tenga mayor prioridad con moviles ;)

    upload_2017-8-15_22-53-47.png
    Código (CSS):
     *{
         margin:0 ;
         padding: 0;
         -webkit-box-sizing:border-box;
         -moz-box-sizing:border-box;
         box-sizing:border-box;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         text-decoration:none;
    }

    html,body{
        width: 100%;
        height: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
    }
    /*### LINKS ###*/
    a:visited {
        color:#f4f4f4;
        text-decoration: none;
    }
    a:hover{
        color:#f4f4f4;
        text-decoration: none;
    }

    /*### BARRA DE NAVEGACION ###*/
    header{
        width: 100%;
        position: fixed;
        background-color:#000;  
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content:space-between;
        padding: 12px 15px 12px 25px;
    }

    header nav a{
        color: #f4f4f4;
        -webkit-transition:all 500ms ease;
        -o-transition:all 500ms ease;
        transition:all 500ms ease;
        padding:5px 15px 5px 15px;
        margin:0px 8px 0px 8px;
    }
    header nav a:hover {
        background: #fff;
        color:#000;
        border-radius:50px;
    }

    #home:hover{
        background: #000;
        color:#000;
        border-radius:50px;
    }
    /*### PROGRESS BAR ###*/
    progress {
      /* Positioning */
      position: fixed;
      left: 0;
      top: 72px;

      /* Dimensions */
      width: 100%;
      height: .25em;

      border: none;

      background-color: transparent;
      color:#871D1F;
    }

    progress::-webkit-progress-bar {
      background-color: transparent;
    }

    .flat::-webkit-progress-value {
      background-color:#871D1F;
    }

    .flat::-moz-progress-bar {
      background-color: #871D1F;
    }

    .single::-webkit-progress-value {
      background-color: transparent;
      background-image: -webkit-linear-gradient(left, transparent, #871D1F);
    }

    .single::-moz-progress-bar {
      background-color: transparent;
      background-image: -moz-linear-gradient(left, transparent, #871D1F);
    }

    .multiple::-webkit-progress-value {
      background-image: -webkit-linear-gradient(-45deg,
                                   transparent 33%, rgba(0, 0, 0, .1) 33%,
                                   rgba(0,0, 0, .1) 66%, transparent 66%),
                          -webkit-linear-gradient(left, green, red);
    }

    .multiple::-moz-progress-bar {
      background-image: -moz-linear-gradient(-45deg,
                                   transparent 33%, rgba(0, 0, 0, .1) 33%,
                                   rgba(0,0, 0, .1) 66%, transparent 66%),
                          -moz-linear-gradient(left, green, red);
    }

    .progress-container {
      width: 100%;
      background-color: transparent;
      position: fixed;
      top: 0;
      left: 0;
      height: .25em;
      display: block;
    }

    .progress-bar {
      background-color: red;
      width: 50%;
      display: block;
      height: inherit;
    }
    /*### FOOTER ###*/
    footer{
        width: 100%;;
        border-top: #f4f4f4 2px solid;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        background-color:#000;
        color:#f4f4f4;
        padding: 30px 0px 30px 0px;
    }
    .foot-links{
        padding-left: 30px;
    }
    .foot-links a{
        margin:0px 10px 0px 10px;
    }
    .foot-texto{
        padding-right:50px;
        text-align: right;
        display: flex;
        flex-direction: column;
    }
    .derechos{
        display:flex;
        flex-direction: row;
    }
    .pointer{
        cursor: pointer;
    }
    @media(max-width:500px){
        .foot-texto{
            flex-flow: column wrap;
        }
        .derechos{
            flex-direction: column;
        }
        #separador{
            visibility:collapse;
            height: 0px;
        }
        #ir_arriba{
            margin-top:20px;
        }
        header{
            flex-flow: column;
        }
        header nav{
            flex-flow:row wrap;  
        }
        header nav a{
            margin: 0px;
        }
        #home{
            margin-bottom: 7px;
        }
        progress{
            top:103px;
        }
    }
    @media(max-width:850px){
        footer{
            flex-flow:column wrap;
            justify-content: center;
            padding: 20px 0px 20px 0px;
        }
        .foot-links{
            padding: 0px;
            margin-bottom: 20px;
        }
        .foot-texto{
            padding: 0px;
            text-align: center;
        }
    }
     
    A Dawud y victorcf999 les gusta esto.
  4. victorcf999

    victorcf999 Nuevo Miembro

    Se incorporó:
    19 de Abril de 2017
    Mensajes:
    29
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ya funciona muchas gracias

    Poniendo la parte del responsive abajo me sigue sin funcionar pero aun asi a partir de ahora lo pongo siempre ahi y asi me evito futuros problemas.

    Ponindo px tampoco me cambia nada, me ha funcionado poniendo el !important.

    Me podeis decir que hace esta propiedad, nunca la habia visto

    Muchas gracias a los dos
     
  5. Kaine

    Kaine Miembro

    Se incorporó:
    6 de Junio de 2016
    Mensajes:
    55
    Me gusta recibidos:
    25
    Puntos de trofeos:
    18
    Género:
    Hombre
    Usalo como ultimo recurso, sobre la propiedad "!important" hace que el estilo tenga mas prioridad por sobre los demas estilos similares
     
    Última modificación: 16 de Agosto de 2017
    A victorcf999 y AngelKrak les gusta esto.
  6. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.464
    Me gusta recibidos:
    674
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    exactamente como dijo @Kaine no es bueno que la uses a menos que sea importante como se especifica ahi, ya que en el futuro puedes tener problemas por esa propiedad, no se si te fijaste pero te pase tu CSS arreglado para que lo reemplazaras por el tuyo y se ve como en las imagenes, solo necesitas borrar la cache para ver los cambios cuando pongas el nuevo CSS ;)
     
    A Dawud y victorcf999 les gusta esto.
  7. victorcf999

    victorcf999 Nuevo Miembro

    Se incorporó:
    19 de Abril de 2017
    Mensajes:
    29
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    :eek::eek::eek::eek::eek::eek::eek:

    AngelKrak no me habia fijado, se me habia olvidado despues de ver que con el !important me funcionaba y de probar a poner todos los @media al final.

    Muchisimas gracias a los dos, un abrazo
     

Comparte esta página