Publicado em 29 de abr.

[Resolvido] Problema com Fieldset e botões de menu

Boa tarde.

Estou com problemas no meu código, já tentei modificar inúmeras vezes.

Não é somente no fieldset, mas este é o que está em foco agora. Não tenho link , mas meu código segue abaixo.

Eu quero remover o fieldset, pois o mesmo dá problema no IE (a caixa fica pela metade). Outra coisa é o botão Span de OK. fica desalinhado com ou sem fieldset.

e quando eu tiro o fieldset, não consigo alinhar novamente nada, nem com CSS. Agradeço desde já ajuda. Segue os códigos:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta content="keywords" name="gs, GS, sistemas, sistema, desenvolvimento de sistemas, desenvolvimento, gestao industrial, gestao comercial, gestao, empresas, empresarial, assessoria, empresa, gs assessoria, Nota fiscal eletronica, NFe, Nota fiscal, cupom fiscal, programa, software, executavel, PAF, ECF, comercio, computador, computadores, servidor, servidores, clientes" />

<meta name="description" content="Seja bem vindo ao site da GS Assessoria. Desenvolvemos sistemas para industria e comercio em geral, visite-nos" />

<meta name="Author" content="Melina GS Assessoria" />

<meta name="robots" content="index, follow" />

<meta name="revisit-after" content="30 days" />

<meta name="distribution" content="global" />

<meta name="rating" content="general" />

<meta name="content-language" content="pt-br" />

<meta name="copyright" content="Copyright 2000-2010" />

 

<title>GS Assessoria Desenvolvimento de Sistemas</title>

<link rel= "stylesheet" type= "text/css" href="gs-assessoria-css.css" />

</head>

<body>

 <div id="backimage">

 <img src="[http://img27.imageshack.us/img27/6625/logogs32.png"](http://img27.imageshack.us/img27/6625/logogs32.png) id="esquerdabanner" alt="GS Assessoria [logomarca]"/>

 <img src="[http://img406.imageshack.us/img406/5043/banngs.png"](http://img406.imageshack.us/img406/5043/banngs.png) id="direitabanner" alt="Desenvolvimento de Sistemas"/>

 </div>

 <div id="menulogin">

 <form action="./?do=login" method="post">

 <fieldset>

 <legend>Área do usuário</legend>

 <p><label for="username">Usuário:</label><input type="text" id="username" name="username" /></p>

 <p><label for="username">Senha:</label><input type="password" id="password" name="password" /></p>

 <p class="botoes"><span><button type="submit">OK</button></span></p>

 </fieldset>

 </form>

 </div>

 <div id="menuhoz">

 <li><a href="./index.html" title="Página inicial">Início</a></li>

 <li><a href="./trabalhos.html" title="Sistemas">Sistemas</a></li>

 <li><a href="./contato.html" title="Entre em contato">Contato</a></li>

 <li><a href="./faq.html" title="Perguntas Frequentes">FAQ</a></li>

 <li><a href="./noticias.html" title="Notícias">Notícias</a></li>

 <li><a href="./downloads.html" title="Downloads">Downloads</a></li>

 <li><a href="./portfolio.html" title="Portfólio">Portfólio</a></li>

 </div>

	<div id="conteudo">

 <h1>Sistemas</h1>

 <hr></hr>

 <p><br></br> GGGT

 <br></br> GGG

 </p>

 <hr></hr>

 </div>

	</body>

	</html>

CSS

/ Documento CSS - GS Assessoria /

/Inicio /

* {

 padding : 0;

 margin : 0;

 list-style : none;

 }

 

 body {

 background : #FFF;

 }

 

 h1 {

 text-align : Left;

 font-family : "Trebuchet MS", Tahoma, "Lucida Bright", Garamond;

 font-size : 20px;

 color :#FF9D1E;

 }

 p {

 text-align : left;

 font-family : Tahoma, "Lucida Bright", Garamond;

 font-size : 15px;

 color : #171A33;

 }

 h2, h3, h4, h5, h6, h7 {

 text-align : left;

 font-size : 15px;

 font-family : Tahoma, "Lucida Bright", Garamond;

 }

	/*DIV do Banner, 1ª img logo, 2º img letras*/

 #backimage {

 width : 100%;

 height : 140px;

 }

 #esquerdabanner {

 float : left;

 }

 #direitabanner {

 float : right;

 }

	/*fim DIV do banner */

	/*menu de login */

 #menulogin {

 clear : both;

 width : 19%;

 margin-left : 1%;

 float : left;

 display: block;

 margin-top : 2.0em;

 }

 #menulogin fieldset {

 margin-bottom : 10px;

 padding : 12px;

 }

 #menulogin legend {

 display : none;

 }

 #menulogin fieldset p {

 position : relative;

 }

 #menulogin fieldset p input {

 position : absolute;

 left : 70px;

 width : 60%;

 border : 1px inset #175BFF;

 background : #FFF;

 }

 #menulogin .botoes span {

 display : block;

 text-align : right;

 padding-right : 12px;

 padding-top : 1px;

 }

	/*Fim do menu de login */

 #menuhoz {

 margin : 0;

 padding : 0;

 text-align : center;

 width : 70%;

 height : 50px;

 margin-left : 25%;

 position : relative;

 }

 #menuhoz li {

 list-style:none;

 display:inline;

 }

 #menuhoz li a {

 float:left;

 border-top:0.1em solid #fff;

 border-right:0.1em solid #909090;

 border-bottom:0.1em solid #909090;

 border-left:0.1em solid #fff;

 width:6.0em;

 background:#dae3f6;

 color:#000;

 text-align:center;

 padding:0 0.2em 0.2em 0;

 text-decoration:none;

 }

 #menuhoz a{

 background:#dae3f6;

 color:#333;

 border-color:#fff #5882d5 #5882d5 #fff;

 }

 #menuhoz a:hover{

 background:#36c;

 color:#fff;

 border-color:#000 #fafafa #fafafa #000;

 }

 #conteudo {

 color : #9CB5F1;

 margin-left : 25%;

 position : relative;

 margin-right: 5%;

 position : absolute;

 border : px solid #dae3f6;

 width : 70%;

 }

	/*Fim do CSS */

Pessoas NÃO CONSEGUI ALTERAR O TÍTULO - Embora eu tenha acabado de conseguir arrumar o CSS Dos menus ! Desculpae :/

Discussão (11)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

AlocK· 29 de abr.

não sou a pessoa mais indicada para te ajudar nisso mas alguma vezes com esse problema eu utilizo line-height no texto anterior ao input igual a altura da input entendeu?

se a input tem 20px de altura; voce seta "line-height:20px;" num elemento que contenha o texto que se refere ao input.

eu uso muito label

<style>
input{

height:20px;
}
.name{
line-height:20px;
}
</style>
<label class="nome" for="name">

Nome:

<input type="text" name="name">
</label>

algo assim

Meh· 29 de abr.

No caso, está assim:

<div id="menulogin">
 <form action="./?do=login" method="post">
 <fieldset>
 <legend>Área do usuário</legend>
 <p><label for="username">Usuário:</label><input type="text" id="username" name="username" /></p>
 <p><label for="username">Senha:</label><input type="password" id="password" name="password" /></p>
 <p class="botoes"><span><button type="submit">OK</button></span></p>
 </fieldset>
 </form>
 </div>e vai ficar assim :

<ul class="menulogin">
 <form action="./?do=login" method="post">
 <legend> Área do usuario </legend>
 <p><label for="username"> usuário:</label><input type="text" id=username" name="username" /></p>
 <p><label for="username">Senha:</label><input type="password" id="password" name="password" /></p>
 <p class="botoes"><span><button type="submit">OK</button></span></p>
 </form>
 </ul>

No CSS ele está assim :

#leftMenu {
 clear : both;
 width : 19%;
 margin-left : 1%;
 float : left;
 }
 #leftMenu fieldset {
 margin-bottom : 10px;
 padding : 12px;
 }
 #leftMenu legend {
 display : none;
 }
 #leftMenu fieldset p {
 position : relative;
 }
 #leftMenu fieldset p input {
 position : absolute;
 left : 70px;
 width : 150px;
 border : 1px inset #175BFF;
 background : #FFF;
 }
 #leftMenu .botoes span {
 display : block;
 text-align : center;
 padding-right : 12px;
 padding-top : 1px;
 }Eu vou por classe no lugar de div, o que mais eu troco ou tiro no CSS ? ;x

Evandro Oliveira· 29 de abr.

Melina, você quer envolver formulário numa lista????

é o contrário então, querida:

<form action="" method="post">
 <ul>
 <li><label>Nome</label><input type="text" /></li>
 <li><label>Senha</label><input type="password" /></li>
 </ul>
 <button type="submit">OK</button>
</form>

Meh· 29 de abr.

Não, são campos de login e senha . você mesmo quem me passou naquela base, lembra ?

eu quero tirar o fieldset porque no IE, a caixa que envolve fica pela metade :/

isso se for possível.. se quiser passo o código alterado, sem aquele problema no menu, que antes tinha resolvido..

Evandro Oliveira· 29 de abr.

Na base você tem

<form ...>
<fieldset> ... </fieldset>
</form>

substitua pelo conteúdo que lhe passei no post anterior, deve resolver.

Meh· 29 de abr.

Ok.. o fieldset saiu... mas o botão de OK ficou para fora de onde eu desejava :

o código saiu assim:

<div id="menulogin">
 <form action="" method="post">
 <ul>
 <li><label>Nome</label><input type="text" /></li>
 <li><label>Senha</label><input type="password" /></li>
 </ul>
 <button type="submit">OK</button>
 </form>
 </div>
#menulogin {
 clear : both;
 width : 19%;
 margin-left : 1%;
 float : left;
 display: block;
 margin-top : 2.0em;
 }
 #menulogin ul {
 margin-bottom : 10px;
 padding : 12px;
 background : #dae3f6;
 position : relative;
 color : #36C;
 }
 #menulogin legend {
 display : none;
 }
 #menulogin p input {
 position : absolute;
 left : 70px;
 width : 60%;
 border : 1px inset #175BFF;
 background : #FFF;
 }
 #menulogin form {
 display : block;
 text-align : right;
 padding-right : 12px;
 padding-top : 1px;
 }

Como colocar o botão de OK dentro do campo com outra cor ? Se precisar um print, estamos ae ^^

Evandro Oliveira· 29 de abr.

e onde você desejava o botão???

Meh· 30 de abr.

Dentro daquela parte azul clara O.o

Ele tá assim

/applications/core/interface/imageproxy/imageproxy.php?img=http://img594.imageshack.us/img594/4324/assim.png&key=7a3969a01fd1b953d35afaaadfdda895a470857d97115c16fbd8888e65da21f2" alt="Imagem Postada" />

Quero deixar assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img11.imageshack.us/img11/7659/ahd.png&key=3a21ba53ca29057ca233bf278d00b9a7e3a9ce39aa46cdb550d0cc084ce8813d" alt="Imagem Postada" />

Desnickadu· 30 de abr.

basta deixá-lo dentro do 'ul'

Evandro Oliveira· 30 de abr.

form { background: #azul_claro }

Meh· 30 de abr.

Uh, deu certo deixar dentro do <ul>

Obrigada pessoal, acho que agora paro de incomodar :)

Até mais, tenham um bom findi ! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif