Tema: problema con posicion del div
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/06/2013, 06:35
jmm87
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 12 años, 1 mes
Puntos: 0
problema con posicion del div
hola buen dia.. como podran apreciar si bajan haciendo scroll tengo una botonera que tiene posicion:fixed. para que siempre se vea aunque yo baje. el problema es que uno de los divs q es el SLIDER siempre queda encimado sobre la botonera. evidentemente tengo un error en el css pero no lo encuentro. alguien me puede ayudar?????
Código HTML: 
Ver original
  1. <body>
  2.  
  3.         <div class="flotante">
  4.             <ul>
  5.                 <li><a href="#"><img src="img/cont.png" width="30" height="37" alt="contacto"></a></li>
  6.                 <li><a href="#"><img src="img/imprimir.png" width="30" height="37" alt="contacto"></a></li>
  7.                 <li><a href="#"><img src="img/mapasitio.png" width="30" height="37" alt="contacto"></a></li>
  8.                 <li><a href="#"><img src="img/face.png" width="30" height="37" alt="contacto"></a></li>
  9.             </ul>
  10.         </div><!--Fin del flotante-->
  11.  
  12.         <div id="principal">
  13.     
  14.         <div id="menu">
  15.             <ul>
  16.                 <li><a href="#nosotros">Nosotros</a></li>
  17.                 <li><a href="#servicios">Servicios</a></li>
  18.                 <li><a href="#inicio" class="logo">&nbsp;</a></li>
  19.                 <li><a href="#clientes">Clientes</a></li>
  20.                 <li><a href="#contacto">Contacto</a></li>
  21.             </ul>
  22.         </div><!--Fin del menu-->
  23.         <div id="inicio">
  24.             <div id="slider">
  25.                 <div id="contenidoSlider">
  26.                     <img src="img/1.jpg" alt="" width="850px" height="200px">
  27.                     <img src="img/2.jpg" alt="" width="850px" height="200px">
  28.                     <img src="img/3.jpg" alt="" width="850px" height="200px">
  29.                 </div><!--Aca termina el slider-->
  30.             </div>
  31.             
  32.             <div class="contenido">
  33.                 <p>Aca va el contenido numero 2</p>
  34.             </div><!--Contenido-->
  35.         </div><!--Fin del inicio-->
  36.         
  37.         <div id="nosotros">
  38.             <h2>Nosotros</h2>
  39.             <div class="contenido">
  40.                 <p>Aca voy a explicar a lo que empresa se dedica
  41.                 Aca voy a explicar a lo que empresa se dedica</p>
  42.             </div>
  43.         </div><!--Fin contenido La empresa-->
  44.         
  45.         <div id="servicios">
  46.             <h2>Servicios</h2>
  47.             <div class="contenido">
  48.                 <p>Aca voy a ofrecer todos mis servicios a mis clientes 
  49.                 Aca voy a ofrecer todos mis servicios a mis clientes.</p>
  50.             </div>
  51.             <div class="planes">    
  52.                 <div id="disweb">
  53.                     <h3>Diseño Web</h3>
  54.                     <ul>
  55.                         <li>Maquetacion</li>
  56.                         <li>Diseño</li>
  57.                         <li>Programacion</li>
  58.                         <li>Responsabilidad y presicion</li>
  59.                     </ul>
  60.                 </div><!--Diseño Web-->
  61.                 
  62.                 <div id="disgrafico">
  63.                     <h3>Diseño Grafico</h3>
  64.                     <ul>
  65.                         <li>Maquetacion</li>
  66.                         <li>Diseño</li>
  67.                         <li>Programacion</li>
  68.                         <li>Responsabilidad y presicion</li>
  69.                     </ul>
  70.                 </div><!--Diseño Grafico-->
  71.                     
  72.                 <div id="hosting">
  73.                     <h3>Hosting</h3>
  74.                     <ul>
  75.                         <li>Maquetacion</li>
  76.                         <li>Diseño</li>
  77.                         <li>Programacion</li>
  78.                         <li>Responsabilidad y presicion</li>
  79.                     </ul>
  80.                 </div><!--Hosting-->
  81.             </div><!--Fin planes-->
  82.         </div><!--Fin contenido Servicios-->
  83.         
  84.         <div id="clientes">
  85.             <h2>Clientes</h2>
  86.             <div class="contenido"> 
  87.                 <p>Aca voy a mostrar todos mis trabajos 
  88.                 Aca voy a mostrar todos mis trabajos y el portfolio de mis clientes.</p>
  89.             </div>
  90.         </div><!--Fin contenido Clientes-->
  91.         
  92.         <div id="contacto">
  93.             <h2>Contacto</h2>
  94.             <div class="contenido">
  95.                 <p>Aca voy a mostrar todos mis trabajos 
  96.                 Aca voy a mostrar todos mis trabajos y el portfolio de mis clientes.</p>
  97.             </div><!--Fin del contenido-->
  98.             
  99.             <div id="formulario">
  100.                 <form action="">
  101.                     <label>Nombre: </label><br>
  102.                     <input type="text" id="txtNombre" class="campo"><br>
  103.                         
  104.                     <label>Apellido: </label><br>
  105.                     <input type="text" id="txtApellido" class="campo"><br>
  106.                     
  107.                     <label>E-Mail: </label><br>
  108.                     <input type="text" id="txtEmail" class="campo"><br/>
  109.                         
  110.                     <label>Asunto: </label><br>
  111.                     <input type="text" id="txtAsunto" class="campo"><br>
  112.                     
  113.                     <label>Comentario: </label><br>
  114.                     <textarea id="txtComentario" cols="30" rows="10"></textarea><br>
  115.                     
  116.                     <input type="submit" class="boton" value="Enviar">
  117.                     </form>
  118.                 </div><!--Fin del formulario-->
  119.                 
  120.         </div><!--Fin contenido Contacto-->
  121.         
  122.         <div id="pie">Todos los derechos reservados aptitud interactiva 2013</div><!--Fin pie de pagina-->
  123.  
  124. </div><!--Fin contenedor -->
  125.  
  126. </body>

y aqui el css
Código CSS: 
Ver original
  1. *{
  2.     font-family:Arial;
  3. }
  4.  
  5. body{
  6.     background-color: #8B0000;
  7.     padding: 0;
  8.     margin:0;
  9. }
  10.  
  11. .flotante{
  12.     margin-top:100px;
  13.     padding:10px;
  14.     height:160px;
  15.     background-color:#000;
  16.     position:fixed;
  17.     -moz-border-radius:3px;
  18.     -webkit-border-radius:3px;
  19.     -o-border-radius:3px;
  20.     -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
  21.     -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  22.     box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  23.     -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  24.     }
  25.  
  26. .flotante ul li{
  27.     list-style: none;
  28.     color:#fff;
  29.     padding:0;
  30.     }
  31.     
  32. .flotante ul {
  33.     padding:0px;
  34.     margin:0;
  35.     }
  36.  
  37. .flotante ul li a{
  38.     font-family: Verdana !important;
  39.     color:#CCC;
  40.     text-decoration:none;
  41.     padding:0;
  42.     }
  43.  
  44. .flotante ul li img{
  45.     filter:alpha(opacity=50);
  46.     -moz-opacity: 0.5;
  47.     opacity: 0.5;
  48.     -khtml-opacity: 0.5;
  49.     }
  50.     
  51. .flotante ul li :hover img {
  52.     filter:alpha(opacity=100);
  53.     -moz-opacity: 1.0;
  54.     opacity: 1.0;
  55.     -khtml-opacity: 1.0;
  56.     -o-opacity: 1.0;
  57.     -webkit-opacity: 1.0;
  58.     }
  59.     
  60. #principal{
  61.     margin:0px auto;
  62.     width:850px;
  63. }
  64.  
  65. #menu{
  66.     background-color:#fff;
  67.     text-align: center;
  68.     position:fixed;
  69.     width:850px;
  70.     -moz-border-radius:3px;
  71.     -webkit-border-radius:3px;
  72.     -o-border-radius:3px;
  73.     -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
  74.     -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  75.     box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  76.     -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  77. }
  78.  
  79. #menu ul{
  80.     margin:0;
  81.     padding:0;
  82. }
  83.  
  84. #menu ul li{
  85.     list-style: none;
  86.     display: inline-block;
  87.     padding:20px 20px;
  88.     margin-left:-25;
  89. }
  90.  
  91. #menu ul li a{
  92.     font-family: Verdana !important;
  93.     color:#000;
  94.     text-decoration:none;
  95.     font-size:14px;
  96.     padding:20px 20px;
  97. }
  98.  
  99. #menu ul li a:hover{
  100.     background-color:#000;
  101.     color:#fff;
  102.     }
  103.     
  104. .logo, .logo:hover{
  105.     background-color:transparent;
  106.     background-position: center center;
  107.     padding-left: 50px !important;
  108.     padding-right: 50 px !important;
  109.     }
  110.     
  111. .logo2{
  112.     background-color:#000;
  113.     background-position: center center;
  114.     padding-left: 50px !important;
  115.     padding-right: 50 px !important;
  116.     }
  117.     
  118. #slider{
  119.     position:relative;
  120.     width:100%;
  121.     height:200px;
  122.     margin-top:10px;
  123.     overflow:hidden;
  124.     -moz-border-radius:3px;
  125.     -webkit-border-radius:3px;
  126.     -o-border-radius:3px;
  127.     -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  128.     -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  129.     box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  130.     -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  131. }
  132.  
  133. h2{
  134.     color:#fff;
  135.     font-size:28px;
  136.     margin-bottom:20px;
  137.     margin-top:50px;
  138.     text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
  139.     -webkit-text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
  140.     -moz-text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
  141.     -o-text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
  142. }
  143.  
  144. .contenido{
  145.     background-color:#fff;
  146.     border-radius:3px;
  147.     -moz-border-radius:3px;
  148.     -webkit-border-radius:3px;
  149.     -o-border-radius:3px;
  150.     -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  151.     -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  152.     box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  153.     -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  154. }
  155.  
  156. .contenido p{
  157.     font-size:14px;
  158.     padding:40px;
  159. }
  160.  
  161. .planes{
  162.     margin-top:5px;
  163.     margin-bottom:5px;
  164.     background-color:#fff;
  165.     height:200px;
  166.     padding:15px;
  167.     border-radius:3px;
  168.     -moz-border-radius:3px;
  169.     -webkit-border-radius:3px;
  170.     -o-border-radius:3px;
  171.     -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  172.     -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  173.     box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  174.     -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  175. }
  176.  
  177. .planes ul{
  178.     margin:0;
  179.     padding:0;
  180. }
  181.  
  182. .planes ul li{
  183.     list-style: none;
  184. }
  185.  
  186. .planes ul li a{
  187.     text-decoration:none;
  188. }
  189.  
  190. #disweb{
  191.     width:240px;
  192.     background:#8B0000;
  193.     padding:10px;
  194.     color:#fff;
  195.     float:left;
  196.     margin-left:6px;
  197.     margin-right:6px;
  198.     border-radius:3px;
  199.     -moz-border-radius:3px;
  200.     -webkit-border-radius:3px;
  201.     -o-border-radius:3px;
  202. }
  203.  
  204. #disgrafico{
  205.     width:240px;
  206.     background:#8B0000;
  207.     color:#fff;
  208.     padding:10px;
  209.     margin-left:6px;
  210.     margin-right:6px;
  211.     float:left;
  212.     border-radius:3px;
  213.     -moz-border-radius:3px;
  214.     -webkit-border-radius:3px;
  215.     -o-border-radius:3px;
  216. }
  217.  
  218. #hosting{
  219.     width:240px;
  220.     background:#8B0000;
  221.     color:#fff;
  222.     padding:10px;
  223.     margin-left:6px;
  224.     margin-right:6px;
  225.     float:left;
  226.     border-radius:3px;
  227.     -moz-border-radius:3px;
  228.     -webkit-border-radius:3px;
  229.     -o-border-radius:3px;
  230. }
  231.  
  232.  
  233. #formulario{
  234.     padding:30px;
  235.     background-color: #ccc;
  236.     margin-top:-20px;
  237.     -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
  238.     -o-box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
  239.     -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
  240.     box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
  241. }
  242.  
  243. #formulario form{
  244.     font-size:14px;
  245.     width:400px;
  246.     margin:0 auto;
  247. }
  248.  
  249. .campo {
  250.     background-color:#F5F5F5;
  251.     width:400px;
  252.     border:0px;
  253.     padding:8px;
  254.     margin-top:10px;
  255.     margin-bottom:10px;
  256.     border-radius:3px;
  257.     -moz-border-radius:3px;
  258.     -webkit-border-radius:3px;
  259.     -o-border-radius:3px;
  260. }
  261.  
  262. textarea{
  263.     background-color:#F5F5F5;
  264.     height:100px;
  265.     width:400px;
  266.     margin-top:10px;
  267.     margin-bottom:10px;
  268.     border:0px;
  269.     padding:8px;
  270.     border-radius:3px;
  271.     -moz-border-radius:3px;
  272.     -webkit-border-radius:3px;
  273.     -o-border-radius:3px;
  274.  
  275. }
  276.  
  277. .campo:focus , textarea:focus{
  278.     background-color:#fff;
  279.     outline:none;
  280.     -webkit-box-shadow: 0px 0px 8px #24607f;
  281.     -moz-box-shadow: 0px 0px 8px #24607f;
  282.     box-shadow: 0px 0px 8px #24607f;
  283.     -o-box-shadow: 0px 0px 8px #24607f;
  284. }   
  285.  
  286. .boton{
  287.     margin-left:125px;
  288.     background: #DC143C;
  289.     color:#fff;
  290.     border:0;
  291.     width:100px;
  292.     padding:10px;
  293.     border-radius:3px;
  294.     -moz-border-radius:3px;
  295.     -webkit-border-radius:3px;
  296.     -o-border-radius:3px;
  297. }
  298.  
  299. .boton:hover{
  300.     background:#000;
  301.     color:#fff;
  302.     -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  303.     -o-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  304.     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  305.     box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  306.     
  307. }
  308.  
  309. #pie{
  310.     padding:30px;
  311.     font-size:12px !important;
  312.     font-weight:bolder;
  313.     color:#fff;
  314.     text-align:center;
  315. }