Foros del Web » Creando para Internet » HTML »

como evitar las tablas?

Estas en el tema de como evitar las tablas? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/04/2008, 23:07
 
Fecha de Ingreso: marzo-2008
Mensajes: 237
Antigüedad: 9 años, 9 meses
Puntos: 6
como evitar las tablas?

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.

Última edición por razer; 03/04/2008 a las 23:12
  #2 (permalink)  
Antiguo 03/04/2008, 23:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: como evitar las tablas?

Prueba con:

Cita:
#tableleft {
text-align:left;
float: left;
}
#tableright {
text-align:right;
float: right;
}
Mikel.
  #3 (permalink)  
Antiguo 03/04/2008, 23:54
 
Fecha de Ingreso: marzo-2008
Mensajes: 237
Antigüedad: 9 años, 9 meses
Puntos: 6
Re: como evitar las tablas?

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

es imposible?
  #4 (permalink)  
Antiguo 04/04/2008, 01:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: como evitar las tablas?

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.
  #5 (permalink)  
Antiguo 04/04/2008, 11:34
 
Fecha de Ingreso: marzo-2008
Mensajes: 237
Antigüedad: 9 años, 9 meses
Puntos: 6
Re: como evitar las tablas?

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.
  #6 (permalink)  
Antiguo 04/04/2008, 14:08
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: como evitar las tablas?

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.
  #7 (permalink)  
Antiguo 04/04/2008, 17:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: como evitar las tablas?

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.
  #8 (permalink)  
Antiguo 05/04/2008, 20:37
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 11 años, 11 meses
Puntos: 5
Re: como evitar las tablas?

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>


Última edición por Marcos071; 05/04/2008 a las 20:43 Razón: Error en texarea...
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 00:13.