Foros del Web » Creando para Internet » CSS »

Estructuras con divs flotantes y posición

Estas en el tema de Estructuras con divs flotantes y posición en el foro de CSS en Foros del Web. Hola a [email protected] 1º) Quería saber como influyen las herencias de los div id o div class sobre otros divs id o div class, así ...
  #1 (permalink)  
Antiguo 14/07/2011, 02:14
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Estructuras con divs flotantes y posición

Hola a [email protected]

1º) Quería saber como influyen las herencias de los div id o div class sobre otros divs id o div class, así como los span class.

2º) Y otra pregunta:
Si tengo una estructura html similar a:

Código:
<div id="principal">
    <div id="dos">
        <div id="tres">
        </div>
    </div>
</div>
<div id="cuatro">
</div>
Quería saber como influyen las propiedades float y positión con sus respectivos valores:
El ejemplo le continuaría en CSS de este modo:
Código:
#principal {
width:1000px;
height:200px;
}
#dos {
width:500px;
height:300px;
float:left;
position:relative;
}
#tres {
width:500px;
height:300px;
float:right;
position:relative;
}
#cuatro {
width:1000px;
height:70px;
}
Y lo que pasa, es que los divs "dos" y "tres", al incorporar texto o demás. se superponen encima del div "cuatro".
Quería saber alguna forma para que no pase esto y se ajuste a cada div colocado, de modo que al añadir o quitar contenido siempre se ajuste y no se solape por encima unas capas y otras.
Por eso pregunto las razones de las propiedades float y position que creo que influen en todo esto y también las herencias de divs padres e hijos
  #2 (permalink)  
Antiguo 14/07/2011, 09:03
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: Estructuras con divs flotantes y posición

Cita:
Iniciado por d3xf4ult Ver Mensaje
1º) Quería saber como influyen las herencias de los div id o div class sobre otros divs id o div class, así como los span class.
Que uses class o id no influye en la cascada de estilos, son dos formas distintas de acceder a un elemento, solo eso.

Lo que si debemos tener en cuenta es con que tipo de caja trabajamos: las hay de linea, de bloque y inline-block.

por ejemplo: div es de bloque y span es de linea.
Entonces esto es correcto: <div><span></span></div>
Pero anidar un elemento de bloque dentro de un elemento de línea no es correcto y no pasará el w3c validator: <span><div></div></span>

Aunque en cualquier caso puedes convertir un elemento de linea a bloque o viceversa usando la propiedad display.

Ejemplo:
display:inline; //convierte una caja en caja de linea
display:block; //convierte una caja en caja de bloque

La propiedad inline-block es un tanto más avanzada, acá la explican.

Cita:
Iniciado por d3xf4ult Ver Mensaje
Y lo que pasa, es que los divs "dos" y "tres", al incorporar texto o demás. se superponen encima del div "cuatro".
debes trabajarla con la propiedad z-index. La cual implica dos cuestiones:
  1. que estructures correctamente el html con un contenedor y elementos hermanos en su interior.
  2. que posiciones correctamente las capas que intervienen en el apilamiento.
Acá un artículo.

Cita:
Iniciado por d3xf4ult Ver Mensaje
Por eso pregunto las razones de las propiedades float y position que creo que influen en todo esto y también las herencias de divs padres e hijos
Lo correcto es trabajar con contenedores e hijos flotados. Ya que el contenedor te servirá para limpiar el flotado. Es decir, para que no te ocurra de que se te apilen las cajas misteriosamente, ya que este contenedor tomará la altura de su hijo flotado más alto. Aquí un ejemplo funcionando.

Finalmente, float hace que la capa salga del flujo normal del documento, al igual que cuando usas position absolute o fixed. Por esto es que debes usar un contenedor para las cajas flotadas. Y por esto también es que debes usar un contenedor para las cajas posicionadas en absoluto, ya que estas buscarán su ancestro inmediato relativo o body para posicionarse.Sobre este tema te podes documentar acá.

Espero esta info te sea útil.

Saludos.
  #3 (permalink)  
Antiguo 14/07/2011, 10:29
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Estructuras con divs flotantes y posición

Muchas gracias. Me están quedando claros ciertos conceptos.
Y por último. A modo ejemplo.

Como implementaría esto, con divs? y que se me ajustará todo perfectamente, si voy añadiendo contenido a los bloques hermanos, y que se ajusten según su contenido, por que por más que lo intento no doy conseguido el resultado deseado. Gracias.
[URL="http://imageshack.us/photo/my-images/692/ejemplo1s.jpg/"][B]http://imageshack.us/photo/my-images/692/ejemplo1s.jpg/[/B][/URL]
  #4 (permalink)  
Antiguo 14/07/2011, 10:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: Estructuras con divs flotantes y posición

si, implementalo con divs, porque generalmente se usan divs para armar el layout, ya que como span (digamos su equivalente, pero de línea) no tienen carga semantica.
Pero trata de evitar esto.
Saludos.
  #5 (permalink)  
Antiguo 14/07/2011, 11:22
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Estructuras con divs flotantes y posición

El efecto a conseguir sería como ya dije este:
http://imageshack.us/photo/my-images/692/ejemplo1s.jpg
Y el código implatado HTML, este:
Código:
<div id="todo-container">
		<div id="primer-container">
		
			<div id="bloque1">
				...contenido..
			</div>
			<div id="bloque2">
				...contenido..
			</div>
		</div>
		
		<div id="sengundo-container">
			...contenido..
		</div>
		
		<div id="tercer-container">
			<div id="bloque3">
				...contenido..
			</div>
			<div id="bloque4">
				...contenido..
			</div>
		</div>
	</div>
Quería saber ahora cuales serían los selectores, propiedades y valores adecuados, para que se vaya ajustando el contenido de los mismos según se añada o elimine el contenido.

Nosé si puede ser esto una "div mania"
  #6 (permalink)  
Antiguo 14/07/2011, 13:42
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: Estructuras con divs flotantes y posición

asi como lo tienes está bien, con los links que te pasé podes resolverlo. yo no te lo hago porque no te sirve, mas vale probá y si te equivocas en algo volves a preguntar que alguien seguro te va a responder.

La div manía hace referencia a que no uses div para todo, por ejemplo para un título ya que para esto existe h1-h6 lo que aporta semántica al contenido.

Saludos.
  #7 (permalink)  
Antiguo 15/07/2011, 01:22
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 6 meses
Puntos: 252
Respuesta: Estructuras con divs flotantes y posición

La div-manía se te pasa cuando tienes que modelar el código HTML que ha hecho otra persona y no lo puedes tocar, porque cuando es tu propio HTML lo puedes modificar a antojo y no te comes la cabeza, si no tienes elementos suficientes, añades un div, pero cuando no puedes hacer eso, ahí si te rompes los sesos para buscar lo que quieres con lo que tienes. Luego es cuestión de práctica.

Etiquetas: class, divs, float, position, span
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 04:21.