Foros del Web » Creando para Internet » CSS »

Div's que colapsan

Estas en el tema de Div's que colapsan en el foro de CSS en Foros del Web. Un saludo a todos, Tengo un problema con algunos div's que collapsan debido a que se encuentran insertados en una tabla, cuando la celda de ...
  #1 (permalink)  
Antiguo 20/01/2010, 16:53
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Div's que colapsan

Un saludo a todos,

Tengo un problema con algunos div's que collapsan debido a que se encuentran insertados en una tabla, cuando la celda de esta tabla es mas pequeña que el contenido o se disminuye el navegador estos colapsan y no se mantiene en linea.
Esto se debe a que estan flotando a la izquiera, existe alguna propiedad que fuerza a que se mantengan en su lugar y no permita reducir el tamaño de la tabla contenedora?


Este es el error:
https://sites.google.com/site/myfiles3000/

El código es el siguiente:

Html
Código:
<div class="btn">
	<a href="/gallery_edit?name=Problemas%20con%20la%20Galeria" title="Editar galería">
	
		<b>Problemas con la Galeria</b>- errores de layout. [Probar borrado, con OTRAS galerias, please]
</a><span></span></div>
CSS:
Código:
.btn {
float: left;
background-color: transparent;
background-image: url(static/img/btn_left.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 10px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}


.btn a{
float: left;
height: 40px;
background-color: transparent;
background-image: url(static/img/btn_stretch.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: left top;
line-height: 40px;
padding-top: 0pt;
padding-right: 10px;
padding-bottom: 0pt;
padding-left: 10px;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}


.btn span {
background-color: transparent;
background-image: url(static/img/btn_right.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
float: left;
width: 10px;
height: 40px;
}
Espero puedan ayudarme, de antemano mil gracias.
  #2 (permalink)  
Antiguo 20/01/2010, 17:00
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Div's que colapsan

la unica forma para evitar que colapsen es indicando un ancho fijo, y lo suficiente para mostrar el contenido en una sola linea, a la celda contenedora. cuando tiene un ancho fijo el navegador no debe mostrar atencion si el contenido se excede, el elemento debe seguir manteniendo el aspecto.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 20/01/2010, 17:28
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Div's que colapsan

Ya fué solucionado pero de todas formas mil gracias, la idéa era que el del centro
se adecuara al espacion ocultando el texto por largo que fuera. Quedo super ya que se puede ingresar cuanto texto el sistema permita, el boton sólo mostrara lo que alcanza en el espacion que le han asignado.

Saludos,

Así quedó el código:

Código:
.btn {
	float: left;
	background: url(static/img/btn_left.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 5px;
}
.btn a{
	float: left;
	height: 40px;
	background: url(static/img/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
	width:auto;
}
.btn span {
	background: url(static/img/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
	position:fixed;
}
/*------------------------*/
.btn_checkout { background-color: red; }
.btn_checkout span{position:fixed; background-color: red;}

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 05:03.