Foros del Web » Creando para Internet » CSS »

problema con posicion del div

 Estas en el tema de problema con posicion del div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/06/2013, 06:35
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 11 años, 6 meses
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. }
  #2 (permalink)  
Antiguo 25/06/2013, 07:06
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: problema con posicion del div
Tendrás que usar z-index para indicar que ese elemento tiene que estar por encima de los demás.

No sé si es .flotando o #menu donde tienes el problema, ya que ambos tienen una posición fija, pero no estaría de más darles un z-index a ambos.

Código CSS: 
Ver original
  1. #menu {
  2.   z-index: 999;
  3. }
  #3 (permalink)  
Antiguo 25/06/2013, 07:52
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: problema con posicion del div
es el menu..perfecto! muchas gracias.. solucione uno de los problemas.. pero hay algo q sigue quedando mal..el menú ahora queda por encima de los demás pero si bajas te das cuenta que esta pisando el slider.. como lo separo?
  #4 (permalink)  
Antiguo 25/06/2013, 08:13
Leonardo_Manrique
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: problema con posicion del div
A qué te referís con "está pisando el slider"? Si #menu tiene posición fija y un z-index claramente va a "pisar" el slider y todos los demás elementos (si es que entiendo a lo que te referís). Podrías ser más específico?
  #5 (permalink)  
Antiguo 25/06/2013, 08:34
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: problema con posicion del div
yo quiero que se vea la botonera..mas abajo el slider..mas abajo servicios.. contacto etc..no se si ese era el orden pero es un ejemplo

y si miras detalladamente aparece la botonera y a la misma altura que comienza la botonera comienza el slider

yo quiero q la botonera aparezca fija y a unos pixeles mas abajo todo lo demas

no se si se entiende
  #6 (permalink)  
Antiguo 25/06/2013, 08:49
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: problema con posicion del div
Cita:
Iniciado por Leonardo_Manrique Ver Mensaje
A qué te referís con "está pisando el slider"? Si #menu tiene posición fija y un z-index claramente va a "pisar" el slider y todos los demás elementos (si es que entiendo a lo que te referís). Podrías ser más específico?
yo quiero que se vea la botonera..mas abajo el slider..mas abajo servicios.. contacto etc..no se si ese era el orden pero es un ejemplo

y si miras detalladamente aparece la botonera y a la misma altura que comienza la botonera comienza el slider

yo quiero q la botonera aparezca fija y a unos pixeles mas abajo todo lo demas

no se si se entiende

Etiquetas: contenido, divs, posicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:12.