Sacar div del contenido

gfjoseluis · #1 (**permalink**) 26/06/2010, 10:31

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!

Calizman · #2 (**permalink**) 26/06/2010, 11:51

Saludos!

CSS

Código CSS:

Ver original#div {
width: 123px;
height: 123px;
float: left;
}
.image {
width: 123px;
height: 123px;
float: left;
}

HTML

Código HTML:

Ver original<div id="div"></div>
<img src="img.jpg" class="image" />

Y listo....

Hasta Luego!

cristian_cena · #3 (**permalink**) 26/06/2010, 17:06

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

gfjoseluis · #4 (**permalink**) 27/06/2010, 10:42

He probado con las dos y no consigo lo que quiero...
Os pongo el código html que tengo.

Código HTML:

Ver original<div id="wrapper">
<div id="header"><br>
  <a href=""><img src="header.jpg" width="700" height="150" border="0"></a>
</div>
<!-- Fin header -->
<div id="menu">
<ul>
<li><a href="index.html" class="enlace-menu">Enlace1</a></li>
<li><a href="index.html" class="enlace-menu">Enlace2</a></li>
<li><a href="index.html" class="enlace-menu">Enlace3</a></li>
<li><a href="index.html" class="enlace-menu">Enlace4</a></li>
<li><a href="index.html" class="enlace-menu">Enlace5</a></li>
<li><a href="index.html" class="enlace-menu">Enlace6</a></li>
</ul>
</div>
<!-- Fin menu -->
<div id="contenido">CONTENIDO</div>
<!-- Fin contenido -->
<div id="banner1"><img src="banner.jpg" border="0">
</div>
<!-- Fin banner 1 -->
<div id="banner2"><img src="banner.jpg" border="0">
</div>
<!-- Fin banner 2 -->
<div id="pie">pie de la pagina</div>
<!-- Fin Pie -->
</div>
<!-- Fin #wrapper -->

He cambiado la imagen en el post principal para que os orientéis mejor.
Gracias!

gfjoseluis · #5 (**permalink**) 28/06/2010, 11:21

Ninguna ayudita? :(

cristian_cena · #6 (**permalink**) 28/06/2010, 12:28

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