Foros del Web » Creando para Internet » CSS »

Sacar div del contenido

Estas en el tema de Sacar div del contenido en el foro de CSS en Foros del Web. Buenas, os quería preguntar una cosilla muy simple pero que no recuerdo cómo se hacía. ¿Cómo puedo sacar una imagen del contenido de la web? ...
  #1 (permalink)  
Antiguo 26/06/2010, 11:31
 
Fecha de Ingreso: junio-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Pregunta Sacar div del contenido

Buenas,
os quería preguntar una cosilla muy simple pero que no recuerdo cómo se hacía.
¿Cómo puedo sacar una imagen del contenido de la web? Lo que quiero sacar es un div que dentro hay una imagen.
Os pongo una imagen para que os sirva de guía.



Muchas gracias!

Última edición por gfjoseluis; 27/06/2010 a las 11:41
  #2 (permalink)  
Antiguo 26/06/2010, 12:51
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Sacar div del contenido

Saludos!

CSS

Código CSS:
Ver original
  1. #div {
  2. width: 123px;
  3. height: 123px;
  4. float: left;
  5. }
  6. .image {
  7. width: 123px;
  8. height: 123px;
  9. float: left;
  10. }

HTML

Código HTML:
Ver original
  1. <div id="div"></div>
  2. <img src="img.jpg" class="image" />

Y listo....

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 26/06/2010, 18:06
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Sacar div del contenido

Hola calizman, no discuto tu solución porque está claro que está bien, mas interpreto diferente al problema.
Para mi que gfjoseluis al decir "sacar al div del contenido" hizo referencia a quitarlo del contenedor principal de la maqueta. De ser así, le será útil trabajar con posicion absoluta.

digamos:

html
Código:
<body>
<div id="contenedor">aquí todo el contenido del sitio</div>
<div class="image"></div>
</body>
css
Código:
*{margin:0; padding:0; position:relative;}
body{text-align:center;}
#contenedor{width: ... ; margin:0 auto; text-align:left; z-index: ... ;}
.image{
position:absolute;
left:50%;
margin-left:-500px;
width: ... ; height: ... ;
z-index: ... ;}

Aplicamos left: /*valor que necesites*/ ; y margin-left: /*valor que necesites*/ ; para dejar "fijo" (no fixed eh XD ) al div absoluto en relación al eje horizontal, tambíen podríamos haberlo echo respecto del eje vertical (con top y margin-top). Con esto logramos que nuestro div que quedó "suelto" (ya que no depende de #contenedor) mantenga una posición única y no se nos mueva según resolución.

Luego con z-index damos el orden de pila que necesitemos según el diseño que tengamos.

Hasta aquí mi granito de arena, espero sea útil. un abrazo
  #4 (permalink)  
Antiguo 27/06/2010, 11:42
 
Fecha de Ingreso: junio-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Sacar div del contenido

He probado con las dos y no consigo lo que quiero...
Os pongo el código html que tengo.
Código HTML:
Ver original
  1. <div id="wrapper">
  2. <div id="header"><br>
  3.   <a href=""><img src="header.jpg" width="700" height="150" border="0"></a>
  4. </div>
  5. <!-- Fin header -->
  6. <div id="menu">
  7. <ul>
  8. <li><a href="index.html" class="enlace-menu">Enlace1</a></li>
  9. <li><a href="index.html" class="enlace-menu">Enlace2</a></li>
  10. <li><a href="index.html" class="enlace-menu">Enlace3</a></li>
  11. <li><a href="index.html" class="enlace-menu">Enlace4</a></li>
  12. <li><a href="index.html" class="enlace-menu">Enlace5</a></li>
  13. <li><a href="index.html" class="enlace-menu">Enlace6</a></li>
  14. </ul>
  15. </div>
  16. <!-- Fin menu -->
  17. <div id="contenido">CONTENIDO</div>
  18. <!-- Fin contenido -->
  19. <div id="banner1"><img src="banner.jpg" border="0">
  20. </div>
  21. <!-- Fin banner 1 -->
  22. <div id="banner2"><img src="banner.jpg" border="0">
  23. </div>
  24. <!-- Fin banner 2 -->
  25. <div id="pie">pie de la pagina</div>
  26. <!-- Fin Pie -->
  27. </div>
  28. <!-- Fin #wrapper -->
He cambiado la imagen en el post principal para que os orientéis mejor.
Gracias!
  #5 (permalink)  
Antiguo 28/06/2010, 12:21
 
Fecha de Ingreso: junio-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Sacar div del contenido

Ninguna ayudita? :(
  #6 (permalink)  
Antiguo 28/06/2010, 13:28
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Sacar div del contenido

Hola jose luis, mira, creo que esta claro, tienes dos caminos, el de calizman o el mio. El primero usando cajas flotadas y el segundo usando cajas posicionadas en absoluto. Con cualquiera de los dos métodos lo puedes resolver.

Si eliges usar cajas flotadas añado una cosita a la buena respuesta de calizman.
- usa siempre un contenedor padre y dentro de el flota las cajas.
Debes dar overflow:hidden; al elemento padre de las cajas flotadas para "limpiar los floats"
Algo a tener en cuenta, la propiedad width hace referencia al ancho del contenido no al ancho total de la caja. por lo que si por ejemplo flotas dos elementos en un contenedor de 800 px controla que el ancho total (margin/padding/width/border) de tus cajas no superen el width del padre de las cajas

En tu caso puedes:
- usar un contenedor y anidar las tres cajas dentro (con flotado)
- usar tres contenedores por separado (y trabajar las cajas laterales con posiciones absolutas y el truco que te mostré en #3)

Espero te sirva, un saludo

Etiquetas: contenido
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 06:06.