como aplicar un padding a un fieldset

ciberpata · #1 (**permalink**) 19/09/2007, 02:54

Saludos:
Estoy intentando separar el border superior de un fieldset del resto de los campos del formulario, pero no funciona.
Mi regla es:

fieldset {
padding-bottom: 10px;
}

No se puede acaso hacer esto.

Gracias

PatomaS · #2 (**permalink**) 19/09/2007, 03:01

Hola

Si es posible, puede que tengas algún problema con otras reglas.

Mira este ejemplo:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		#Base { width: 100%; height: 100%; background-color: #ccc;}
		fieldset { border: 1px solid #f00; padding: 10px;}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<p>&nbsp;</p>
	<form id="formulario" method="post" action="">
		<fieldset>
			<p>texto</p>
		</fieldset>
	</form>
	<p>&nbsp;</p>
</div>
</body>
</html>

Los colores y bordes son para que se vea más fácil lo que hice.

Felicidad

ciberpata · #3 (**permalink**) 19/09/2007, 03:18

Tu codigo funciona, pero en el mio no me va. mi codigo es:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
<link href="css/p.css" rel="stylesheet" type="text/css">
</head>

<body>
<form name="form1" method="post" action=""><fieldset><legend>Datos de Usuario</legend>
    <div><label>Usuario</label>
    <input name="usuario" type="text" id="usuario">
    </div>
    
    <div><label>Contrase&ntilde;a</label>
    <input name="contrase&ntilde;a" type="text" id="contrase&ntilde;a"></div>
    <div>
    <input type="submit" name="Submit" value="Enviar"></div>
</fieldset>

<fieldset><legend>Datos de Trabajo</legend>
    <div><label>Nombre y apellidos</label>
    <input name="usuario" type="text" id="usuario">
    </div>
    
    <div><label>calle</label>
    <input name="contrase&ntilde;a" type="text" id="contrase&ntilde;a"></div>
    <div>        
</fieldset>
</form>
</body>
</html>

Y mis estilos

Código:

fieldset {
    width: 46%;
    margin-left: 1%;
    float: left;
    height: 150px;
    padding-top: 200px;
}

legend {
    color: red;
}

div {
    margin-left: 5px;
    margin-bottom: 5px;
    /*border: 1px solid red;*/
}

div label {
    width: 30%;
    float: left;
    color: green;
    /*border: 1px solid green;*/
}

input {
    background-color: gray;
    border: none;
    color: yellow;
    padding: 0px;
}

PatomaS · #4 (**permalink**) 19/09/2007, 06:56

Hola

He tomado tu html y le he hecho un par de correcciones:

tenías atributos id duplicados
tenías atributos id con caracteres no válidos
te sobraban aperturas de capa

Aquí lo puedes ver. No he usado tus estilo sino que he puesto solo el margen para el fieldset. 100px por lado, que es bastante evidente y lo notarás.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Documento sin t&iacute;tulo</title>
		<link href="css/p.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			fieldset {padding: 100px;}
		</style>
</head>
<body>
	<form name="form1" method="post" action="">
		<fieldset>
			<legend>Datos de Usuario</legend>
			<div>
				<label>Usuario</label>
				<input name="usuario" type="text" id="usuario">
			</div>
			<div>
				<label>Contrase&ntilde;a</label>
				<input name="contrase&ntilde;a" type="text" id="contrasena">
			</div>
			<div>
				<input type="submit" name="Submit" value="Enviar">
			</div>
		</fieldset>
		<fieldset>
			<legend>Datos de Trabajo</legend>
			<div>
				<label>Nombre y apellidos</label>
				<input name="usuario" type="text" id="usuario2">
			</div>
			<div>
				<label>calle</label>
				<input name="contrase&ntilde;a" type="text" id="contrasena2">
			</div>
		</fieldset>
	</form>
</body>
</html>

Si no te funciona. con lo que tienes, ve agregando los estilos uno a uno y mira a ver que pasa.

No lo he podido probar en Explorer, pero en Firefox y Opera funciona bien.

Felicidad

ciberpata · #5 (**permalink**) 19/09/2007, 10:15

Muchas gracias, porque lo habia mirado un ciento de veces y no había visto el problema.

Un saludo