Foros del Web » Creando para Internet » CSS »

Hacer que las imágenes queden 'pegadas' a un contenedor

Estas en el tema de Hacer que las imágenes queden 'pegadas' a un contenedor en el foro de CSS en Foros del Web. Hola, Tengo un contenedor 'video' donde está el reproductor, pero intentaba colocar unas imágenes a su alrededor pero no consigo que se queden fijas, si ...
  #1 (permalink)  
Antiguo 22/08/2011, 06:26
Avatar de javih  
Fecha de Ingreso: agosto-2011
Mensajes: 201
Antigüedad: 12 años, 7 meses
Puntos: 12
Hacer que las imágenes queden 'pegadas' a un contenedor

Hola,

Tengo un contenedor 'video' donde está el reproductor, pero intentaba colocar unas imágenes a su alrededor pero no consigo que se queden fijas, si abro el depurador de Chrome o reduzco el tamaño de la pantalla las imágenes se desplazan.

¿Me pueden orientar un poco con eso a ver como lo hago para que no se desplacen?

http://tinyurl.com/3dmatlr

Saludos
  #2 (permalink)  
Antiguo 22/08/2011, 06:35
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 6 meses
Puntos: 63
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

Buenas
Con la propiedad position: fixed puedes dejar fijo el elemento que quieras fijar.
Saludos
  #3 (permalink)  
Antiguo 22/08/2011, 07:17
Avatar de javih  
Fecha de Ingreso: agosto-2011
Mensajes: 201
Antigüedad: 12 años, 7 meses
Puntos: 12
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

Gracias por la respuesta, pero no me ha funcionado, o no lo he sabido aplicar.

Esta es la clase de las aletas:

.chocofins {
position: fixed;
bottom: 70px;
min-width: 150px;
left: 64%;
right: 20%;
}

Pero si reduzco la ventana del navegador, los elementos quedan dentro del cuadro negro del vídeo, y lo que buscaba es que quedaran alrededor, igual que sale cuando está el navegador maximizado.

Saludos
  #4 (permalink)  
Antiguo 22/08/2011, 10:36
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 6 meses
Puntos: 63
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

Perdona entendi mal, crei que querias dejar la imagen fija y que al bajar el scrol pues la imagen se desplazará.
Para lo de tus imagenes y el reproductor, deberias create una capa para el reproductor, otra para las imagenes, y crear una capa que haga de contenedor de todas ella, obviamente las maquetas, las posiciones les pones sus estilos y ya lo tendrias.

Pon tu código para más ayuda concreta.

Saludos
  #5 (permalink)  
Antiguo 22/08/2011, 11:04
Avatar de javih  
Fecha de Ingreso: agosto-2011
Mensajes: 201
Antigüedad: 12 años, 7 meses
Puntos: 12
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

a ver porque lo tuve que dejar, un terremoto, aunque pequeño..

El código es este yo solo le añadí algunos div en el index y las clases en el primer css, creo que podría aprovechar el contenedor del vídeo o quizás quede más elegante como dices añadiendo otro contenedor.

http://flarevideo.com/

Este sería el index.html:


Código:
<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Pozo Izquierdo - Gran Canaria</title>
  <link rel="stylesheet" href="stylesheets/flarevideo.css" type="text/css">
  <link rel="stylesheet" href="stylesheets/flarevideo.default.css" type="text/css">
  <script src="javascripts/jquery.js" type="text/javascript"></script>
  <script src="javascripts/jquery.ui.slider.js" type="text/javascript"></script>
  <script src="javascripts/jquery.flash.js" type="text/javascript"></script>
  <script src="javascripts/flarevideo.js" type="text/javascript"></script>  
  <script type="text/javascript" charset="utf-8">
    jQuery(function($){
      fv = $("#video").flareVideo();
      fv.load([
        {
          src:  'http://',
          type: 'video/mp4'
        }
      ]);
    })
  </script>
  <style type="text/css" media="screen">
    body {
      background: #27282C url(images/wood.jpg) repeat;
    }
    
    #video {
      -webkit-box-shadow: 0 0 20px #000;
      -moz-box-shadow: 0 0 20px #000;
      width: 640px;
      height: 480px;
      overflow: none;
      margin: 5% auto;
    }
  </style>
</head>
<body>
  
  <div class="logo"></div>  
 <div class="chocofins"><img src="http://www.forosdelweb.com/f53/images/fin_quad_2012.png"></div>
  <div class="simmer"><img src="http://www.forosdelweb.com/f53/images/MISSIONX_yellow.png" alt="Simmer Mission X 2012" /></div>
  <div id="video"></div>
  <div class="quad"><img src="http://www.forosdelweb.com/f53/images/quad_2012_ov.png" alt="Fanatic Quad 2012" /></div>
  <div class="fanatic"><img src="http://www.forosdelweb.com/f53/images/fanatic.png"></div>
</body>
</html>
Y las clases que añadí en el flarevideo.css

Código:
/* Añadidos
----------------------------------*/

.fanatic {
  position: absolute;
  bottom: 40px;
  min-width: 150px;
  left: 45%;
}

.simmer {
  position: fixed;
  bottom: 100px;
  min-width: 250px;
  left: 10%;
  right: 20%;
}

.quad {
  position: fixed;
  bottom: 190px;
  min-width: 125px;
  right: 17%;
}

.chocofins {
  position: fixed;
  bottom: 70px;
  min-width: 150px;
  left: 64%;
  right: 20%;
}

Gracias y saludos
  #6 (permalink)  
Antiguo 22/08/2011, 16:27
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 6 meses
Puntos: 63
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

A lo que yo me referia era algo como esto en el HTML.
Código HTML:
Ver original
  1. <div id="content-video">
  2.    <div class="chocofins"><img src="http://www.google.es/images/srpr/logo3w.png"></div>
  3.   <div class="simmer"><img src="http://www.google.es/images/srpr/logo3w.png" alt="Simmer Mission X 2012" /></div>
  4.   <div id="video"></div>
  5.   <div class="quad"><img src="http://www.google.es/images/srpr/logo3w.png" alt="Fanatic Quad 2012" /></div>
  6.   <div class="fanatic"><img src="http://www.google.es/images/srpr/logo3w.png"></div>
  7.  </div>
Tu capa video y la imagenes dentro de una capa.

Los estilos serian de este modo
Código CSS:
Ver original
  1. #content-video{
  2. height: auto;
  3. overflow: hidden;
  4. }
  5.  
  6. .fanatic {
  7.   position: relative;
  8.   min-width: 150px;
  9.   float: right;
  10. }
  11.  
  12. .simmer {
  13.   position: relative;
  14.   min-width: 250px;
  15.   float: right;
  16. }
  17.  
  18. .quad {
  19.   position: relative;
  20.   min-width: 125px;
  21.   float: left;
  22. }
  23.  
  24. .chocofins {
  25.   position: relative;
  26.   min-width: 150px;
  27.   float: left;
  28. }


Saludos.
  #7 (permalink)  
Antiguo 23/08/2011, 09:05
Avatar de javih  
Fecha de Ingreso: agosto-2011
Mensajes: 201
Antigüedad: 12 años, 7 meses
Puntos: 12
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

Gracias Batan,

Pero así tampoco me funcionó.

Saludos
  #8 (permalink)  
Antiguo 23/08/2011, 09:28
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 6 meses
Puntos: 63
Respuesta: Hacer que las imágenes queden 'pegadas' a un contenedor

Cita:
Pero si reduzco la ventana del navegador, los elementos quedan dentro del cuadro negro del vídeo, y lo que buscaba es que quedaran alrededor, igual que sale cuando está el navegador maximizado.
Entonces no entiendo lo que deseas.
Si quieres que rodeen a tu video, pues crea más capas y alinealas con propiedades con el float.

Código HTML:
Ver original
  1. <div id="general">
  2. <div class="primer_bloque">
  3. <img src="imagen.png" alt="imagen"/>
  4. <img src="imagen.png" alt="imagen"/>
  5. <img src="imagen.png" alt="imagen"/>
  6. </div>
  7. <div class="bloque_video">
  8. <img src="imagen.png" alt="imagen"/>
  9. <div class="video">Video</div>
  10. <img src="imagen.png" alt="imagen"/>
  11. </div>
  12. <div class="segundo_bloque">
  13. <img src="imagen.png" alt="imagen"/>
  14. <img src="imagen.png" alt="imagen"/>
  15. <img src="imagen.png" alt="imagen"/>
  16. </div>
  17. </div>


Estilos.
Código CSS:
Ver original
  1. #general{overflow:hidden; height: auto; width: 600px;}
  2. .primer_bloque img{float: left; width: 200px; overflow: hidden; hidden:auto}
  3. .bloque_video *{float: left; overflow: hidden; height: auto;}
  4. .segundo_bloque img{float: left; width: 200px; overflow: hidden; hidden:auto}

Etiquetas: chrome, contenedor, tamaño
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 08:22.