Foros del Web » Creando para Internet » CSS »

Posicionamiento absoluto y fijo con CSS

Estas en el tema de Posicionamiento absoluto y fijo con CSS en el foro de CSS en Foros del Web. Señores, hola primero y paso a explicar mi duda. Tengo un Slide en la cual en los extremos derecho e izquierdo hay dos imágenes fijas ...
  #1 (permalink)  
Antiguo 30/10/2012, 11:58
Avatar de datcom  
Fecha de Ingreso: enero-2011
Ubicación: Universo local, Vía láctea, Planeta Azul.
Mensajes: 216
Antigüedad: 13 años, 2 meses
Puntos: 0
Posicionamiento absoluto y fijo con CSS

Señores, hola primero y paso a explicar mi duda.

Tengo un Slide en la cual en los extremos derecho e izquierdo hay dos imágenes fijas en absolute para pasar las imagenes manualmente. El tema es que no estoy pudiendo lograr mantener la proporcion horizontal y que no se muevan cuando agrando o achico el ancho de la pagina con el navegador.

Como seria la CSS de esto?

De aqui saque el slidehttp://slidesjs.com/examples/standard/
para mi caso es mas ancho por lo que no puedo fijar los botones como en el original.

Gracias
__________________
De la Luz venimos, y hacia la Luz vamos.
Solo hay una sola verdad, y esa es el Amor.
Ayuda aquien tienes al lado y seras ayudado.
Ánimo!
  #2 (permalink)  
Antiguo 30/10/2012, 13:13
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: Posicionamiento absoluto y fijo con CSS

Algo te código no vendría mal. Si es diferente al ejemplo, evidentemente este no sirve para ayudar.
  #3 (permalink)  
Antiguo 30/10/2012, 13:23
Avatar de datcom  
Fecha de Ingreso: enero-2011
Ubicación: Universo local, Vía láctea, Planeta Azul.
Mensajes: 216
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Posicionamiento absoluto y fijo con CSS

Esta es mi adaptacion.
Como hago para que los botones next y prev queden fijos con el absolute y no modifiquen su posicion cuando se centra la pagina automaticamente.


Código CSS:
Ver original
  1. #slides {
  2.     width:800px;
  3.     margin-top:10px;
  4. }
  5.  
  6. /*
  7.     Slides container
  8.     Important:
  9.     Set the width of your slides container
  10.     Set to display none, prevents content flash
  11. */
  12.  
  13. .slides_container {
  14.     width:800px;
  15.     overflow:hidden;
  16.     position:relative;
  17.     display:none;
  18. }
  19.  
  20. /*
  21.     Each slide
  22.     Important:
  23.     Set the width of your slides
  24.     If height not specified height will be set by the slide content
  25.     Set to display block
  26. */
  27.  
  28. .slides_container a {
  29.     width:800px;
  30.     height:270px;
  31.     display:block;
  32. }
  33.  
  34. .slides_container a img {
  35.     display:block;
  36. }
  37.  
  38. /*
  39.     Next/prev buttons
  40. */
  41.  
  42. #slides .next,#slides .prev {
  43.     position:absolute;
  44.     margin-top: -100px;
  45.     margin-left: -150px;
  46.     width:24px;
  47.     height:43px;
  48.     display:block;
  49.     z-index:101;
  50. }
  51.  
  52. #slides .next {
  53.     left:585px;
  54. }

Código HTML:
Ver original
  1. <div id="slides">
  2.                 <div class="slides_container">
  3.                     <a href="#" title="lala" target="_blank"><img src="/img/wall1.jpg" width="800" height="270" alt="Slide 1"/></a>
  4.                     <a href="#" title="lala" target="_blank"><img src="/img/wall2.jpg" width="800" height="270" alt="Slide 2"/></a>
  5.                     <a href="#" title="lala" target="_blank"><img src="/img/wall3.jpg" width="800" height="270" alt="Slide 3"/></a>
  6.                     <a href="#" title="lala" target="_blank"><img src="img/wall4.jpg" width="800" height="270" alt="Slide 4"/></a>
  7.                     <a href="#" title="lalala" target="_blank"><img src="/img/wall1.jpg" width="800" height="270" alt="wall1"/></a>
  8.                     <a href="#" title="lala" target="_blank"><img src="/img/wall2.jpg" width="800" height="270" alt="Slide 6"/></a>
  9.                     <a href="#" title="lala" target="_blank"><img src="img/wall3.jpg" width="800" height="270" alt="Slide 7"/></a>
  10.                 </div>
  11.  
  12.                      <a href="#" class="prev"><img src="/img/arrow-prev.png" width="24" height="43" ></a>
  13.                 <a href="#" class="next"><img src="/img/arrow-next.png" width="24" height="43" ></a> -
  14.             </div>
__________________
De la Luz venimos, y hacia la Luz vamos.
Solo hay una sola verdad, y esa es el Amor.
Ayuda aquien tienes al lado y seras ayudado.
Ánimo!

Última edición por datcom; 30/10/2012 a las 15:41

Etiquetas: ancho, fijo, imagenes, posicionamiento
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




La zona horaria es GMT -6. Ahora son las 14:26.