Fórum Visual estranho - CSS #498504

20/10/2014

0

Front-end

Estou vendo uma video aula montando uma simples tela de login, na video aula aparece tudo certinho, bonitinho, mas no meu todo torto, é por causa do navegador?

[img]http://arquivo.devmedia.com.br/forum/imagem/362748-20141020-182620.jpg[/img]
Janaina Mendes

Janaina Mendes

Responder

Posts

21/10/2014

Marcelo Pastore

Posta o codigo Janaina, posso tentar...
Responder

Gostei + 0

21/10/2014

Bruno Santana

Não sei se pode ajudar, passo por algumas coisas do tipo e creio que seja em relação as configurações da CSS sendo utilizadas, por exemplo quando tenho algumas coisas na tela utilizando position: relative e acontece de alguma mensagem aparecer na tela, os componentes na tela se "embaralham" todos ... não sei se é o caso aí
Responder

Gostei + 0

21/10/2014

Janaina Mendes

Marcelo e Bruno, postando aqui o codigo, html(jsp) e css, não sei existe alguma interferencia por ser jsp.


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
<link rel="stylesheet" href="css/global.css">
</head>
<body>
	<form method="post" id="login_form">
		<fieldset id="fieldset_login">
			<legend>Login do Sistema</legend>
			
			<div class="campo">
				<div class="label">
					<label for="login">Login</label>
				</div>
				<input type="text" id="login" name="login" maxlength="15" />		
			</div>
			
			<div class="campo">
				<div class="label">
					<label for="senha">Senha</label>
				</div>
				<input type="password" id="login" name="senha" maxlength="15" />		
			</div>
			
			<div class="campo">
				<input type="submit" value="logar" />					
			</div>
			<div class="campo">
				<a href="">Esqueci a senha</a>
			</div>
		</fieldset>
	</form>
</body>
</html>


css


@CHARSET "ISO-8859-1";

body,input {
	font-family: Segoe UI, Arial, Times;
	font-size: 12pt;
}

input[type=text],input[type=password] {
	width: 200px;
}

input[type=submit] {
	width: 100px; font-weight : bold;
	padding: 2px 10px;
	font-weight: bold;
}

fieldset#fieldset_login {
	margin: auto;
	width: 280px;
	padding: 50px;
}

.label {
	float: left;
	text-align: right;
	line-height: 1.9em;
	padding-right: 2px;
}

.campo input {
	float: right;
}

.campo a {
	padding-right: 60px;
	float: right;
	padding-top: 10px;
}

.main {
	min-height: 500px;
}

.rodape {
	padding: 5px;
	border-top: 1px dotted gray;
}

.cabecalho a {
	text-decoration: none;
}
Responder

Gostei + 0

22/10/2014

Janaina Mendes

Marcelo e Bruno?
Responder

Gostei + 0

23/10/2014

Janaina Mendes

Marcelo e Bruno?


Pessoal, me ajudem.
Responder

Gostei + 0

24/10/2014

Marcelo Pastore

Janaina, estranhamente tambem aparece no meu, tentei modificar, mas ta dificil, ainda tentando.
Responder

Gostei + 0

24/10/2014

Marcelo Pastore

Janaina, estranhamente tambem aparece no meu, tentei modificar, mas ta dificil, ainda tentando.
Responder

Gostei + 0

25/10/2014

Janaina Mendes

Ta dificil mesmo, rsrsrs, hoje abri o projeto e mexi algumas propriedades mas piora.
Responder

Gostei + 0

08/11/2014

Janaina Mendes

Ainda continuo com esse probleminha chato, alguem sabe o que eu posso fazer, tentar...? obrigada.
Responder

Gostei + 0

08/11/2014

Soeuseijothaz

Janaina,

Não tenho expertise em css, contudo já passei por um problema parecido.
Resolvi usando de uma lógica suína, fuçando para ver o que dá.

Ante só um aviso seus campos login e senha estão com o ID igual o que não é recomendado, então é melhor trocar.

Vamos a solução que eu dei.

No CSS , inclui position:absolute em .label:
.label 
{
    position:absolute;
    float: left;
    text-align: right;
    line-height: 1.9em;
    padding-right: 2px;

}


No HTML inclui um <br/> entre os campos:
            <div class="campo">
                <div class="label">
                    <label for="login">Login</label>
                </div>
                <input type="text" id="login" name="login" maxlength="15" />      
            </div>

            <br />

            <div class="campo">
                <div class="label">
                    <label for="senha">Senha</label>
                </div>
                <input type="password" id="senha" name="senha" maxlength="15" />      
            </div>


O resultado:
[img]http://arquivo.devmedia.com.br/forum/imagem/238223-20141108-221031.png[/img]


O puristas podem achar que estou cometendo heresia! kkkk
E pode existir uma solução mais elegante, eu não consegui achar e olha que pesquisei bastante.

Espero que lhe ajude.
Responder

Gostei + 0

09/11/2014

Janaina Mendes

Obrigada por responder e me ajudar, mas ficou assim:

[img]http://arquivo.devmedia.com.br/forum/imagem/362748-20141109-130536.jpg[/img]
Responder

Gostei + 0

09/11/2014

Soeuseijothaz

De nada.

Você este desenvolvendo em qual linguagem?

Esta usando qual browser?

Segue todos os códigos que usei. Tente usá-lo e veja se muda alguma coisa.

HTML:
        <fieldset id="fieldset_login">
            <legend>Login do Sistema</legend>
             
            <div class="campo">
                <div class="label">
                    <label for="login">Login</label>
                </div>
                <input type="text" id="login" name="login" maxlength="15" />      
            </div>

            <br />

            <div class="campo">
                <div class="label">
                    <label for="senha">Senha</label>
                </div>
                <input type="password" id="senha" name="senha" maxlength="15" />      
            </div>
     

             
            <div class="campo">
                <input type="submit" value="logar" />                 
            </div>
            <div class="campo">
                <a href="">Esqueci a senha</a>
            </div>
        </fieldset>


CSS:
body,input {
    font-family: Segoe UI, Arial, Times;
    font-size: 12pt;
}
 
input[type=text],input[type=password] {
    width: 200px;
}
 
input[type=submit] {
    width: 100px; font-weight : bold;
    padding: 2px 10px;
    font-weight: bold;
}
 
fieldset#fieldset_login {
    margin: auto;
    width: 280px;
    padding: 50px;
}
 
.label 
{
	position:absolute;
    float: left;
    text-align: right;
    line-height: 1.9em;
    padding-right: 2px;

}
 
.campo input {
    float: right;
   
}
 
.campo a {
    padding-right: 60px;
    float: right;
    padding-top: 10px;
}
 
.main {
    min-height: 500px;
}
 
.rodape {
    padding: 5px;
    border-top: 1px dotted gray;
}
 
.cabecalho a {
    text-decoration: none;
}


Com os códigos acima funcionou tanto no Chrome:
Responder

Gostei + 0

09/11/2014

Soeuseijothaz

Chrome:

[img]http://arquivo.devmedia.com.br/forum/imagem/238223-20141109-170424.png[/img]

Como no IE:
[img]http://arquivo.devmedia.com.br/forum/imagem/238223-20141109-170451.png[/img]

Bom vamos continuar os teste.
Responder

Gostei + 0

10/11/2014

Soeuseijothaz

Janaina,

Fiz outros teste aqui e pelo que vi o problema esta no line-height:

Orignalmente estava em:
line-height: 1.9em;


Alterei para 1.7em; e funcionou, ficando assim:
.label 
{
    float: left;
    text-align: right;
    line-height: 1.7em;
    padding-right: 2px;
}


Faça este teste e veja se funciona.

E claro pode retirar a linha position:absolute; e o <br/> do html.

Fico no aguardo.
Responder

Gostei + 0

10/11/2014

Wellington Silva

Se tem muita dificuldade com CSS recomendo a utilização do twitter bootstrap tem uma documentação incrível.
Responder

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar