Problema con divs superpuestos

Integer78 · #1 (**permalink**) 12/09/2012, 09:48

En el pie de una página tengo que poner una lista de links y luego un mensaje sobre el copyright. Hasta ahí, todo bien. Pero sobre la derecha de la pantalla tengo que colocar el logo de la empresa. La mitad de arriba del logo debe quedar sobre el div de la lista de links y la mitad de abajo sobre el div del mensaje del copyright.

Adjunto una imagen de cómo debe quedar para explicarme mejor:

De mas está decir que se debe ver bien en todos los navegadores (desde IE 8 en adelante) y en todos los dispositivos (PC, tablet, smartphone, etc.).
Digo esto porque jugando un poco con posiciones absolutas y porcentajes logré que quede bien en la pantalla de mi PC, pero cuando lo veo en el celular el logo me quedaba un poco corrido.

Desde ya muchas gracias.

ArturoGallegos · #2 (**permalink**) 12/09/2012, 10:03

compañero le recuerdo que sin mostrar su código no le podemos ayudar, muestre como lo tiene y veremos que se puede hacer.

Integer78 · #3 (**permalink**) 12/09/2012, 11:06

Ag666 es que justamente lo que quisiera es saber cómo armarían el código para lograr el esquema de la imagen.
Yo me imagino un div para el rectangulo grande gris oscuro, otro para el gris claro
donde esta el mensaje del copyright y otro para el logo.
Pero tengo dudas: ¿pongo el div del copyright DENTRO del div de los links? O pongo uno debajo del otro... Lo mismo con el div de la imagen ¿lo pongo dentro del div del copyright? ¿o entre medio de los dos divs?
Y luego qué propiedades CSS utilizar para que los divs se acomoden superpuestos como se ve en la imagen...

Bueno eso ¿si ustedes tuvieran que armar el esquema de la imagen qué HTML y CSS escribirían? así a groso modo sin detalles, sólo necesito entender la lógica para que queden superpuestos, el resto no tendré problemas...

ArturoGallegos · #4 (**permalink**) 12/09/2012, 11:38

haber este seria un ejemplo rapido de como lo haria yo,

http://jsfiddle.net/Ag666/ekW6E/2/

noruas · #5 (**permalink**) 12/09/2012, 12:44

Si no te sirve los de posiciones absolutas, podrias intentarlo convirtiendo la parte de abajo junto con el logo ese en una imagen de fondo fija ajustada a la parte de abajo.

Luego el div footer ajustado para que quede mas o menos sobre la imagen de fondo en forma de rectangulo gris.

Quedaria mas o menos igual que lo tienes y no tendrias que usar posiciones absolutas.

Intentalo a ver.

Integer78 · #6 (**permalink**) 12/09/2012, 13:08

¡Ag666 eso esta perfecto es exactamente lo que necesitaba!
Tengo una sola duda: Cuando pones:

#footer>img

Nunca había visto el símbolo > en CSS. Yo normalmente escribo así:

#footer img

O sea con un espacio en vez del símbolo >

¿Es lo mismo?

Muchas gracias por la ayuda.

noruas · #7 (**permalink**) 12/09/2012, 13:11

Lo que decia antes... Aqui tienes un ejemplo de como lo haria yo sin usar posiciones absolutas.

Código HTML:

Ver original<html>
<head>
<style type="text/css">
#container {
    width: 1006px;
    background-image: url(http://img145.imageshack.us/img145/6198/pief.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-color:#4e4e4e;
    }
#cuerpo {
    padding: 40px;
    color: #FFF;
    text-align: justify;
    }
#foot {
    color: #FFF;
    height: 30px;
    padding: 10px 0px 10px 30px;
    }
</style></head>
<body>
<div id="container">
<div id="cuerpo">  
<p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por deado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito...</p>
</div>
<div id="foot">Guia Córdoba zona...</div>
</div>
</body>
</html>

Solo tendrias que tener cuidado de que el texto no llegue al logo, pero por tu disposicion no creo que eso pase, otra opcion es meter un div flotante vacio abajo a la derecha para que desplace el texto si es que este llegase a esa zona.

pzin · #8 (**permalink**) 12/09/2012, 16:58

">" es un selector. Hay muchos y variados selectores CSS y son de gran utilidad para no tener que llenar todo de etiquetas e identificadores.

ArturoGallegos · #9 (**permalink**) 12/09/2012, 17:08

como bien te dice @Bonez el simbolo > es un selector, en este caso particular lo que hace es afectar (se aplica) unicamente a las imagenes hijas del footer es decir afectara cuando este

Código HTML:

Ver original<div id="footer">
    <img />
</div>

pero NO afecta (no se aplica), cuando esta se encuntra dentro de otro elemento por ejemplo:

Código HTML:

Ver original<div id="footer">
    <p><img /></p>
</div>

Integer78 · #10 (**permalink**) 15/09/2012, 08:11

Muchísimas gracias a todos por sus respuestas.
¡Tema solucionado!