como evitar las tablas?

razer · #1 (**permalink**) 03/04/2008, 22:07

Hola, que tal, hago una pregunta. Lo que quiero hacer es sencillo.

Quiero hacer un formulario pero sin usar tablas.
Osea, por dar un ejemplo con tablas lo hariamos con 2 columnas (parte izquierda "Nombre" parte derecha el INPUT para escribir) por dar un ejemplo nada mas.

Bueno quiero hacer eso pero sin tablas, en lo posible que quede igual que con tablas, osea bien alineadito parte izq de derecha, bien prolijo.

alguien tiene idea?
ejemplos?

probe esto en CSS

Código:

#tableleft {
	text-align:left;

}
#tableright {
	text-align:right;
}

y luego en HTML usar los <div id="tableleft"></div>
pero no funciona. se nuestra la parte izq en la izq y la derecha en la derecha pero esta ultima mas abajo que la izq.... no en la misma linea.

Mikmoro · #2 (**permalink**) 03/04/2008, 22:36

Prueba con:

Cita:

#tableleft {
text-align:left;
float: left;
}
#tableright {
text-align:right;
float: right;
}

Mikel.

razer · #3 (**permalink**) 03/04/2008, 22:54

mejor, pero no queda como una tabla.
sigue estando un poquito mas abajo

es imposible?

Mikmoro · #4 (**permalink**) 04/04/2008, 00:00

No, no es imposible, y no puede quedar más abajo a causa de la css, al menos de los estilos que muestras. Se tiene que deber a otra cosa.

Lo mejor es que pongas tu código css y html para saber qué ocurre.

Mikel.

razer · #5 (**permalink**) 04/04/2008, 10:34

Acá esta el codigo HTML precisamente el body con la tabla :

Código:

<body>


<? include("menu.php"); ?>

<div id="titlevietopic">Titulo</div>
<div id="pedidosultimos">
<div class="viewpedido">



<div id="mensaje">
<div id="capaformulario">
<form id="formulario">
	
		<div id="tableleft">Nombre</div>
		<div id="tableright"><input type="text" class="inputformas2" name="nombre" maxlength="10"></div>
		<br>
	
		<div id="tableleft">Titulo</div>
		<div id="tableright"><input type="text" name="titulo" size="40" maxlength="70" class="inputformas2"></div>
	<br>
		<div id="tableleft">Comentario</div>
		<div id="tableright"><textarea id="elm1" name="comentario" rows="10" cols="35" class="inputformas2"></textarea></div>
	
	<br>
		<div id="tableleft">	
		<input type="button" value="Enviar" class="inputformdark" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))">
		</div>
	</form>
	</div>
</table>


</div></div>
</div>
<? include("repite_abajo.php"); ?>
 

</body>

Y aca los estilos de arriba:

Código:

#titlevietopic {
	width: 470px; 
	height:30px; 
	background-image: url("imagenes/fondotitlesolo.png") !important;
	background-repeat:no-repeat;
	background-image: none; 
	filter: none !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="imagenes/fondotitlesolo.png");
	margin-bottom:5px;
	padding-left:30px;
	padding-top:17px;
	color:#fff;
	font-weight:700;
	font-family:Georgia, "Times New Roman", Times, serif;
	float:left;
}

#pedidosultimos {
	float:left;
	width:98%;
	height:100%;
	margin-bottom:20px;
}

.viewpedido {
	width:475px;
	height:100%;
	float:left;
	margin-left:10px;
	margin-bottom:10px;
	font-weight:normal;
	text-align:justify;
	background:#edf7ff;
	padding:5px;
	line-height:1.5em;
	color:#000;
}

#tableleft {
text-align:left;
float: left;
}
#tableright {
text-align:right;
float: right;
}

Eso es todo.

Eourus · #6 (**permalink**) 04/04/2008, 13:08

Solo un aporte al código de razer.

Puedes sustituir el <div id="tableleft"> por un <label> y el <div id="tableright"> podría desaparecer.

Luego en el css le pasas las propiedades a label y a los input, textarea y demás respectivamente.

Mikmoro · #7 (**permalink**) 04/04/2008, 16:52

Hola, razer.

No es que se muestre más abajo, es que el texto tiene su propia altura establecida si no se la marcas de ninguna manera.

Prueba a poner este selector y verás lo que te digo:

#tableleft {
text-align:left;
float: left;
border: solid 1px;
line-height: 18px;
}

El truco de poner un borde provisional a las cosas es muy muy útil.

Mikel.

Marcos071 · #8 (**permalink**) 05/04/2008, 19:37

Aqui te dejo uno, espero te sirva...

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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#contieneform{width:300px; height:300px; margin:auto;}

#form{width:300px; height:300px; margin:auto; margin:auto;}

fieldset{color:#006699; border:solid 1px #006699; font-size:12px; height:300px; width:300px; margin:auto;}

#campos{ margin-top:50px;}

legend{ display:marker;}

#envio{width:50px; clear:left; margin-top:20px}

</style>
</head>

<body>


        <div id="contieneform">
        <form id="form" method="post" name="form" action="">
        <fieldset>
        <legend>Tu Formulario</legend>
        
        
		<div align="center" id="campos">
        <div>Nombre:<br />
        <input type="text" name="nombre" class="nombre"  />
        </div>

        <div>Título:<br />
        <input type="text"/>
        </div>

        <div>Comentario:<br />
        <textarea rows="5" cols="20"></textarea>
        </div>

         <div id="envio"><input type="submit" value="Enviar" />    
         </div>
          </div>
          </fieldset>
        </form>
        </div>
</body>
</html>