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

javih · #1 (**permalink**) 22/08/2011, 06:26

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

Batan · #2 (**permalink**) 22/08/2011, 06:35

Buenas
Con la propiedad position: fixed puedes dejar fijo el elemento que quieras fijar.
Saludos

javih · #3 (**permalink**) 22/08/2011, 07:17

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

Batan · #4 (**permalink**) 22/08/2011, 10:36

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

javih · #5 (**permalink**) 22/08/2011, 11:04

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

Batan · #6 (**permalink**) 22/08/2011, 16:27

A lo que yo me referia era algo como esto en el HTML.

Código HTML:

Ver original<div id="content-video">
   <div class="chocofins"><img src="http://www.google.es/images/srpr/logo3w.png"></div>
  <div class="simmer"><img src="http://www.google.es/images/srpr/logo3w.png" alt="Simmer Mission X 2012" /></div>
  <div id="video"></div>
  <div class="quad"><img src="http://www.google.es/images/srpr/logo3w.png" alt="Fanatic Quad 2012" /></div>
  <div class="fanatic"><img src="http://www.google.es/images/srpr/logo3w.png"></div>
 </div>

Tu capa video y la imagenes dentro de una capa.

Los estilos serian de este modo

Código CSS:

Ver original#content-video{
height: auto;
overflow: hidden;
}
 
.fanatic {
  position: relative;
  min-width: 150px;
  float: right;
}
 
.simmer {
  position: relative;
  min-width: 250px;
  float: right;
}
 
.quad {
  position: relative;
  min-width: 125px;
  float: left;
}
 
.chocofins {
  position: relative;
  min-width: 150px;
  float: left;
}

Saludos.

javih · #7 (**permalink**) 23/08/2011, 09:05

Gracias Batan,

Pero así tampoco me funcionó.

Saludos

Batan · #8 (**permalink**) 23/08/2011, 09:28

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<div id="general">
<div class="primer_bloque">
<img src="imagen.png" alt="imagen"/>
<img src="imagen.png" alt="imagen"/>
<img src="imagen.png" alt="imagen"/>
</div>
<div class="bloque_video">
<img src="imagen.png" alt="imagen"/>
<div class="video">Video</div>
<img src="imagen.png" alt="imagen"/>
</div>
<div class="segundo_bloque">
<img src="imagen.png" alt="imagen"/>
<img src="imagen.png" alt="imagen"/>
<img src="imagen.png" alt="imagen"/>
</div>
</div>

Estilos.

Código CSS:

Ver original#general{overflow:hidden; height: auto; width: 600px;}
.primer_bloque img{float: left; width: 200px; overflow: hidden; hidden:auto}
.bloque_video *{float: left; overflow: hidden; height: auto;}
.segundo_bloque img{float: left; width: 200px; overflow: hidden; hidden:auto}