Superponer una div a dos anteriores

Citar

Escrito el 01 Sep 2011 02:38 am

Coloqué dos divs uno al lado de la otra con float dentro de una div llamada parent a la que le div overflow:hidden. Posteriormente coloqué, abajo de las anteriores otra div llamada menu con la intención de que se sobreponga a aquellas.

Primero intenté colocar las primeras con posicionamento absoluto, pero cuando después quiero posicionar el menú con margin o padding top todo el conjunto se mueve. Alguien sabe como solucionar esto?

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#parent{overflow:hidden;}
#izquierda{background:#F00; width:250px; float:left; height:200px;}
#derecha{background:#FF0; width:250px; float:left;height:200px;}
#menu{background:#00F; width:500px; color:#FFF;}
-->
</style>
</head>

<body>
<div id="parent">
<div id="izquierda">
<h2>IZQUIERDA</h2>
</div>
<div id="derecha">
<h2>DERECHA</h2>
</div>
</div>
<div id="menu">
<p>Manzana | Naranja | Pera | Banana | Sandía | Melón</p>
</div>
<p>RESTO DE LA INFORMACIÓN</p>
</body>
</html>

Desde ya muchas gracias. Claudio

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 01 Sep 2011 12:19 pm

Con "superponer" quieres decir que menú debe estar por encima de los dos divs flotantes y en el margen superior de "parent"?.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 01 Sep 2011 05:10 pm

creo que para ayudarte deberías primero explicar como quieres quede el resultado...

ejemplo:

1 caja arriba todo el ancho
2 dos cajas en la misma linea o plano

etc..

es que no consigo seguirte.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 01 Sep 2011 07:25 pm

Disculpen por no haber sido claro. El resultado que pretendo puede verse en esta dirección

https://docs.google.com/leaf?id=0B8Kcz2fc4NboYmFiZmFlZGYtMDY1NS00OTZmLWFlYjItODBhMGVjZGFlOWVl&hl=pt_BR

Para esto coloqué este código

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#parent{overflow:hidden; position:relative;}
#izquierda{background:#F00; width:250px; float:left; height:200px;}
#derecha{background:#FF0; width:250px; float:left;height:200px;}
#menu{background:#00F; width:500px; color:#FFF; position:relative; top:-50px;}
#conteudo{position:relative; top:-40px;}
-->
</style>
</head>

<body>
<div id="parent">
<div id="izquierda">
<h2>IZQUIERDA</h2>
</div>
<div id="derecha">
<h2>DERECHA</h2>
</div>
</div>
<div id="menu">
<p>Manzana | Naranja | Pera | Banana | Sandía | Melón</p>
</div>
<div id="conteudo">
<p>RESTO DE LA INFORMACIÓN</p>
</div>
</body>
</html>

Me quedé ahora con la siguiente duda. Abajo del menú viene lo que llamé RESTO DE LA INFORMACIÓN que está dentro de la div "conteudo" y para que quede en la posición de la imagen también tube que trabajar con position relative e con top. Hay alguna forma que haga que el resto acompanhe al menú como si fuese static? Sino voy a tener que posicionar todos los elementos que se encuentren debajo del menú, manualmente con top.

Desde ya muchas gracias. Claudio

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 05 Sep 2011 09:52 am

jop bueno no puedo ver esa dirección que pones, pero en principio si parent (creo que es como lo llamas al div superior, y el contenido son divs diferentes, en un principio deben de estar asi (sin problemas).

las "position" son a veces arriesgadas su uso (es mi opinión personal). y más si empezamos con floats. Como no veo que pretendes hacer.. no se decirte, parece ser que quieres tener una imagen posicionada? para eso siempre es mejor usar background-image.

siento no se de mas ayuda, en los position recuerda que estan los absolute y relative, y en los float, esta el clear:both. También esta la posibilidad de usar "display" block, inline, etc..

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 05 Sep 2011 12:25 pm

Amigo Silvestre, subí los archivos para mostrarte como está el proyecto.

Puedes verlo en esta dirección

http://www.terapiaocupacional.net.br

Avisame por favor cuando lo hayas visto porque el cliente no quiere todavía que esté online hasta que sea terminado totalmente.

En la parte superior podrás ver el título y la descripción - que están con float - y a la derecha de ellos un slide-show que también tiene un float:left. Estás dos divs están dentro de una #parent que tiene posición relativa. Mi intención es que el menú horizontal quede encima de los elementos anteriores, es allí que surge la necesidad de trabajar con posición relativa y con top. La parte principal, que tiene las columnas laterales y el cuerpo central, a esa altura ya dejaron de acompanhar al menú y también tube que ajustar su posición con top; lo mismo pasó con el footer al final de todo. Lo que yo quería era evitar todos estos posicionamentos individuales.

Por otro lado, el menu tiene dos imágens que generan las sombras, no te imaginás lo que sufrí para dejarlas en la poscición correcta, porque cada vez que las movía tenía que ajustar de nuevo la posición del menú, del parent y de la otra sombra porque son dos sombras una a la izquierda y otra a la derecha.

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 07 Sep 2011 10:13 am

visto, lo miro y te digo algo... para cosas asi si es muy comprometido me puedes enviar por mp la direcc.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 07 Sep 2011 11:32 am

bueno ya esta solucionado.... y comprobada mi respuesta. Pero antes comentarte que la solución que haces del slideshow, es excesivamente compleja para su resultado, ya que podría solucionarse con una imagen animada, o mejor con flash (si dispones del programa de flash para crearla). Bien al tema.

1. Elemento caja imágenes o slideshow
Solo se creará un elemento float, ya que es lo único que necesitamos es que las imágenes (slideshow) se posicionen de manera "flotante". A este elemento lo pondremos un Float:right, y añadiremos su altura y anchura de visualización, creando asi la caja donde veremos las imágenes que vas cargando. Poniendo aquí el overflow, ya que supongo que es para ocultar las partes sobrantes de las otras imágenes.

2. Título y subtitulo
No sufren ninguna modificación,solo que dejan de ser flotantes,y se incluyen en el código después del Elemento caja imágenes o slideshow

3. Barra de menus
para incluir la barra y posicionarla solo has de incluir en su "style", el parámetro "position:relative" y jugar con el parámetro "bottom:50px", con esto lo irás posicionando.

es interesante que tanto en la caja de la cabeza o header y menu pongas el tamaño width, ya que así evitaras que al visualizarse en una ventana más pequeña estos se muevan.

consejo: en los menus yo uso "<span" en vez de <ul+<li

el código que hice para confirmar mis teorías.. es este. De todas formas ahora parece estable tú página. ya contestas a ver que tal te va.

Código HTML :

<div style="border:solid 1px maroon;
            width:900px;
            height:300px;">

   <div id="slideshow-container"
      style="border:solid 1px pink;
             float:right;
             width:500px;
             height:300px;
             overflow:hidden">
      <img src="..estudantes-1.png" alt="Estudantes" style="visibility: visible; opacity: 0.825917;">
      <img src="..estudantes-2.png" alt="Estudantes" style="visibility: hidden; opacity: 0;">
      <img src="../estudantes-3.png" alt="Estudantes" style="visibility: visible; opacity: 0.176472;">
   </div>
   <div id="site-title" >
        <h1 id="logo">
        <a href="http://terapiaocupacional.net.br">Terapia Ocupacional</a></h1>
        <p class="headline">Juntos podemos mudar o mundo</p>
   </div>

</div>

<div class="shadow-left"
      style="border:solid 1px yellow;
             width:900px;
             position:relative;
             bottom:50px">

   <div class="shadow-right clear-block">

       <span class="active home">xxx
       </span>
       <span class="page page-o-curso ">xxxxx

 <!---etc---->

       </span>
       <span class="page page-pagina-exemplo ">xxx
       </span>

   </div>
</div>

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 07 Sep 2011 02:22 pm

Antes que nada, muchas gracias por haberme ayudado con este proyecto y en segundo, te felicito fue muy bueno tu trabajo y la solución mucho mejor que la mía.

Con relación al slideshow, merece un párrafo especial, trabajo en Flash y programo en AS3 pero con ese asunto de que muchos dispositivos móbiles no están leyendo swf estamos migrando todas las animaciones para JQuery hasta la llegada de HTML5.

Es la primera vez que veo alguien que construye menus con span; porque haces eso? alguna ventaja en especial?

Yo organicé un poco tu código apenas con fines de aprendizaje separando el css del html y me quedé con una duda. Tengo una div llamada #conteudo y en ella aparece un espacio en blanco encima como si tubiese um margin-top. Busqué en las otras divs y no encontré nada que la empuje hacia abajo. Si tenés un tiempito por favor fijate en ese detalle.

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#parent{
   border:solid 3px maroon; 
    width:900px; 
    height:300px;
   background:#CCF;
}
#izquierda{background:#F00;}
#derecha{background:#F0f;width:490px; float:right;height:300px;border:solid 1px pink;overflow:hidden;}
.menu{background:#00F; width:900px; color:#FFF; position:relative; bottom:80px;}
#conteudo{background:#9F0; width:900px;}
#rodape{background:#FCF;width:900px;}
-->
</style>
</head>

<body>
<div id="parent"> 
  <div id="derecha"> 
      <h2>DERECHA</h2> 
  </div> 
   
<div id="izquierda" > 
        <h2>IZQUIERDA</h2> 
</div> 
</div> 

<div class="menu">
       <span class="active home">xxx</span> 
       <span class="page page-o-curso ">yyyyy</span> 
       <span class="page page-pagina-exemplo ">zzzz</span> 
</div>

<div id="conteudo">
<h2>CONTEÚDO</h2>
<p>Lorem ipsum dolor sit amet, ac dictum, quis volutpat elementum et, amet velit in purus aliquet ultrices suscipit, accumsan lorem curabitur congue sit sed, suspendisse nullam ligula tellus euismod. Blandit sapien magnis, vel porta nunc feugiat lectus, id vel.</p>
</div>
<div id="rodape">
<h3>RODAPE</h3>
</div>
</body>
</html>

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 08 Sep 2011 10:14 am

disculpa yo es que soy mas de teoría.. y no suelo mirar mucho el depurar el código 100%.

Tema span, bueno es algo novedoso, que creo que será un "futurible", la poner <span es una etiqueta en vez de dos <ul <li, y tal como va evolucionando el código seguramente tenga una tendencia a desaparecer o no eso solo son criterios.

Teniendo una linea de <span dentro de un <div (por ejemplo) tenemos un menú, controlable.. con el display,(block, inline, etc). Pero esto es código!! y siempre hay ciento una maneras de hacerlo para dar el mismo resultado.

El espacio es el del menu :roll:

, que lo subimos, no me di cuenta ya que suelo usar ese truquito para pies de página.

hacemos la siguiente modificación para solucionarlo.

1._ Cambiamos el style bottom: 80px a top:200px;, así jugaremos a bajarlo desde arriba.
2._ Deberemos meter el <div id="menu"> dentro del <div id="parent">.

y listo el tema, principalmente elproblema de descudres era por usar dos float left, para el alineado y eso es muy escurridizo.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 08 Sep 2011 10:20 am

sobre="dispositivos móbiles", he estado comprobando... y realmente si establecemos el ancho de los divs... de texto, cuando en un celular amplian el tamaño de visualización de la página, esta se hace grande y debe desplazarse, lo que hace un poco "incomodo", si los divs no forzamos el tamaño width, cuando ampliamos la visualización el texto se acomoda a la ventana.

este problema últimamente lo llevo en mente... y hay dos soluciones o dejamos los divs sin forzar un tamaño... o se crea una segunda version de nuestra página para móviles.

aun no se por cual opción decantarme... asi que hasta aquí llego y eso sería ya tema para otro hilo, (si no está ya).

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 08 Sep 2011 12:01 pm

Hice el ajuste del menú pasándolo a la div parent, cambié el posicionamiento para top y para llegar exactamente a donde yo quería coloqué una nueva div llamada resto que tiene adentro ahora una #principal y otra #rodape para que todo esto fluya a partir del menu y que quede encima de la #parent. Funcionó bien pero me quedé con otra duda; tube que posicionarla en altura con relative e top:80px; esos 80ps son relativos a que? porque hasta el menú hay unos 50px.

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#parent{
   border:solid 3px maroon; 
    width:900px; 
    height:300px;
   background:#CCF;
}
#izquierda{background:#F00;}
#derecha{background:#F0f;width:490px; float:right;height:300px;border:solid 1px pink;overflow:hidden;}
.menu{background:#00F; width:900px; color:#FFF; position:relative; top:50px;}
#resto{position:relative; top:80px;}
#principal{background:#9F0; width:900px;}
#rodape{background:#FCF;width:900px;}
-->
</style>
</head>

<body>
<div id="parent"> 
  <div id="derecha"> 
      <h2>DERECHA</h2> 
  </div> 
   
<div id="izquierda" > 
        <h2>IZQUIERDA</h2> 
</div> 

<div class="menu">
       <span class="active home">xxx</span> 
       <span class="page page-o-curso ">yyyyy</span> 
       <span class="page page-pagina-exemplo ">zzzz</span> 
</div>

<div id="resto">
<div id="principal">
<h2>PRINCIPAL</h2>
<p>Lorem ipsum dolor sit amet, ac dictum, quis volutpat elementum et, amet velit in purus aliquet ultrices suscipit, accumsan lorem curabitur congue sit sed, suspendisse nullam ligula tellus euismod. Blandit sapien magnis, vel porta nunc feugiat lectus, id vel. Nibh fusce, in mauris quisquam, bibendum a hac in mus velit. </p>
</div>
<div id="rodape">
<h3>RODAPE</h3>
</div>
</div>

</div> 
</body>
</html>

Con relación a los dispositivos móbiles, cuando hice mención al problema, no me refería a los problemas de dimensiones sino a que directamente muchos de ellos no leen swf especialmente los iPads y no se si hay otros. Por eso si la animación es simple de tal forma que pueda ser substituída por JQuery estamos escojiendo esta última opción.

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 08 Sep 2011 07:17 pm

bien.
relative, se supone que es al div anterior, aunque muchas veces no se a que esactamente se acoje por que a veces no salen las cuentas por cosas de los margin y los padding, pero funciona.

lo de el redimensionamiento es cosa mia que me trae de cabeza..

y en cuanto a la imagenm sigo opinando que por tres imagenes... bien se le podia meter una imagen animada llamesele gif o png, pero bien esta una slideshow.