Foros del Web » Creando para Internet » HTML »

hacer dos capas div paralelas

Estas en el tema de hacer dos capas div paralelas en el foro de HTML en Foros del Web. puedo poner dos capas div alineadas entre si osea en una una imagen y a la derecha titulo y comentario y que cuando se incremente ...
  #1 (permalink)  
Antiguo 11/05/2011, 09:18
 
Fecha de Ingreso: enero-2011
Mensajes: 1.098
Antigüedad: 6 años, 11 meses
Puntos: 10
hacer dos capas div paralelas

puedo poner dos capas div alineadas entre si osea en una una imagen y a la derecha titulo y comentario y que cuando se incremente queden juntos las dos capas de arriba con las dos siguientes algo asin:

-----------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
------------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
-----------------------------------------------------------------------------------------------------------

espero que se me entienda saludos
  #2 (permalink)  
Antiguo 11/05/2011, 09:53
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: hacer dos capas div paralelas

Hacer lo que vos estas mostrando se puede, no es tan complicado, pero hay algo que no logro entender, cuando decis "Cuando se incremente queden juntos las dos capas de ariba con las dos siguientes", eso me descoloca, no entiendo. Fijate si podes mandar algun ejemplo u poco mas grafico.- Saludos.-
  #3 (permalink)  
Antiguo 11/05/2011, 11:20
 
Fecha de Ingreso: enero-2011
Mensajes: 1.098
Antigüedad: 6 años, 11 meses
Puntos: 10
Respuesta: hacer dos capas div paralelas

-----------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
------------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
-----------------------------------------------------------------------------------------------------------

si esto es lo que quiero



-----------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
-----------------------------------------------------------------------------------------------------------


-
-----------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
---------------------------------------------------------------------------------------------------------



-----------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
------------------------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------------------------
IMA titulo
GEN comentario
-----------------------------------------------------------------------------------------------------------

esto es lo que no quiero lo entiendes ahora espero que si saludos
  #4 (permalink)  
Antiguo 11/05/2011, 12:14
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: hacer dos capas div paralelas

Te paso un codigo, tene en cuenta que en css, tenes la posibilidad de hacer las mismas cosas de diferentes maneras, esto es algo que te arme rapido para que lo veas, hay una pequeña diferencia con explorer, pero eso se arregla cambiando y manejando las medidas de las fotos y las demas cajas, espero que te sirva, el link donde esta subido el ejemplo es este:
http://web-t.com.ar/

El html:
Código:
<div id="contenedor">
       <div id="foto1">Foto</div>
       <div id="texto1">
		<p><h3>Titulo</h3></p>
		<p>Comentario:
                 Lorem ipsum dolor sit amet, consectetur 
                 adipiscing elit. Cras vitae tellus volutpat 
                 est posuere tincidunt quis eu tortor. 
                 Etiam quis neque eu nibh lobortis viverra. 	
                </p>
	</div>
        <div id="foto2">Foto</div>
		<div id="texto2">
		<p><h3>Titulo</h3></p>
		<p>Comentario:
                 Lorem ipsum dolor sit amet, consectetur 
                 adipiscing elit. Cras vitae tellus volutpat 
                 est posuere tincidunt quis eu tortor. 
                 Etiam quis neque eu nibh lobortis viverra. 	
		</p>
	</div>
</div>
El css:
Código:
#contenedor{
	width:502px;
	height:260px;
	position:absolute;
}
#foto1{
	border:1px solid black;
	width:82px;
	height:82px;
	position:absolute;
}
#texto1{
	width:405px;
	height:82px;
	position:absolute;
	left:90px;
	border:1px solid red;
}
#texto1  h3{
	width:100px;
	height:30px;
	position:absolute;
	top:-20px;
}
#foto2{
	border:1px solid black;
	width:82px;
	height:82px;
	position:absolute;
	top:95px;
}
#texto2{
	width:405px;
	height:82px;
	position:absolute;
	left:90px;
	top:95px;
	border:1px solid red;
}
#texto2 h3{
	width:100px;
	height:30px;
	position:absolute;
	top:-20px;	
}
Espero que te sirva.
  #5 (permalink)  
Antiguo 11/05/2011, 12:37
 
Fecha de Ingreso: enero-2011
Mensajes: 1.098
Antigüedad: 6 años, 11 meses
Puntos: 10
Respuesta: hacer dos capas div paralelas

bueno gracias me lo mirare mas o menos si es lo que quiero pero sin la hoja de css tan llena una cosa el id es lo mismo que el class?

no entiendo porque pusistes el primer div con id contenedor no lo entendi ese div
  #6 (permalink)  
Antiguo 11/05/2011, 12:46
 
Fecha de Ingreso: enero-2011
Mensajes: 1.098
Antigüedad: 6 años, 11 meses
Puntos: 10
Respuesta: hacer dos capas div paralelas

con que mueves las etiquetas para arriba y para abajo?
  #7 (permalink)  
Antiguo 11/05/2011, 12:54
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: hacer dos capas div paralelas

Obvio que hay que retocar el css, yo lo hice en forma rapida para que lo veas y que tengas una idea de como se puede hacer, en el codigo css que te pase yo, hay muchas cosas que se repiten y convendria colocar un class en vez de un id, pero como lo hice muy rapido busque la manera mas efectiva y no la correcta, para que veas que de todos modos funciona, luego es cuestion de que vayas cambiando vos las cosas.

Respecto del contenedor, siempre estoy acostumbrado a colocar todo mi contenido dentro de contenedores, de esa manera puedo ubicar los elementos mas facilmente y no corro el riesgo de que se salgan del documento al cambiar las resoluciones.

Un id no es lo mismo que un class, el id es unico y se utiliza solo una vez dentro del documento, en cambio el class lom puedes reutilizar en varios partes de tu documento, por ejemplo si queres que un div tenga una unica propiedad y que no se repita le colocas un id, pero si quieres que todos los divs tengas las mismas propiedades, por ejemplo color y medida, a todos esos divs les colocas un class.-

Te recomiendo que empieces a ver desde cero css, ya que se te va a hacer muy dificil encarar un proyecto hecho en css cuando no sabes diferenciar un id de un class, de todas maneras estoy disponible pára contestar todas tus consultas y si puedo ayudarte mejor.
Saludos.
  #8 (permalink)  
Antiguo 11/05/2011, 13:06
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: hacer dos capas div paralelas

Cita:
Iniciado por azaz Ver Mensaje
con que mueves las etiquetas para arriba y para abajo?
Eso depende, los divs posicionados en static, los mueves con margin, pero los divs posicionados en absolutos o relativos los puedes mover con coordenadas, o sea con top, left, right, bootom.
ejemplo:

divs posicionados de forma estatica:
margin-left: 20px; (lo moves a la derecha 20px, podes usar margin-top, margin-left - margin-right - margin-bootom y margin).

divs posicionados en forma relativa o absoluta:
top: 20px; (Lo moves 20px hacia abajo, podes usar top, left, right, bootom.)

Espero que te sirva algo de esto. Cualquier cosa preguntas, pero me parece que te serviria mas un tutorial o un buen libro, te dejo un enlace donde podes descargar libros de css, muy buenos:
http://librosweb.es/
De ultima manda un jpg de lo queres hacer y lo vamos viendo por partes.
Saludos.
  #9 (permalink)  
Antiguo 11/05/2011, 13:18
 
Fecha de Ingreso: enero-2011
Mensajes: 1.098
Antigüedad: 6 años, 11 meses
Puntos: 10
Respuesta: hacer dos capas div paralelas

gracias por tu ayuda pero segun lo que dices ya que mi titulo y comentario se mueve creo que es un div en forma relativa me lo miro y te dire algo gracias por todo un saludo

Etiquetas: capas
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 03:42.