Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Drakaris en 24 Julio 2017, 00:03 am


Título: Pongo dos estilos css con <link> y se me mezclan los estilos.solucion?
Publicado por: Drakaris en 24 Julio 2017, 00:03 am
Hola tengo este código :
Código:
<!DOCTYPE html>
<?php include_once('functions.php'); ?>
<script>
  function mensaje1(){
    alert("Solo para ADMINISTRADORES.\nPara añadir un enlace a la tabla, tiene que ir a su curso y grupo.");
  }
</script>
<style>
  .legenda_calendario {
    background: none;
  }

  .titulo {
    border-radius: 5px;
    color: white;
    text-shadow: 3px 3px 3px #8A4B08;
    background: linear-gradient(#FE9A2E,#FF8000,#DF7401);
    font-family: segoe script;
  }
  .subtitulo {
    border-radius: 5px;
    color: white;
    text-shadow: 3px 3px 3px #8A4B08;
    background: linear-gradient(#FE9A2E,#FF8000,#DF7401);
    font-family: segoe script;
  }
  .td {
    border-radius: 5px;
    background: linear-gradient(#FFBF00,#FACC2E,#F7D358);
    text-align: center;
    font-family: segoe script;
  }
</style>
<style>
  .hr {
    height: 60px;
    width: 100%;
    background: url('imagenes/lapiz separador 1.png') no-repeat center;
    border: none;
    background-size: 1100px;
  }
</style>
<style>
    .image1{
        cursor: pointer;
        width: 400px;
    }
    .image1:hover{
        -webkit-filter: brightness(60%);
        -o-filter: brightness(60%);
        -ms-filter: brightness(60%);
        -webkit-transition: 700ms;
        -o-transition: 700ms;
        -ms-transition: 700ms;
        transition:700ms;
    }
</style>
<style>
    .display{
        position: fixed; 
        right: 10px;
        bottom: -10px;
        width: 120px;
        height: 45px;
        background: rgba(139,139,139,0.9);
        border-radius: 10px;
        font-size: 20px;
        font-family: segoe script;
        src: url("DS-DIGIT.TTP") format("truetype");
        text-align: center;
    }
</style>
<style>  
    .red{
        position: fixed;
        top: 200px;
        z-index: 100;
        left: 0;
    }
    .social div a{
        color: white;
        font-size: 25px;
        text-align: center;
        width: 30px;
        height: 30px;
        padding: 10px 10px 10px 10px;
        display: inline-block;
        text-decoration: none;
    }
    .facebook{
        background: #3b5998;
        border-radius: 0 1rem 0 0;
    }
    .youtube{
        background: #bb0000;
    }
    .googleplus{
        background: #dd4b39;
    }
    .correo{
        background: #666666;
    }
    .telf{
        background: #FE9A2E;
    }
    .mensaje{
        background: skyblue;
        border-radius: 0 0 1rem 0;
        
    }
    .social a:hover{
        width: 70px;
        border-radius: 0 1rem 1rem 0;
        -webkit-transition: 600ms;
        -o-transition: 600ms;
        -ms-transition: 600ms;
    }
    .social div:hover{
        width: 10px;
    }
</style>
<style>
    .btn1{
        background: transparent;
        border: transparent;
    }
</style>
<style>
  .btn {
    background: linear-gradient(#F5D0A9,#F7BE81,#FAAC58,#FE9A2E,#FF8000);
    border: transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    margin: 5px;
  }
 .btn:hover {
   background: linear-gradient(#A9A9F5,#8181F7,#5858FA,#2E2EFE,#0000FF);
  }
</style>
<style>
body::-webkit-scrollbar-track
{
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
 background-color: rgb(191,191,191);
}
body::-webkit-scrollbar
{
    width: 12px;
    background-color: none;
    border: none;
}

body::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: orange;
}
</style>
<style>
    .image{
        width: 500px;
        cursor: pointer;
    }
    .image:hover{
        -webkit-filter: brightness(60%);
        -o-filter: brightness(60%);
        -ms-filter: brightness(60%);
        -webkit-transition: 700ms;
        -o-transition: 700ms;
        -ms-transition: 700ms;
        transition:700ms;
    }
</style>
<html>
  <head>
    <meta charset="UTF-8">
      <title> 1 ESO A</title>
      <link rel="stylesheet" href="estilos3.css">
      <link rel="stylesheet" href="style.css">
      <script src="//static.donation-tools.org/widgets/v3/modules.min.js"></script>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="reloj.js"></script>
      <link rel="icon" type="image/ico" href="imagenes/logo_GTE.ico">
  </head>
<script>
$(document).ready(function(){
    var altura = $('.menu').offset().top;
  
    $(window).on('scroll', function(){
        if ( $(window).scrollTop() > altura ){
            $('.menu').addClass('menu-fixed');
        } else {
            $('.menu').removeClass('menu-fixed');
        }
    });

});
</script>
<body style="background-image: url(imagenes/stackofmagazines.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover;" onload="reloj()">
<div class="contenedor">
            <a href="http://www.ies-calvia.260mb.net" style="text-decoration:none;"><img src="imagenes/logo_GTE.png" style="position: absolute; height: 100px; width: 100px"></a>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <nav class="menu">
             <ul>
  <li class="dropdown">
    <a href="http://ies-calvia.260mb.net/GTE/ESO/1_eso" class="dropbtn">1 ESO</a>
    <div class="dropdown-content">
      <a href="#">1º A</a>
      <a href="#">1º B</a>
      <a href="#">1º C</a>
      <a href="#">1º D</a>
      <a href="#">1º E</a>
      <a href="#">1º F</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="http://ies-calvia.260mb.net/GTE/ESO/2_eso" class="dropbtn">2 ESO</a>
    <div class="dropdown-content">
      <a href="#">2º A</a>
      <a href="#">2º B</a>
      <a href="#">2º C</a>
      <a href="#">2º D</a>
      <a href="#">2º E</a>
      <a href="#">2º F</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="http://ies-calvia.260mb.net/GTE/ESO/3_eso" class="dropbtn">3 ESO</a>
    <div class="dropdown-content">
      <a href="#">3º A</a>
      <a href="#">3º B</a>
      <a href="#">3º C</a>
      <a href="#">3º D</a>
      <a href="#">3º E</a>
      <a href="#">3º F</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="http://ies-calvia.260mb.net/GTE/ESO/4_eso" class="dropbtn">4 ESO</a>
    <div class="dropdown-content">
      <a href="#">4º A</a>
      <a href="#">4º B</a>
      <a href="#">4º C</a>
      <a href="#">4º D</a>
      <a href="#">4º E</a>
      <a href="#">4º F</a>
    </div>
</li>
<li style="float:right;"><a href="http://www.ies-calvia.260mb.net"><i class="fa fa-home" style="font-size:25px;"></i></a></li><li style="float:right;"><a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank">¿Quienes somos?</a></li>
</ul>
            </nav>
    <div class="contenido">
      <br>
      <br>
      <center><font face="segoe script" size="8" color="#666666">1 ESO A</font></center>
      <div class="calendar_div">
        <?php echo getCalender(); ?>
      </div>
      <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <table align="center" class="legenda_calendario" height="20" width="700">
      <th colspan="2" class="subtitulo">Inicio de curso y vacaciones</th>
      <th colspan="3" class="titulo">otros</th>
          <tr>
            <td class="td">Inicio de curso:&nbsp;<canvas height="20" width="20" style="background-color:#F78181; border-radius:5px;"></canvas></td>
            <td class="td">Vacaciones de navidad:&nbsp;<canvas height="20" width="20" style="background-color:#81F781; border-radius:5px;"></canvas></td>
            <td class="td">Hoy:&nbsp;<canvas height="20" width="20" style="background-color:#DDDDDD; border-radius: 5px;"></canvas></td>
          </tr>
          <tr>
           <td class="td">Vacaciones de Pascua:&nbsp;<canvas height="20" width="20" style="background-color:#F2F5A9; border-radius:5px;"></canvas></td>
           <td class="td">Dias festivos:&nbsp;<canvas height="20" width="20" style="background-color:#E2A9F3; border-radius:5px;"></canvas></td>
           <td class="td">eventos:&nbsp;<canvas height="20" width="20" style="background-color:#B9FFFF; border-radius:5px;"></canvas></td>
          </tr>
    </table>
      <div class="red">
            <div class="social">
                <div><a href="https://www.facebook.com/ies.calvia" target="_blank" class="fa fa-facebook-square facebook"></a></div>
                <div><a href="https://www.youtube.com/user/iescalviablog" target="_blank" class="fa fa-youtube-play youtube"></a></div>
                <div><a href="https://plus.google.com/114947718295379948989" target="_blank" class="fa fa-google-plus googleplus"></a></div>
                <div><a href="mailto:iescalvia@gmail.com" class="fa fa-envelope correo"></a></div>
                <div><a href="tel:+34971690229" class="fa fa-volume-control-phone telf" title="+34 971690229"></a></div>
                <div><a href="fax:+34971694931" class="fa fa-fax mensaje" title="+34 971694931"></a></div>
            </div> 
    </div>
    <div class="display" id="pantalla" style="z-index: 100;"></div>
            <footer>
        <div style="bottom:500px;">
            <a href="http://moodle2.iescalvia.com/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/moodle.png" style="position: absolute; height: 60px; width: 100px; left: 130px; bottom: -590px;" title="Moodle">
            </a>
            <a href="https://web2.alexiaedu.com/ACWeb/LogOn.aspx?key=WRcKBnV4m3M%3d" target="_blank" style="text-decoration: none;">
                <img src="imagenes/Alexia1.png" style="position: absolute; height: 65px; width: 65px; left: 40px; bottom: -590px;" title="Alexia">
            </a>
            <a href="https://www.bachilleratoartistico-iescalvia.com/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/batart.png" style="position: absolute; height: 60px; width: 60px; left: 250px; bottom: -590px;" title="Bachillerato art&iacute;stico">
            </a>
            <a href="http://iescalviablog.blogspot.com.es/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/pillospress.png" style="position: absolute; height: 70px; width: 180px; left: 330px; bottom: -600px;" title="Pillo's press">
            </a>
            <a href="http://www.cucalvia.com/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/CUC.png" style="position: absolute; height: 60px; width: 70px; left: 530px; bottom: -590px;" title="CUC">
            </a>
            <a href="http://weib.caib.es/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/weib.png" style="position: absolute; height: 60px; width: 150px; left: 600px; bottom: -590px;" title="weib">
            </a>
            <a href="http://iescalvia.blogspot.com.es/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/bloggeries.png" style="position: absolute; height: 60px; width: 150px; left: 40px; bottom: -690px;" title="Informaci&oacute;n del IES Calvi&aacute;">
            </a>
            <a href="http://www.erasmusplus.gob.es/" target="_blank" style="text-decoration: none;">
                <img src="imagenes/erasmus.png" style="position: absolute; height:60px; width: 160px; left: 200px; bottom: -690px;" title="Erasmus">
            </a>
            <a href="https://www3.caib.es/xestib/xestib/menu/iniciGestio" target="_blank" style="text-decoration: none;">
                <img src="imagenes/GESTIB2.0.jpg" style="position: absolute; height:50px; width: 160px; left: 380px; bottom: -690px;" title="GESTIB">
            </a>
        </div>
        <font face="segoe script" size="5" style="position:absolute; bottom:-650px; left:800px;">
            email:<a href="mailto:iescalvia@gmail.com" target="_blank">iescalvia@gmail.com</a> 
            <br>
            tel: <a href="tel:+34971690229" target="_blank">971690229</a> 
            <br>
            fax: <a href="fax:+34971694931" target="_blank">971694931</a> 
        </font>
        <a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank" style="text-decoration: none;">
            <button class="btn" style="position: absolute; left: 1100px; bottom: -630px;"><font face="segoe script" size="3">&nbsp;&iquest;Quienes somos?</font>&nbsp;&nbsp;<i class="fa fa-users" style="font-size: 30px; color: blue;"></i>&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </a>
        <a href="guia.pdf" download="guia.pdf" style="text-decoration: none;">
            <button class="btn" style="position: absolute; left: 1100px; bottom: -670px;">
                <font face="segoe script" size="3">&nbsp;Gu&iacute;a</font>&nbsp;<i class="fa fa-download" style="font-size: 30px; color: blue;"></i>&nbsp;&nbsp;&nbsp;&nbsp;
            </button>
        </a>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <a href="http://www.ies-calvia.260mb.net/GTE/" style="text-decoration: none;">
            <button class="btn1" style="cursor: pointer; z-index: 100; left: 50%;" title="Volver"><i class="fa fa-arrow-left" style="font-size: 40px; color: orange;"></i></button>
        </a>
      </footer>
    </div>
</body>
</html>


Puse dos <link>:
     
Código:
<link rel="stylesheet" href="estilos3.css">
      <link rel="stylesheet" href="style.css">

Que es de elementos diferentes; uno, es el calendario y el otro es un menu desplegable scroll.

Y abría una manera para solucionar esto?

Gracias

Título: Re: Pongo dos estilos css con <link> y se me mezclan los estilos.solucion?
Publicado por: ivancea96 en 24 Julio 2017, 00:14 am
Si te refieres a que se aplican a elemntos que no son, entonces los CSS están mal formados. Los selectores deben ser lo más estrictos posible. Si tuvieras por ejemplo una tabla con clase "calendario" que tenga celdas con clase "dia", no basta con poner ".dia { ... }". Tienes que poner, por ejemplo, ".calendario .dia { ... }".

Si tu problema es otro, no lo entendí. ¿Qué es lo que se mezcla exactamente?

Título: Re: Pongo dos estilos css con <link> y se me mezclan los estilos.solucion?
Publicado por: Drakaris en 25 Julio 2017, 11:25 am
Cita de: ivancea96 en 24 Julio 2017, 00:14 am
Si te refieres a que se aplican a elemntos que no son, entonces los CSS están mal formados. Los selectores deben ser lo más estrictos posible. Si tuvieras por ejemplo una tabla con clase "calendario" que tenga celdas con clase "dia", no basta con poner ".dia { ... }". Tienes que poner, por ejemplo, ".calendario .dia { ... }".

Si tu problema es otro, no lo entendí. ¿Qué es lo que se mezcla exactamente?

Gracias por la respuesta, ese fue el problema, llamaba a
Código:
 li a {...}
en el menu despleglable pero en el calendario también hay <li> y <a> y los llamaba a todos los <li> y <a> que había en la página por eso se me mezclaban.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines