Foros del Web - Ver Mensaje Individual

fco_rmz · #1 (**permalink**) 20/01/2015, 01:27

Hola que tal, en mi pagina implemente un header dinamico, cuando bajo la pagina el header se reduce su tamaño y elimina objetos que se encuentran en el original, hice 2 cabeceras (header y .header2), la segunda de la mano de un codigo javascript elimina algunos objetos y acomoda su nuevo tamaño, lo que no se es donde agregar el codigo para que la transicion no sea tan brusca, se que este es el codigo pero no se donde ponerlo y que variables lleva

, ojala alguien me pudiera ayudar, tengo ya varios dias que no logro resolverlo, gracias!!

Código:

x,y,z{
-webkit-transition:height 0.5s;
-moz-transition:height 0.5s;
-ms-transition:height 0.5s;
-o-transition:height 0.5s;
transition:height 0.5s;
}

mi html:

Código:

<html>
  <head>
     <meta charset="UTF-8">
     <title> pagina </title>
     <link rel="stylesheet" href="fonts/style.css">
     <link rel="stylesheet" href="style.css">    
     <script src="necesarios/jquery-latest.js"></script>
     <script src="float.js"></script> 
     <script src="js/jquery.cycle.all.js"></script>
     <script type="text/javascript">
         $('#slider').cycle({ 
         fx:     'scrollHorz', 
         speed:  'slow', 
          
         next:   '#next', 
         prev:   '#prev' 
         });
     </script>
  </head>
  
  
  <body>

    <header>

      <div class="wrapper"> 
        <div class="inicio">
          <p>Contactanos al:  │ Correo: </p>
        </div> 
       
         
                <div class="redes">
              <nav> 
                <a href="#gg"><span class="icon-facebook4"></a>
                <a href="#tt"><span class="icon-twitter"></a>
                <a href="#nn"><span class="icon-youtube"></a>
                <a href="#cc"><span class="icon-linkedin3"></a>
                <a href="#tt"><span class="icon-google-plus2"></a>
              </nav>  
        </div>
        </div>
        <hr>



      <div class="wrapper">   


        <div class="logo">
          <a href="#lll"><img src="images/fwl.fw.png"></img></a>
        </div>    

      
        <div class="links">
          <nav> 
            <a href="#ggd">Soporte</a>
            <a href="#tt">Tienda</a>
            <a href="#nn">Contacto</a>
            <a href="#cc">Nosotros</a>
            
            
          </nav>         
        </div>
      
       </div><!-- wrapper -->   
     </header>



    <div id="wrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
          <img src="images/paris.jpg" width="100%" height="720">
          <img src="images/roma.jpg" width="100%" height="720">
          <img src="images/helsinki.jpg" width="100%" height="720">
        </div>  
         
        <div class="controller" id="next"></div>
      </div> 
    </div>  


   </body>  
 </html>

css:

Código:

* {
   margin: 0px;
   padding: 0px;
}


.wrapper{
  width: 70%;
  margin:auto;
  overflow: hidden;
}

.inicio{
  width: 100%;
  height: 30px;
  background-color: white;
}

.inicio p{
  padding-top: 4px;
  font-size: 14px;
  font-family: Segoe UI;
}

hr {
    border: none;
    height: 1px;
    background-color: #D8D8D8; /
}




header{
  height: 50px;
  width: 100%;
  background: white;  
  z-index:2;


}


/*-------------Java script--------------------------------------- */


.header2{
  height: 50px;
  position: fixed;
  background: white;
  width: 100%;
  box-shadow: -4px -3px 27px 0px  #888888;
}

header .inicio, header .redes{  <----asi lo he puesto pero no me funciona---------->
-webkit-transition:height 0.5s;
-moz-transition:height 0.5s;
-ms-transition:height 0.5s;
-o-transition:height 0.5s;
transition:height 0.5s;
}


.header2 .inicio{
  display: none;
}

.header2 .redes nav a{  
  display: none;
}


.header2 .logo img{
  margin-top: 8px;
}

.header2 .links nav{
  margin-top: -35px;
}

/*-------------Barra de navegacion--------------------------------------- */

.contacto{
  width: 350px; 
}


p span{
  margin-right: 5px;
  color: #FF8040;
  font-size: 20px;
  font-family: Segoe UI;
}

.redes nav{
  position: relative;
  float: right;
  margin-top: -23px;

}


.redes nav a {
  padding-left: 12px;
  text-decoration: none;
}


.icon-facebook4{
  color: #3b5998;
}

.icon-twitter{
 color: #00aced;  
}

.icon-youtube{
  color: #bb0000;
}

.icon-linkedin3{
  color: #007bb6;
}

.icon-google-plus2{
  color: #dd4b39;
}


.logo img{
  float: left;
  width: 220px;
  margin-top: 15px;
}


.links nav a {
  padding: 5px 10px;
  color: #A8A8A8;
  font-family: Segoe UI;
  text-decoration: none;
}

.links nav{
  position: absolute;
  right: 239px;
  top: 50px;
}

.links nav a:hover{
  color: white;
  background: #FF6317;
}


/*-------------Slideshow--------------------------------------- */

#wrapper{
  display: block;
  height: 720px;
  width: 100%;
}

#container{
  display: block;
  float: left;
  height: 700px;
  width: 100%;
  overflow: auto;
  margin-top: 50px;
  
}

#prev{
  background-image:url(images/leftArrow.png); 
  background-repeat:no-repeat;
  background-position: center center;
  display: block;
  float: left;
  height: 720px;
  width: 100px;
  position: relative;
  z-index:99;
}

#next{
  background-image:url(images/RightArrow.png); 
  background-repeat:no-repeat;
  background-position: center center;
  display: block;
  float: right;
  height: 720px;
  width: 100px;
  position: relative;
  z-index: 1; 
}

#slider{
  display: block;  
  height: 720px;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index:1;
}




/*--------------caracteristicas-----------------------------*/



#caract{
  width: 70%; 
  position: relative;
  top: 40px;
  margin: 0 auto;
  height: 1400px;
  z-index:1;
}


h4{
  color: #1E90FF;
  font-size: 14px;
}


p{
  color: #A9A9A9;
  font-size: 14px;
}


#engranes{
  width: 25%;
  float: left;
}

#candado{
  width: 25%;
  float: left;
}

#rayo{
  width: 25%;
  float: left;
}

#cohete{
  width: 25%;
  float: left;
}



.contenido{
  width: 100%;
  height: 2800px;
  
  top:100px; 
}