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

Solucionado Se puede aislar un css con otro?

Tema en 'HTML y CSS' comenzado por Elias404, 18 de Junio de 2017.

Tags:
  1. Elias404

    Elias404 Nuevo Miembro

    Se incorporó:
    27 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buenas hago este tema porque me paso un problema con mis css , lo que pasa que al momento de abrir la pagina de prueba 2 css estan como interfiriendose entre y si saco uno funciona el otro y asi estube viendo el tema de las clases en los div pero sigue igual , los css que se interfieren son un menu y un slider , espero que me ayuden
    1.PNG 2.PNG
     

    Archivos adjuntos:

    • 1.PNG
      1.PNG
      Tamaño de archivo:
      865,1 KB
      Visitas:
      1
    • 2.PNG
      2.PNG
      Tamaño de archivo:
      600,8 KB
      Visitas:
      1
    Última modificación: 18 de Junio de 2017
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    o_Oo_O si son estilos separados, esos estilos lo diseñaste tu mismo?? debes de verificar que las clases en el principales del css menu no afecten a los estilo del slider... ya que mencionas que lo checaste pero siguen igual .. Igual que?? tiene una misma clase en menú en slider osea menú existe container y en slider igual existe la clase container o_Oo_O ...
    Pero observando de acuerdo a las dos imagen que defines sería mas notorio que mostraras como tienes las hojas de estilos...
     
    A AngelKrak le gusta esto.
  3. Elias404

    Elias404 Nuevo Miembro

    Se incorporó:
    27 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    El codigo no lo hecho yo pero lo e investigado bien pero se que tiene algo que ver el menu





    Código (CSS):

    /*_________________________________________________________________

                          Este es el slider
    ____________________________________________________________________*/



    .slider {
      margin: 0 auto;
      max-width: 940px;
    }

    .slide_viewer {
      height: 340px;
      overflow: hidden;
      position: relative;
    }

    .slide_group {
      height: 100%;
      position: relative;
      width: 100%;
    }

    .slide {
      display: none;
      height: 100%;
      position: absolute;
      width: 100%;
    }

    .slide:first-child {
      display: block;
    }

    .slide:nth-of-type(1) {
      background: #D7A151;
    }

    .slide:nth-of-type(2) {
      background: #F4E4CD;
    }

    .slide:nth-of-type(3) {
      background: #C75534;
    }

    .slide:nth-of-type(4) {
      background: #D1D1D4;
    }

    .slide_buttons {
      left: 0;
      position: absolute;
      right: 0;
      text-align: center;
    }

    a.slide_btn {
      color: #474544;
      font-size: 42px;
      margin: 0 0.175em;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
    }

    .slide_btn.active, .slide_btn:hover {
      color: #428CC6;
      cursor: pointer;
    }

    .directional_nav {
      height: 340px;
      margin: 0 auto;
      max-width: 940px;
      position: relative;
      top: -340px;
    }

    .previous_btn {
      bottom: 0;
      left: 100px;
      margin: auto;
      position: absolute;
      top: 0;
    }

    .next_btn {
      bottom: 0;
      margin: auto;
      position: absolute;
      right: 100px;
      top: 0;
    }

    .previous_btn, .next_btn {
      cursor: pointer;
      height: 65px;
      opacity: 0.5;
      -webkit-transition: opacity 0.4s ease-in-out;
      -moz-transition: opacity 0.4s ease-in-out;
      -ms-transition: opacity 0.4s ease-in-out;
      -o-transition: opacity 0.4s ease-in-out;
      transition: opacity 0.4s ease-in-out;
      width: 65px;
    }

    .previous_btn:hover, .next_btn:hover {
      opacity: 1;
    }

    @media only screen and (max-width: 767px) {
      .previous_btn {
        left: 50px;
      }
      .next_btn {
        right: 50px;
      }
    }
    Código (CSS):
    /*_________________________________________________________________

                          Este es el menu
    ____________________________________________________________________*/



    /*_________________________________________________________________

                          $RESET
    ____________________________________________________________________*/

    *, *:before, *:after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /*_________________________________________________________________

                          $ESTILOS GENERALES
    ____________________________________________________________________*/

    ul {
      list-style-type: none;
    }

    a, label {
      display: block;
      font-size: 1.25rem;
      text-decoration: none;
      color: #E5E5E5;
      padding: 1rem 1rem 1rem 3rem;
      cursor: pointer;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      border-left: 4px solid rgba(255, 255, 255, 0);
    }
    a:hover, label:hover {
      color: #FFB503;
      border-left: 4px solid #ffbc1d;
    }

    .chk-nav {
      display: none;
    }

    /*_________________________________________________________________

                          $NAV <nav class"nav"></nav>
    ____________________________________________________________________*/

    .nav {
      width: 100%;
      position: fixed;
      z-index: 10;
    }

    /*_________________________________________________________________

                          $NAVBAR <ul class"nav-bar"></ul>
    ____________________________________________________________________*/

    .navbar {
      width: 50%;
    }
    .navbar .sub-nav {
      display: block;
    }

    .sub-nav a {
      padding-left: 1rem;
      font-size: 1rem;
    }

    .navbar > li {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      position: relative;
    }

    /*_________________________________________________________________

    $ESTILOS PARA MODIFICAR EL LABEL SECUNDARIO DEL SUBMENU
    ____________________________________________________________________*/

    .navbar .fa {
      position: absolute;
      left: 1rem;
    }

    .lbl-nav:after {
      content: "\25BC";
      font-size: 1rem;
      position: absolute;
      width: 100%;
      text-align: right;
      left: 0;
      padding-right: .75rem;
      line-height: 1.5rem;
    }

    /*_________________________________________________________________

    $ESTILOS PARA MODIFICAR EL LABEL PRINCIPAL O ICONO DE HAMBURGUESA
    ____________________________________________________________________*/

    label[for="btn-navbar"] {
      padding: .5rem 1rem .5rem 1rem;
      font-size: 2rem;
      text-align: left;
      color: #E5E5E5;
      background-color: #252525;
    }
    label[for="btn-navbar"]:hover {
      color: #E5E5E5;
      border-left: 4px solid transparent;
    }

    /*_________________________________________________________________

    $ESTILOS PARA ESCONDER LA LISTA PRINCIPAL DEL MENU
    ____________________________________________________________________*/

    .navbar {
      margin-left: -100%;
      height: 100vh;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
      background-color: #252525;
    }

    .chk-nav:checked ~ .navbar {
      margin-left: 0;
    }

    /*_________________________________________________________________

    $ESTILOS PARA ESCONDER LOS SUBMENUS
    ____________________________________________________________________*/

    .navbar .sub-nav {
      display: none;
    }

    .chk-nav:checked ~ .sub-nav {
      display: block;
    }

    /****************_________________________________________________________________*******************

                                    $ESTILOS PARA DESKTOP MEDIAQUERYS
    ****************____________________________________________________________________*****************/

    @media all and (min-width: 48rem) {
      a, label {
        display: block;
        padding: 1rem 1.25rem;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }

               /*_________________________________________________________________

                $ESTILOS PARA NAVBAR
              ____________________________________________________________________*/

      .navbar {
        max-width: 1200px;
        width: 100%;
        height: auto;
        display: table;
        table-layout: fixed;
        margin: auto;
      }

      .navbar > li {
        display: table-cell;
      }

      .chk-nav:checked ~ .navbar {
        margin: auto;
      }

              /*_________________________________________________________________

                $ESTILOS PARA ESCONDER EL ICONO DE HAMBURGUESA
              ____________________________________________________________________*/

      label[for="btn-navbar"] {
        display: none;
      }

              /*_________________________________________________________________

              $ESTILOS PARA el SUBMENU
              ____________________________________________________________________*/

      .navbar .sub-nav {
        display: none;
      }

      .navbar > ul > li {
        postion: relative;
      }

      .chk-nav:checked ~ .sub-nav {
        display: block;
      }

      .navbar .sub-nav {
        width: 100%;
        background-color: #222;
        position: absolute;
      }

      .sub-nav a {
        font-size: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
      }

              /*_________________________________________________________________

                      $ESTILOS PARA LOS ICONOS
                ____________________________________________________________________*/

      .navbar .fa {
        position: static;
        padding-right: .3rem;
      }

      .lbl-nav:after {
        top: 0;
        height: 100%;
        line-height: 3.5rem;
      }

            /*_________________________________________________________________

                      $ESTILOS PARA EL MENU PRINCIPAL
             ____________________________________________________________________*/

      .navbar > li {
        position: relative;
        border-top: 4px solid #FFB503;
      }

      .navbar > li > a:hover, label:hover {
        border-left: 4px solid transparent;
      }
    }
    /*_________________________________________________________________

      $ESTILOS PARA EL SECTION  ESTO NO TIENE NADA QUE VER CON EL MENU
    ____________________________________________________________________*/

    section {
      width: 90%;
      padding: 3.5rem;
      margin: auto;
      color: #E5E5E5;
      text-align: center;
      -webkit-transition: all .4s ease;
      transition: all .4s ease;
    }
    section small {
      display: block;
      padding-bottom: 1rem;
      font-size: 1rem;
    }
    section span {
      color: red;
      font-size: 1.5rem;
    }
     
     
  4. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Puede ser que falle por unos elementos mal definido, no tan definido en sí... pero hay que implementar los estilos generales que tendrá un elemento por ejemplo en el <a> aplica un display block al igual como se muestra en la siguiente línea.

    Sin embargo en tu slider implementas unos elemento <a> con la clase slide_btn en el cual si no me equivoco son lo botones circulares, pero de acuerdo a la imagen se implementa debajo de uno los botones, y en el siguiente code de estilo no defines la propiedad para corregir los botones ["elementos a"]... Esto se debe a la propriedad display: block, el cual como su nombre lo índica se encargar de ajustar cada elemento al 100% colocando un elemento a debajo de cada uno así como lo botones slider circulares...


    y para corregir esa parte debes utilizar inline-block --0-- inline-flex para poder colocar esos botones a lado de cada uno como lo muestra en la segunda imagen...
    Debes de poner los estilos menu.css primero antes de colocar el slider... ya que menu.css contienes la siguientes porpiedades, el cual lo que hace es limpiar todos los elementos antes y despues ...

    Pero mas correcto es que en un solo archivo colocara todo tu css...
    NOTA: existe un sitio codepen.io en el cual puede subir tu code y visualizar un poco mas el detalle de tu problema...
     
  5. Elias404

    Elias404 Nuevo Miembro

    Se incorporó:
    27 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Gracias ahora entiendo pero ahora se me ve asi mire al pasar el mouse a los circulos para elegir la imagen interfiere el hover del css del menu


    Captura de pantalla (61).png
    Vuelve a la normalidad o se ve bien cuando el responsive empieza actuar

    123.PNG
     
    Última modificación: 18 de Junio de 2017
  6. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Eso se debe a que defines el hover al elemento <a> como principal ... te mencione que debes de analizar y estructurar tu css según a la estructura de tu HTML... por ejemplo si te fijas en el siguiente ejemplo... En el cual debes de identificar que propiedades css deben ser eficaz a un elemento, el cual en este caso es elemento <a>

    HTML:
    <section>
      <div class=menu>
        <a href=#>link1</a>
        <a href=#>link2</a>
        <a href=#>link3</a>
      </div>
       <a href=#>link4</a>
    </section>
    Si defino a:hover el border que tienes establecido... pero ese border solo debe afectar a los elemento <a> dentro de la clase menu pero hacerlo como lo tienes es un error... ya que todos los elemento tendrá ese border... hay diversas opciones de poder solucionarlo...
    1. Una de ellas es que defina la ruta de tus elementos el cual es una buena practica para aprender a dar estilos... no poner directamente los elementos ya que puede perjudicar a todos los elementos... o_Oo_O aplica igual para las clases...
      Por ejemplo:
      section > .menu a:hover {
      color: #333;
      border-left: 2px solid;
      }
      Al aplicar la ruta puedes evitar el conflicto en otros elemento <a>
    2. Otra opción es que definas las siguientes propiedades:
      .btn_slider{
      border: none // define que no debe tener la propiedad border...
      }
    Las propiedades css son cascadas por ejemplo si defino las propiedades siguientes al elemento <a>:

    Código (Text):
    a {
    text-decoration: none;
    color: #333;
    font: oxigeny 16px;
    }
    El cual defino que todos los elementos <a> tendrá esas propiedades, y esto es para evitar ponerlo mas adelante... Pero una buena escritura CSS es definirlo las rutas al elemento que tenga ese cambio...
     
  7. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    825
    Me gusta recibidos:
    399
    Puntos de trofeos:
    63
    Género:
    Hombre
    Si, se puede usar shadow dom lo cual encapsula cada css, y aunque tengas dos css con el mismo nombre de clase o id serán dos css distintos para cada shadow dom, ahora esto es estudiarlo o usar Angular o hacer lo que dice Dawud, pero el SHADOW DOM es el futuro.

    Shadow Dom permite:
    • DOM aislado: El DOM de un componente es autocontenido (p.ej., document.querySelector() no muestra nodos en el shadow DOM del componente).
    • CSS con ámbito: la CSS definida dentro de shadow DOM está acotado al DOM. Las reglas de estilo no filtran y los estilos de página no se infiltran.
    • Composición: Diseña una API declarativa basada en lenguaje de marcado para tu componente.
    • Simplifica CSS: el DOM dentro del ámbito significa que puedes usar simples selectores de CSS, nombres de id/clase más genéricos, y no preocuparte por conflictos de nombres.
    • Productividad: piensa en apps en fragmentos del DOM en lugar de una gran página (global).

    MAS INFO CLICAME AQUÍ.

    Att: Gammafp, técnico superior en web.
     
    A Maddenamy, Faustotnc y Dawud les gusta esto.
  8. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    659
    Me gusta recibidos:
    502
    Puntos de trofeos:
    93
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
  9. Elias404

    Elias404 Nuevo Miembro

    Se incorporó:
    27 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Muchas gracias me han ayudado mucho jeje
     

Comparte esta página