Foros del Web » Creando para Internet » CSS »

como aplicar un padding a un fieldset

Estas en el tema de como aplicar un padding a un fieldset en el foro de CSS en Foros del Web. Saludos: Estoy intentando separar el border superior de un fieldset del resto de los campos del formulario, pero no funciona. Mi regla es: fieldset { ...
  #1 (permalink)  
Antiguo 19/09/2007, 03:54
 
Fecha de Ingreso: junio-2003
Ubicación: Santiago de Compostela
Mensajes: 603
Antigüedad: 14 años, 5 meses
Puntos: 0
como aplicar un padding a un fieldset

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
__________________

Espero haber aprendido algo de tí.
A mi padre.
  #2 (permalink)  
Antiguo 19/09/2007, 04:01
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 8 meses
Puntos: 63
Ejemplo: Aplicando padding a fieldset

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 19/09/2007, 04:18
 
Fecha de Ingreso: junio-2003
Ubicación: Santiago de Compostela
Mensajes: 603
Antigüedad: 14 años, 5 meses
Puntos: 0
Re: como aplicar un padding a un fieldset

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;
}
__________________

Espero haber aprendido algo de tí.
A mi padre.
  #4 (permalink)  
Antiguo 19/09/2007, 07:56
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 8 meses
Puntos: 63
Re: como aplicar un padding a un fieldset

Hola

He tomado tu html y le he hecho un par de correcciones:
  1. tenías atributos id duplicados
  2. tenías atributos id con caracteres no válidos
  3. 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
__________________
¡ hey, hou, hou, hey !
  #5 (permalink)  
Antiguo 19/09/2007, 11:15
 
Fecha de Ingreso: junio-2003
Ubicación: Santiago de Compostela
Mensajes: 603
Antigüedad: 14 años, 5 meses
Puntos: 0
Re: como aplicar un padding a un fieldset

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

Un saludo
__________________

Espero haber aprendido algo de tí.
A mi padre.
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 20:52.