Menú

Mostrar Mensajes

Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.

Mostrar Mensajes Menú

Mensajes - Drakaris

Páginas 1 ... 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
#191
Desarrollo Web / Re: ¿En cada actualización del móvil se cambia la resolución de pantalla?
12 Octubre 2017, 10:50 AM
Aquí tiene, tengo media querys css y media querys JS
Código [Seleccionar]

<html>
<head>
<!-- - - - - -TABLET- - - - - -->
<style>
@media screen and (max-width: 768px){
  .flex-caption div img{
      width: 350%;
      left: 41.6%;
  }
   
  *{
    box-sizing: border-box;
  }
  .gridwrapper a .alexia{
    position: relative;
    height: 13vw;
    top: 1vw;
  }
.gridwrapper a .moodle{
   position: relative;
  height: 13vw;
  top: 1vw;
}
.gridwrapper a .batart{
   position: relative;
  height: 15vw;
  left: 1vw;
  top: 1vw;
}
.gridwrapper a .pillospress{
  position: relative;
  height: 14vw;
  left: 2vw;
  top: 1vw;
}
.gridwrapper a .CUC{
  position: relative;
  height: 15vw;
  left: 3vw;
  top: 1vw;
}
.gridwrapper a .weib{
  position: relative;
  height: 15vw;
  left: 2.5vw;
  top: 0.5vw;
}
.gridwrapper a .bloggeries{
  position: relative;
  height: 15vw;
  top: -15vw;
  left: 55vw;
}
.gridwrapper a .erasmus{
  position: relative;
  height: 15vw;
  top: 1vw;
  left:-35vw;
}
.gridwrapper a .GESTIB2{
  position: relative;
  height: 12vw;
  top: 1vw;
  left:43vw;
  top:-13vw;
}
.gridwrapper a .mail{
  color: skyblue;
  position: relative;
  bottom: -15%;
  font-size: 15vw;
  left: -37%;
}
.gridwrapper a .telefono{
    color: orange;
    position: relative;
    font-size: 15vw;
    bottom: -15%;
    left: -17%;
}
.gridwrapper a .fax1{
    color: green;
    font-size: 15vw;
    position: relative;
    top: 14.7%;
    left: 3%;
}
.gridwrapper a .equipo{
  position: relative;
  color: blue;
  font-size: 15vw;
  bottom: -20%;
  left: 26%;
}
.gridwrapper a .descarga{
  position: relative;
  color: red;
  font-size: 15vw;
  bottom: -20%;
  left: 47%;
}
.gridwrapper .social div a{
  color: white;
  font-size: 4vw;
  text-align: center;
  width: 200%;
  height: 0%;
  padding: 40% 0% 40% 0%;
  display: inline-block;
  text-decoration: none;
}
}
</style>
<!-- - - - - - - - - - - - - - -->
<!-- - - - - -MÓVIL- - - - - - -->
<style>
@media screen and (max-width: 600px){
  .flex-caption .logos-iescalvia .ies-calvia{
    left: 2vw;
    width: 10vw;
    display: none;
  }
  .flex-caption .logos-iescalvia .Aenor{
    left: 2vw;
    width: 10vw;
    display: none;
  }
  .flex-caption .logos-iescalvia .CERTIFIED-IQNet{
    width:10vw;
    left:2vw;
    display: none;
  }
  .portadam{
    width: 130%;
  }
  .portadam div{
    width:  100%;
    position: relative;
    top: all;
  }
  .flex-caption div{
    width:100%;
    left:0%;
    top: 10%;
    position: absolute;
  }
  .flex-caption .logo_page img{
    width:100%;
  }
  .gridwrapper a .alexia{
    position: relative;
    height: 33vw;
    top: 1vw;
  }
  .gridwrapper a .moodle{
    position: relative;
    height: 30vw;
    top: 1vw;
  }
  .gridwrapper a .batart{
    position: relative;
    height: 30vw;
    top: 1vw;
    left: 5%;
  }
  .gridwrapper a .pillospress{
    top: 2%;
    height: 30vw;
  }
  .gridwrapper a .CUC{
    top: 2%;
    height: 30vw;
  }
  .gridwrapper a .weib{
    position: relative;
    height: 25vw;
    top: 2%;
  }
  .gridwrapper a .GESTIB2{
    position: relative;
    height: 16vw;
    top: -16%;
    left: 50%;
  }
  .gridwrapper a .erasmus{
    height: 25vw;
    top: 3%;
    position: relative;
    left: -46%;
  }
  .gridwrapper a .bloggeries{
    height: 25vw;
    top: 3%;
    position: relative;
    left: 50%;
  }
  .gridwrapper a .mail{
    color: skyblue;
    position: relative;
    bottom: -15%;
    font-size: 20vw;
    left: -38%; 
  }
  .gridwrapper a .telefono{
    color: orange;
    position: relative;
    font-size: 20vw;
    bottom: -15%;
    left: -18%;
  }
  .gridwrapper a .fax1{
    color: green;
    font-size: 20vw;
    position: relative;
    top: 14.7%;
    left: 1%;
  }
  .gridwrapper a .equipo{
    position: relative;
    color: blue;
    font-size: 20vw;
    bottom: -20%;
    left: 27%;
  }
  .gridwrapper a .descarga{
    position: relative;
    color: red;
    font-size: 25vw;
    bottom: -20%;
    left: 46%;
  }
  .gridwrapper .social div a{
    color: white;
    font-size: 8vw;
    text-align: center;
    width: 200%;
    height: 0%;
    padding: 20% 0% 20% 0%;
    display: inline-block;
    text-decoration: none;
  }
}
</style>
<!-- - - - - - - - - - - - - - -->
<style>
    *{
        box-sizing: border-box;
    }
</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>
<script>
    function cambiarmapa() {
        cambiarcalles = document.getElementById("mapa_sitio");
        cambiarcalles.setAttribute("src","imagenes/mapa_iescalvia_calles.jpg");
        cambiarenlace = document.getElementById("url");
        cambiarenlace.setAttribute("href","http://ies-calvia.260mb.net/imagenes/mapa_iescalvia_calles.jpg");
        cambiarenlace_googlemaps = document.getElementById("url_googlemaps");
        cambiarenlace_googlemaps.setAttribute("href","https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es")
    }
    function cambiarsatelite() {
        cambiar_satelite = document.getElementById("mapa_sitio");
        cambiar_satelite.setAttribute("src","imagenes/mapa_iescalvia_satelite.jpg");
        cambiar_enlace = document.getElementById("url");
        cambiar_enlace.setAttribute("href","http://ies-calvia.260mb.net/imagenes/mapa_iescalvia_satelite.jpg");
        cambiarenlace_googlemaps1 = document.getElementById("url_googlemaps");
        cambiarenlace_googlemaps1.setAttribute("href","https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,1067m/data=!3m1!1e3!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es");
    }
</script>
<style>
    .btn1{
        background: transparent;
        cursor: pointer;
        border: none;
    }
</style>
<style type="text/css">
    .diseño_franja{
        position: relative;
        height: 60%;
        width:1366px;
        bottom: -20%;
        background-color: white;
        left: -8px;
    }
</style>
<style>
    .red{
        position: fixed;
        top: 200px;
        z-index: 100;
        left: 0;
    }
    .social div a{
        color: white;
        font-size: 1.5vw;
        text-align: center;
        width: 200%;
        height: 0%;
        padding: 30% 0% 30% 0%;
        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 a:hover{
        width: 320%;
    }
</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 type="text/css">
    .diseno_franja{
        position: relative;
        height: 60%;
        width:1242px;
        bottom: -20%;
        background-color: white;
        left: -8px;
    }
</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>
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
</style>
<title>G.T.E</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="imagenes/logo_GTE.ico">
<link rel="stylesheet" type="text/css" href="slider13.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-flexslider.js" type="text/javascript"></script>
<script src="jquery-flexslider-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    if (window.matchMedia("(max-width: 768px)").matches){
      $("#header").remove();
      logo123 = document.getElementById("logoGTE");
      logo123.setAttribute("style","width:60%; top:1vh; left:20%; position:absolute;");
      //cambiar portada para tablet y dimensiones
      portada = document.getElementById("portada1");
      portada.setAttribute("src","imagenes/portada_movil.jpg");
      dimensionesY = document.getElementById("portada1");
      dimensionesY.setAttribute("style", "height:100%;");
      //cambiar fondo para tablet
    fondo12 = document.getElementById("fondo1");
    fondo12.setAttribute("style","background-image: url('imagenes/fondo_movil.jpg'); background-repeat:no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; background-color:#F5ECCE;");
    //Agrandar el título y cambiar su posición
    title = document.getElementById("titulo");
    title.setAttribute("style","width:83.33%; left:9.5%; position:absolute; top:65%;");
    //Agrandar botón de entrada
    enter = document.getElementById("entry");
    enter.setAttribute("style","font-size: 15vw; left: 46%; position: absolute; top: 78%; color: #FFBF00; cursor:pointer;");
    //Cambiar medida del footer
    pie = document.getElementById("footer");
    pie.setAttribute("style","height: 110vw;");
    //enlace dirección
    $("#contactos_div").append("<a href='https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es' target='_blank' style='color: black; text-decoration: none;'><font face='segoe script' color='#666666' style='bottom:3vmin; position: absolute; left:10%; font-size:4vw;' id='address1'>IES Calvi&aacute;. Avda Son Pillo 1.07180</font></a>");
  }
  if (window.matchMedia("(max-width: 600px)").matches){
    //ajustar el fondo de pantalla al móvil
    fondo12 = document.getElementById("fondo1");
    fondo12.setAttribute("style","background-image: url('imagenes/fondo_movil.jpg'); background-repeat:no-repeat; background-position: center center; background-attachment: fixed; background-size: 200%; background-color:#F5ECCE;");
    //ajustar la portada al móvil
    dimensionesY = document.getElementById("portada1");
    dimensionesY.setAttribute("style", "height:100%;");
    //Cambiar el footer
    foot = document.getElementById("footer");
    foot.setAttribute("style","width:130vw; height:160vh;");
    //Modificar el texto "contactos" para móvil
    contact = document.getElementById("contacts");
    contact.setAttribute("style","bottom:105vmin; position: absolute; left:30%; font-size:16vw;");
    //Modificarla dirección del instituto para móvil
    address2 = document.getElementById("address1");
    address2.setAttribute("style","bottom:5vmin; position: absolute; left:10%; font-size:9vw;");
}
});
</script>
<style>
* {
    box-sizing:border-box;
}
.gridwrapper {
    overflow:auto;
    position:relative;
    height:250px;
}
.gridwrapper .iescalvia{
  width: 10%;
}
.gridwrapper .aenor{
  height: 7vw;
  position: relative;
  left: 1%;
}
.gridwrapper .CERTIFIED_IQNet{
  width: 7%;
  position:relative;
  left:2.5%;
}
.gridwrapper .imagen_ubicacion{
  width: 16.66%;
  position: relative;
  left: 34%;
  height:7vw;
}
.gridwrapper .boton_mapa {
  color: green;
  font-size: 1.5vw;
  left: 34.4vw;
  position: relative;
  bottom: 2vw;
  cursor: pointer;
}
.gridwrapper .boton_satelite{
  color: blue;
  font-size: 2vw;
  position: relative;
  left: 32.5vw;
  bottom: 5vw;
  cursor: pointer;
}
.gridwrapper .texto_iescalvia{
  position: relative;
  left: 35vw;
  bottom: 4vw;
  font-size: 1.5vw;
}
.gridwrapper .texto_direccion{
  position: relative;
  left: 76vw;
  bottom: 4vw;
  font-size: 1.5vw;
}
.gridwrapper .alexia{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .moodle{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .batart{
  position: relative;
  height: 5vw;
  left: 1vw;
  top: 1vw;
}
.gridwrapper .pillospress{
  position: relative;
  height: 5vw;
  left: 2vw;
  top: 1vw;
}
.gridwrapper .CUC{
  position: relative;
  height: 5vw;
  left: 3vw;
  top: 1vw;
}
.gridwrapper .weib{
  position: relative;
  height: 5vw;
  left: 2.5vw;
  top: 0.5vw;
}
.gridwrapper .bloggeries{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .erasmus{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .GESTIB2{
  position: relative;
  height: 5vw;
  top: 1vw;
}
.gridwrapper .mail{
  color: skyblue;
  position: relative;
  bottom: 38%;
  font-size: 3vw;
  left: 27.7%;
}
.gridwrapper .telefono{
  color: orange;
  position: relative;
  font-size: 3vw;
  bottom: 15%;
  left: 24.4%;
}
.gridwrapper .fax1{
  color: green;
  font-size: 3vw;
  position: relative;
  top: 10%;
  left: 21%;
}
.gridwrapper .equipo{
  position: relative;
  color: blue;
  font-size: 3vw;
  bottom: 35%;
  left: 29%;
}
.gridwrapper .descarga{
  position: relative;
  color: #FE2E2E;
  font-size: 3vw;
  left: 26%;
}
.gridcontent {
  width:8.33%;
  margin:0;
  border-right:1px solid grey;
  height:100%;
  float:left;
  background-color:#84c754;
  background-color:#f1f1f1;
}
</style>
</head>
<body style="background-image: url(&quot;imagenes/stackofmagazines.jpg&quot;); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover;" id="fondo1">
<div style="position:absolute;opacity:1;width:auto;left:0px;right:0px;" class="todo">
<div class="gridcontainer">
<div class="gridwrapper" style="height:160%;" id="header">
<!-- header -->
    <a href="http://www.iescalvia.com" target="_blank" style="text-decoration: none;">
      <img src="imagenes/iescalvia.png" class="iescalvia">
    </a>
    <img src="imagenes/logo_aenor.png" class="aenor">
    <img src="imagenes/CERTIFIED_IQNet.png" class="CERTIFIED_IQNet">
    <a href="http://g-t-e.260mb.net/imagenes/mapa_iescalvia_calles.jpg" target="_blank" style="cursor: zoom-in; text-decoration: none;" id="url">
      <img src="imagenes/mapa_iescalvia_calles.jpg" id="mapa_sitio" class="imagen_ubicacion">
    </a>
    <i class="fa fa-map boton_mapa" onclick="cambiarmapa()" title="Modo mapa"></i>
    <i class="fa fa-globe boton_satelite" onclick="cambiarsatelite()" title="Modo satelital"></i>
    <a href="https://www.google.es/maps/place/IES+Calvi%C3%A0/@39.5238095,2.4944293,16.39z/data=!4m8!1m2!2m1!1sInstituto+de+secundaria!3m4!1s0x0:0x96d76d2970e4e03f!8m2!3d39.5226475!4d2.4966431?hl=es" target="_blank" id="url_googlemaps" style="color: black; text-decoration: none;">
      <font face="segoe script" class="texto_iescalvia">IES Calvi&aacute;</font>
      <br>
      <font face="segoe script" class="texto_direccion">Avda Son Pillo 1. 07180</font>
    </a>
</div>
<div class="gridwrapper portadam" style="height:100%;" id="body">
<!-- Contenido -->
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="imagenes/bg-slider-pizarra.jpg" alt="" id="portada1" style="">
                <section class="flex-caption" id="contenido_portada">
                  <div class="logo_page">
                    <img src="imagenes/logo_GTE.png" id="logoGTE" style="">
                  </div>
                  <div id="logos_iescalvia" class="logos-iescalvia"></div>
                  <img src="imagenes/titulo6.png" style="width:33.33%; left:33.3%; position:absolute; top:65%;" id="titulo">
                  <i class="fa fa-sign-in" style="font-size: 3.5vw; left: 49%; position: absolute; top: 76%; color: #FFBF00; cursor:pointer;" onclick="location.href='GTE/'" title="entrar" id="entry"></i>
                </section>
            </li>
        </ul>
    </div>
</div>
<div class="gridwrapper" style="height:15vw;" id="footer">
  <!-- footer -->
    <a href="https://web2.alexiaedu.com/ACWeb/LogOn.aspx?key=WRcKBnV4m3M%3d" target="_blank" style="text-decoration: none;"><img src="imagenes/Alexia1.png" class="alexia" title="Alexia"></a>
    <a href="http://moodle2.iescalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/moodle.png" class="moodle" title="Moodle"></a>
    <a href="https://www.bachilleratoartistico-iescalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/batart.png" class="batart" title="Bachillerato art&iacute;stico"></a>
    <a href="http://iescalviablog.blogspot.com.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/pillospress.png" class="pillospress" title="pillo's press"></a>
    <a href="http://www.cucalvia.com/" target="_blank" style="text-decoration: none;"><img src="imagenes/CUC.png" class="CUC" title="CUC"></a>
    <a href="http://weib.caib.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/weib.png" class="weib" title="weib"></a>
    <br>
    <a href="http://iescalvia.blogspot.com.es/" target="_blank" style="text-decoration: none;"><img src="imagenes/bloggeries.png" class="bloggeries" 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" class="erasmus" 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" class="GESTIB2" title="GESTIB 2.0"></a>
    <a href="mailto:iescalvia@gmail.com"><i class="fa fa-envelope mail" title="iescalvia@gmail.com"></i></a>
    <a href="tel:+34 971690229"><i class="fa fa-tty telefono" title="+34 971690229"></i></a>
    <a href="fax:+24 971694931"><i class="fa fa-fax fax1" title="+34 971694931"></i></a>
    <a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank" style="text-decoration: none;" title="¿Quienes somos?"><i class="fa fa-users equipo" id="equipo18"></i></a>
    <a href="guia.pdf" download="guia.pdf"><i class="fa fa-file-pdf-o descarga"></i></a>
    <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" title="iescalvia@gmail.com"></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>
<!-- Contactos -->
<div id="contactos_div"></div>
</div>
</div>
</body>
</html>   
#192
Desarrollo Web / ¿En cada actualización del móvil se cambia la resolución de pantalla?
11 Octubre 2017, 23:01 PM
Hola, me pregunto esto porque, mi web esta en responsive design y con mi móvil se veía bien, hasta que hoy lo miré y esta deformado, ¿es porque se actualizó mi móvil o  porque a veces no se carga correctamente el css media querys?.

P.D: En tablet me va bien, en los móviles no, probé otros, y también me hace lo mismo.

Gracias.
#193
Desarrollo Web / Re: Como hacer un transform al mover el mouse fuera del elem. con un selector css3
9 Octubre 2017, 22:23 PM
Cita de: engel lex en  8 Octubre 2017, 01:09 AM
usualmente suele funcionar con
Código [Seleccionar]
:not:hover

pero creo que depende del navegador

No me ha funcionado, hay algún otro método, si no se puede de esa manera?
#194
Desarrollo Web / Como hacer un transform al mover el mouse fuera del elem. con un selector css3
8 Octubre 2017, 00:08 AM
Hola hice una transición que al estar encima de un logo (:hover), me aparezca un elemento desplazandose de izquierda al centro y lo que querria saber si es que hay algun selector css3 (:hover,:before,:link,etc.) que al dejar de tener el mouse encima del elemento me haga otra transicion .
Código [Seleccionar]

 .ctl00_ContenidoPagina_ctl06_spnTooltip{
   width: auto;
   height: auto;
   line-height: 100%;
   padding: 5px;
   border: 4px solid #FACC2E;
   border-radius: 5px;
   box-shadow: 1px 1px 2px #A8A8A8;
   background-color: #F5DA81;
   font-family: MV Boli;
   font-size: 1.3vw;
   max-width: 50%;
   text-align: left;
   z-index: 999;
   position: absolute;
   left: -50%;
   opacity: 0;
   display: block;
   bottom: 11vw;
   transition: all 2s ease-in-out;
   -webkit-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   -webkit-animation-name:final;
   -webkit-animation-duration:2s;
   -webkit-animation-delay:5s;
   animation-name: final;
   animation-duration: 1s;
   animation-delay: 5s;
 }
 i:hover + .ctl00_ContenidoPagina_ctl06_spnTooltip{
   width: auto;
   height: auto;
   line-height: 100%;
   padding: 5px;
   border: 4px solid #FACC2E;
   border-radius: 5px;
   box-shadow: 1px 1px 2px #A8A8A8;
   background-color: #F5DA81;
   font-family: MV Boli;
   font-size: 1.3vw;
   max-width: 50%;
   text-align: left;
   z-index: 999;
   position: absolute;
   left: -50%;
   opacity: 1;
   display: block;
   bottom: 11vw;
   transform: translate(150%);
   -webkit-transform: translate(150%);
 }

<i class="fa fa-question-circle" style="font-size: 2vw; color: blue; cursor: help; left:73vw;position:absolute;bottom:8vw;" id="infromacion1"></i>
   <div class="ctl00_ContenidoPagina_ctl06_spnTooltip">
     <font color="#FA5858"><big>Solo para administradores&#58;</big></font> Para a&ntilde;adir un enlace en la tabla, tiene que ir a su curso y grupo.
   </div>

P.D: O meter otro valor en el transform que sea el segundo.
Gracias.
#195
Desarrollo Web / Re: Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
2 Octubre 2017, 22:03 PM
Muchas gracias ivancera96, era justo lo que quería, mil gracias.
#196
Desarrollo Web / Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
1 Octubre 2017, 01:12 AM
Hoa, tengo un icono fa  y un div, lo que me gustaría hacer en que cuando pase por el icono fa me aparezca el div, todo con css, se que es con hover pero no se muy bien como hacerlo, hay algún tutorial? O algun ejemplo.
Código [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<style>
  .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{
    width: auto;
    height: auto;
    line-height: 100%;
    padding: 5px;
    border: 4px solid #FACC2E;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #A8A8A8;
    background-color: #F5DA81;
    font-family: MV Boli;
    font-size: 1.3vw;
    max-width: 50%;
    text-align: left;
    z-index: 0;
    position: absolute;
    left: 25%;
    opacity: 0;
  }
  button:hover .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{
  opacity:1;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<center class="pop-up">
<div class="ctl00_ContenidoPagina_ctl06_spnTooltip">
      <font color="#FA5858"><big>Solo para administradores&#58;</big></font> Para a&ntilde;adir un enlace en la tabla, tiene que ir a su curso y grupo.
</div>
</center>
<button style="background:none; border-radius:10; top:50px; position:absolute;">i</button>
</body>
</html>


Y no me funciona, porque será?

Gracias
#197
Desarrollo Web / ¿Cuánto dura un Máster de desarrolo web y máster de cyberseguridad?
23 Septiembre 2017, 15:23 PM
Hola, estoy haciendo un trabajo, y necesito, saber cuantos años dura un máster de desarrollo web y cyberseguridad. ¿Y  que tipo de másters de desarrollo web hay?

Grácias
#198
Desarrollo Web / Los media queries no funcionan con los valores definidos
14 Septiembre 2017, 18:21 PM
Hola, estoy haciendo mi web responsive con media queries, y es un problema pequeño pero que no sé solucionarlo. Yo pongo:
Código [Seleccionar]

@media screen and (max-width:768px){
code...
}

Pero no me lo arranca bien, en este código lo que le digo es que si el ancho de mi pantalla es menor ( con max-width) de 768px me va a cambiar los estilos, eso es para tablets, también lo tengo en JS:
Código [Seleccionar]

$(document).ready(function(){
if(window.matchMedia("(max-width: 768px)").matches){
  code...
}
});

Y para móviles que si la pantalla es menor que 600px me va a cambiar los estilos y JS:
Código [Seleccionar]

@media screen and (max-width:600px){
code...
}

Código [Seleccionar]

$(document).ready(function(){
if(window.matchMedia("(max-width: 600px)").matches){
  code...
}
});


Esta manera no me arranca es decir que cuando yo pongo la pantalla a 768px (modo tablet) no me ejecuta los códigos (mi tablet la anchura es exacto 768px), pero si me ejecuta si la anchura es  a partir de 691px, y modo movil a partir de 540px cuando yo lo progrmé para:

movil---> 600px
tablet---> 768px

Mi tablet es un Surface Pro y no he probado otras tablets.. Hi antes me iba bien, me lo ejecutaba perfectamente.

Porque me pasó esto que error hay, y en su tablet y moviles de 600px de anchura se ven bien?

Gracias.
#199
Desarrollo Web / Hay veces que los media queries (JS y CSS) funcionan y otras veces no
13 Septiembre 2017, 19:16 PM
Hola, estoy haciendo mi web responsive con media queries CSS y JS, y lo tengo todo bien, me arrranca bien, pero... Hay veces que no me ejecuta los media queries es decir, yo estoy trabajando con un portátil de 12.3 pulgadas (2 en 1) que lo puedo transformar en tablet, en modo ordenadaor va bien, y cuando lo cambio a tablet mi PC, se ejecuta, pero aveces no se ejecuta, y nosé si eso es normal, aveces me ejecuta los media queries  (JS y CSS) y otras veces no, si no es normal, porque me está  pasando eso? Y que posible solución puede tener? :huh:

P.D: También lo tengo optimizado para móviles y en cambio, eso si me va bien.  :huh:
Gracias
#200
Desarrollo Web / Re: Como bloquear el zoom de mi pagina web para tabletas y moviles?
6 Septiembre 2017, 23:13 PM
No me entendieron.
Es que yo en mi móvil se vé mal, es decir, el diseño gráfico, sí va bien, se ve así, https://drive.google.com/file/d/0B6mh5xJztGS9SlVBZldQeTNZekE/view?usp=sharing
pero , se puede hacer zoom (más pequeño) y se vé mal,  el fondo es pequeño, no cubre toda la pantalla, y la portada también, así se queda,https://drive.google.com/file/d/0B6mh5xJztGS9cjBtRXoyVEZOZ1E/view?usp=sharing,
https://drive.google.com/file/d/0B6mh5xJztGS9Z0tqSFFhc0RsX0E/view?usp=sharing, y lo que quisiera sería hacer una función jQuery que impidiera hacer zoom (más pequeño) y que se vea la pantalla con las medidas que yo quieras, pero si no se puede hacer ambas cosas, quisiera saber porque me pasa eso. Y que solución me podrían dar.

Gracias

P.D: He probado todo lo que me han dicho pero lamentablemente no me ha funcionado
Páginas 1 ... 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27