Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Satinka

[Resolvido] Como controlar borda do fieldset?

Por , em Desenvolvimento frontend

Recommended Posts

Satinka    0

Satinka
Postado

Ola,

estou tentando aproximar ao maximo as bordas vertical e horizontal do fieldset, para perto dos campos do formulario por ele contido.

 

Nao estou conseguindo, apesar de ter tentado ajustar o padding (para zero), o line-height (para zero tb), a altura da caixa (bom essa foi no desespero)... Parece que ha uma distancia minima que nao pode ser modificada. Pior ainda, no IE a distancia minima para a borda inferior cresce para uns 30px - e me obriga a aumentar proporcionalmente a borda sup, para nao perder a simetria.

 

Será que a unica saida é substituir o fieldset por um (MAIS um...) DIV devidamente encolhido? <_<

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Nos forneça um link para que possamos ver realmente o que está acontecendo e, a partir daí, analisamos e apontamos uma sugestão para você, caso encontramos...

 

Ok? Sem um link, vai ser difícil... Ah! E para facilitar ainda mais, poste o trecho do CSS utilizado para formatar o fieldset e os outros elementos próximos...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Satinka    0

Satinka
Postado

Bem, aqui estao ambos,

o codigo html:

 

<div class="area_amarela" id="corpo">
				<div class="voltar" id="demo">
					<a id="volta" href="cli_demo.html"> demo </a>
				</div>
				<fieldset id="formulario">
					<form action="cli_login.php" method="post">
						Login:  <input type="text" name="login" size="8" maxlength="15"/>
						Senha:  <input type="password" name="senha" size="8" maxlength="8" />
						<input class="input" id="botao" type="submit" value="Entrar" />
					</form>
				</fieldset>
			</div>

e o CSS:

 

body {
	background-color:#FFFFFF;
	margin:0;
	padding:0;
	font-style: normal;
	font-variant: normal;
	font-weight:bold;
	font-size:12px;
	font-family:sans-serif;
	line-height:20px; 
	letter-spacing: 1px;
	text-align:justify;
	color:#FFFFFF; 
}
.area_amarela {
	background-color:#F3AC00;
}
#corpo {
	float:left;
	width:454px;
	height:303px;
	margin-right:35px;
	margin-left:35px;
}
#demo{
	margin-top:20px;	
	margin-right:10px;	
	margin-bottom:90px;	
	margin-left:400px;	
}
#formulario{
	float:top;
	margin-left:50px;
	padding-top:12px;
	padding-bottom:0px;
	width:330px;
	text-align:center;
	border:solid 1px #FFFFFF;
}
.input{
	border: solid 1px #ABADAA;
	color:#2B3444;
}	
#botao{
	background-color:#FFFFFF;
}

 

Ainda nao defini o doc-type. Abaixo estou colocando o arquivo html completo, caso o extrato acima nao seja suficiente.

Valeu...

 

<html>
	<head>
		<title>ÁREA DE ACESSO RESTRITO</title> 
		<style type="text/css">
			@import "css/comum.css";
			@import "css/clientes.css";
		</style>
	</head>
	<body>
		<div id="pagina">  
			<div id="tela">
				<div class="area_azul" id="faixa">
				</div>
				<div class="coluna area_azul">
				</div>
				<div class="area_amarela" id="corpo">
					<div class="voltar" id="demo">
						<a id="volta" href="cli_demo.html"> demo </a>
					</div>
					<fieldset id="formulario">
					<form action="cli_login.php" method="post">
						Login:  <input type="text" name="login" size="8" maxlength="15"/>
						Senha:  <input type="password" name="senha" size="8" maxlength="8" />
						<input class="input" id="botao" type="submit" value="Entrar" />
					</form>
					</fieldset>
				</div>	
				<div class="coluna area_azul">
				</div>
			</div>
			<div id="rodape">
			</div>	
		</div> 
	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo, float: top; não existe.

Copiei seu código e colei-o aqui, no entanto não vejo qualquer problema.., ou melhor não percebi bem sua questão, será qe você quer aproximas os inputs à borda do fieldset?

 

Cumprimentos,

webflex

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

E outra coisa, devido à ausência do Doctype, você pode ter muita dificuldade em deixar da maneira que você deseja. Não afirmo que haverá diferença, mas ao utilizar um Doctype (preferencialmente Strict... :assobiando), você assegura que sua página deverá ser exibida corretamente em qualquer browser. O maior problema será com o IE6 talvez (como sempre), mas com o DTD definido já é um ótimo ponto de partida...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Satinka    0

Satinka
Postado

Bem,

pretendo validar como strict mesmo, mas estava pensando em deixar isso por ultimo (insegurança de noobie), ja vi que nao é uma boa ideia.

Quanto ao "problema", é uma questao de design: sim, eu queria que a borda se aproximasse ao maximo dos campos do input, deixando no maximo uns 8 px de padding "real" - falo do efeito visivel final (top e bottom). Na pratica ja defini padding:0px; e nada mudou, nao consigo reduzir a altura delimitada pela borda (tentei tambem zerar margin e line-height, deu na mesma).

 

Aproveitando para mais uma duvida, se eu usar um conditional comment para apontar para um file css só de hacks pro IE, ainda vou poder validar a pag (x)html?

 

Brigadin pela ajuda, a ambos :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

essa é a minha real??

 

ou é como você quer fazer?

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Satinka    0

Satinka
Postado

Essa é a imagem atual, tal como ela é mostrada por praticamente todos os browsers.

O que eu queria era diminuir o espaço entre borda e inputs, que no momento está por volta de 20px / 0.7cm (nao medi mas me parece ser isso, grosso modo), para a metade do valor ou ate um pouco menos: uns 7 px. Tem como?

 

PS da outra vez postei sem querer 3 vezes a mesma mensagem, porque a pagina nao está carregando ate o fim e nao sei em que ponto ela se interrompe. Infelizmente nao achei opçao para deletar meus posts repetidos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Primeiro, sempre que for escrever um CSS, zere todos os margins e paddings.

* { /* seletor global */
	margin: 0;
	padding: 0;
}
Veja oque acontece, e vá setando as propriedades que você deseja

Compartilhar este post

Link para o post
Compartilhar em outros sites

Satinka    0

Satinka
Postado

Uhulll deu certinho!

Só nao entendo porque nao funcionou quando zerei margin e padding direto na classe do formulario.

Taí algo que vou adotar daqui pra frente, em todo site.

Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Satinka    0

Satinka
Postado

Topico mais do que resolvido, claro.

 

Mas...

 

sobrou uma duvida.

Fui verificar se ja nao tinha feito algo assim no css padrao (que todos os files do site acessam), e de fato eu tinha começado o site zerando assim:

 

body {
	background-color:#FFFFFF;
	margin:0;
	padding:0;
/*etc */
}

Porque nao funcionou, e precisei do seletor global? "body", de certa forma, nao funciona da mesma maneira?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não.

o "body", é o "corpo" do documento.

Nem todas as propriedades são herdadas. Por exemplo, um formulário herda do body, o tamanho da fonte, mas não herda margins e paddings.

 

O seletor global *, aplicou margin: 0, e padding: 0, em TODOS OS ELEMENTOS, diretamente.. não por herança... mas diretamente mesmo.

Como se você listasse todas as tags, e aplicasse.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Léo Bader    0

Léo Bader
Postado

Se você quer zerar a margin e o padding de um elemento, voce coloca no CSS a tag desse elemento

 

usando o * ele vai atribuir para TODAS as tags do html como margin e padding 0px. Se voce tiver algum h1, h2, h3... e p. A margin deles já eram.

mas no seu caso você tinha que definir apenas no fieldset margin e padding 0px;

 

fieldset {
   margin:0;
   padding:0;

Caso queira que tenha legend mas que ele não seja mostrado

 

fieldset legend {
   display:none;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Satinka    0

Satinka
Postado

Agora entendi. Pensei que toda caracteristica aplicavel a um elemento sempre fosse herdada por este. Por isso eu nao conseguia prever os resultados...

Viva o seletor global entao rsss aí nao tem surpresas.

MUITO obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

usando o * ele vai atribuir para TODAS as tags do html como margin e padding 0px. Se voce tiver algum h1, h2, h3... e p. A margin deles já eram.

Então Léo Bader, o problema é ainda maior.

Os navegadores interpretam e atribuem diferentes margins e paddings para os h1, h2, h3.. por isso que eu prefiro sempre, zerar tudo com o seletor global, e ai sim, aplicar oqnto exatamente eu quero. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Assim "igualamos" por baixo os browsers, e setamos oque queremos... pois às vezes demora para lembrar desses detalhes :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Léo Bader    0

Léo Bader
Postado

Ah então... Eu também faço isso. É muito melhor.

Mas só falei aquilo no caso da Satinka. Pra chamar atenção dela caso tenha algum h1, h2 nos html dela...

 

 

Nada deeeemais :rolleyes:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito