Foros del Web » Creando para Internet » CSS »

Alinear botones de difenrentes divs

Estas en el tema de Alinear botones de difenrentes divs en el foro de CSS en Foros del Web. Buenos dias estoy teniendo un problema que no se me ocurre como arreglar tengo 4 divs los cuales contienen una etiqueta p con un texto ...
  #1 (permalink)  
Antiguo 16/03/2009, 09:57
 
Fecha de Ingreso: junio-2008
Mensajes: 87
Antigüedad: 9 años, 6 meses
Puntos: 0
Alinear botones de difenrentes divs

Buenos dias estoy teniendo un problema que no se me ocurre como arreglar

tengo 4 divs los cuales contienen una etiqueta p con un texto y un boton,

los divs tiene ancho fijo, y alto variable por que no conozco la longitud de los textos.

los divs estan flotados a la izquierda por lo que se ponen uno al lado del otro.

y lo que quiero hacer y no puedo es que los botones queden en la misma linea.

se enteinde??

la unica cosa con lo que pude lograr un efecto similar es fijando el alto y poniendole posicion al boton pero no me sirve por que no conzco el tamlo del texto y si todos los textos son muy cortos queda mal y si son muy largos tambien.

alguien sabe como se puede hacer para que se alinien dinamicamente segun el tamaño del texto???

gracias!!!

pego el codigo para que lo puedan ver:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
	.box {
	border:#000000 1px solid;
	width: 200px;
	height: 450px;
	float: left;
	margin:2px;
	}
	
	.box-fix {
	border:#000000 1px solid;
	width: 200px;
	height: 450px;
	float: left;
	margin:2px;
	}
	.box-fix input {
	position:absolute;
	top:900px;
	}
</style>
</head>
<body>
<p>	
asi es como queda
</p>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
  <input name="button" type="button" value="Boton"/>
</div>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<input type="button" value="Boton"/>
</div>

<p>
y asi es como quiero que quede pero necesito que quede asi sin el psoition: absolute ni el height fijo en el css
</p>

<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
  <input name="button" type="button" value="Boton"/>
</div>
<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<input type="button" value="Boton"/>
</div>
</body>
</html> 
  #2 (permalink)  
Antiguo 16/03/2009, 11:54
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Alinear botones de difenrentes divs

Saludos!!

No se si lo que quieres realmente es lo que valla a servir, puesto que si no sabes cuanto texto vas a tener, y todos los botones se van a ver a la misma altura, entonces tendras un problema si el texto se alarga demasiado, porque el texto se pondra sobre el boton y no se dejara ver.

Te recomiendo que pruebes esto:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-gt">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.box {
border: 1px solid #000000;
margin: 2px;
width: 200px;
height: 450px;
float: left;
}
.box-fix {
border: 1px solid #000000;
margin: 2px;
width: 200px;
height: 450px;
float: left;
}
.box-fix input {
position: absolute;
top: 900px;
}
#pie {
text-align: center;
color: #ffffff;
display: inline;
height: 3em;
}
.ejemplo {
font-size: 0.8em;
font-weight: bold;
position: relative;
top: 2em;
}

</style>
</head>
<body>
<p> asi es como queda
</p>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren&nbsp; </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<p>
y asi es como quiero que quede pero necesito que quede asi sin el
psoition: absolute ni el height fijo en el css
</p>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input name="button" value="Boton" type="button" />
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input value="Boton" type="button" />
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input value="Boton" type="button" />
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input value="Boton" type="button" />
</div>
</body>
</html>
Modifique un poco tu codigo, e hice que el boton siempre estuviera en la parte de abajo de el texto, creo que es lo que mejor va.

Me dices que te parece no?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 16/03/2009, 12:06
 
Fecha de Ingreso: junio-2008
Mensajes: 87
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Alinear botones de difenrentes divs

Gracias por la sugerencia pero no es lo que necesito. por ahi me exprese mal. lo que necesito es que los botones queden en la misma linea sin importar el largo que tenga el texto. o sea quiero un bloque llamemosle cuadro, en el cual se muestra un p con texto y cuando ese p termine se muestr un boton. de estos cuadros va a haber varios digamos 4 flotados a la izquierda que se van a acomar uno al lado del otro. hasta aqui no hay complegidad el codigo en css para hacer eso es muy simple solo se pone el ancho del cuadro y el float:left; y ya esta. ahora el problema es el siguiente. necesito que los botones se alinien. que que queden todos a la misma altura, la unica forma que encontre de hacer eso es poniendo le un alto fijo al cuadro (div) y usando position:relative, se le especifica al input las coordenadas donde debe mostrarse y listo, estan todos en la misma linea, ahora bien si el texto es muy corto queda mucho espacio en blanco, y si el texto es muy largo el boton se pone por encima del texto queda mal de las dos formas, quiero saber si hay alguna dorma de hacer esto con css. sin fijar la altura del cuadro que contiene al p y al input.

Gracias!!
  #4 (permalink)  
Antiguo 17/03/2009, 13:31
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Alinear botones de difenrentes divs

Hola j4v13r, no termino de entenderte pero mira esto y haber si damos con lo que quieres.

Código:
ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline;
}
li {
	margin: 0px;
	padding: 0px;
	display: inline;
}
p {
	margin: 0px;
	padding: 0px;
	display: inline;
}

HTML:

<ul>
<li><p>texto</p><input type="button" value="fgfdgfdg" />
</li>
<li><p>texto</p><input type="button" value="jhgjhgjhjhgfj" />
</li>
<li>
  <p>textfgfdgfdggo</p>
  <input type="button" value="hjhgjhgjhgjhgjhgjhgjhgjhgj" />
</li>
</ul>
  #5 (permalink)  
Antiguo 17/03/2009, 14:21
 
Fecha de Ingreso: junio-2008
Mensajes: 87
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Alinear botones de difenrentes divs

Cita:
Iniciado por talmente Ver Mensaje
Hola j4v13r, no termino de entenderte pero mira esto y haber si damos con lo que quieres.

Código:
ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline;
}
li {
	margin: 0px;
	padding: 0px;
	display: inline;
}
p {
	margin: 0px;
	padding: 0px;
	display: inline;
}

HTML:

<ul>
<li><p>texto</p><input type="button" value="fgfdgfdg" />
</li>
<li><p>texto</p><input type="button" value="jhgjhgjhjhgfj" />
</li>
<li>
  <p>textfgfdgfdggo</p>
  <input type="button" value="hjhgjhgjhgjhgjhgjhgjhgjhgj" />
</li>
</ul>
Gracias por responder pero no es lo que busco. si pegas el cod que poste en un html y lo ves en el browser me vas a entender es simple quiero una caja con un texto y un boton que se puedan flotar y los botones queden alineados sin importar la cantidad de texto que alla. sin usar tablas ni fijando un largo para la etiqueta p que contiene el texto
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 15:11.