Foros del Web » Creando para Internet » CSS »

Ayuda con mi codigo CSS+HTML

Estas en el tema de Ayuda con mi codigo CSS+HTML en el foro de CSS en Foros del Web. Tengo unas preguntas que me incomodan al ponerlas en practica cuando inserte codigo php xD. Código HTML: <div id= "muestrabackground" > <div id= "muestrafoto" > ...
  #1 (permalink)  
Antiguo 15/02/2011, 10:29
Avatar de VbOkonly  
Fecha de Ingreso: julio-2009
Ubicación: San Justo, Buenos Aires, Argentina
Mensajes: 490
Antigüedad: 14 años, 8 meses
Puntos: 5
Ayuda con mi codigo CSS+HTML

Tengo unas preguntas que me incomodan al ponerlas en practica cuando inserte codigo php xD.

Código HTML:
 <div id="muestrabackground">
      <div id="muestrafoto"></div>
      <div id="muestrainformacion"></div>
    </div> 
Código HTML:
#muestrabackground {
	height: auto;
	width: 800px;
	position: relative;
}
#muestrafoto {
	float: left;
	height: auto;
	width: auto;
	margin-left: 20px;
}
#muestrainformacion {
	float: left;
	clear: left;
	height: auto;
	width: auto;
	margin-left: 20px;
}
Esta bien aplicado CSS?, muestro con php y necesito tener en auto muestrafoto y muestra informacion, pero a la vez se que "todo lo que flota tiene que tener medidas exactas", lo probe y funcionó masomenos, pero necesito la ayuda de alguien mas experto si es posible ... a la larga los pequeños errores se notan ...
  #2 (permalink)  
Antiguo 15/02/2011, 14:26
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Ayuda con mi codigo CSS+HTML

Hola VbOkonly, no se bien cual es el problema pero prueba con:

Código CSS:
Ver original
  1. #muestrabackground {
  2.     width: 800px;
  3.     position: relative;
  4. overflow:hidden;
  5. }
  6. #muestrafoto {
  7.     float: left;
  8.     height: ... medida en px ...;
  9.     width: ... medida en px ...;
  10.     margin-left: 20px;
  11. }
  12. #muestrainformacion {
  13.     float: left;
  14.     height: ... medida en px ...; /*puedes poner o no el height, la capa crecerá según el contenido que tenga*/
  15.     width: ... medida en px ...;
  16.     margin-left: 20px;
  17. }


recuerda que el ancho total de una capa es igual a: padding+margin+width+border.

Si las capas flotadas superan en ancho total a la capa que las contiene entonces la capa que no quepa pasará a la línea siguiente (o sea, abajo, descuadrandote el diseño).

No des height:auto; a la capa padre, mas bien incluye overflow:hidden; con esto la capa padre entenderá que debe tomar el alto de acuerdo al alto de su capa hijo mas alta. Esto se conoce como "limpiar los float" puedes verlo en google.

Espero esta info te sea útil. cualquier cosa no me haya explicado bien nada mas pregunta.

Saludos.

Etiquetas: Ninguno
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:31.