Visual estranho - CSS

Front-end

20/10/2014

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

Curtidas 0

Respostas

Marcelo Pastore

Marcelo Pastore

20/10/2014

Posta o codigo Janaina, posso tentar...
GOSTEI 0
Bruno Santana

Bruno Santana

20/10/2014

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í
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

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;
}
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Marcelo e Bruno?
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Marcelo e Bruno?


Pessoal, me ajudem.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

20/10/2014

Janaina, estranhamente tambem aparece no meu, tentei modificar, mas ta dificil, ainda tentando.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

20/10/2014

Janaina, estranhamente tambem aparece no meu, tentei modificar, mas ta dificil, ainda tentando.
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Ta dificil mesmo, rsrsrs, hoje abri o projeto e mexi algumas propriedades mas piora.
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

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

Soeuseijothaz

20/10/2014

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.
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Obrigada por responder e me ajudar, mas ficou assim:

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

Soeuseijothaz

20/10/2014

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:
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

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.
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

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.
GOSTEI 0
Wellington Silva

Wellington Silva

20/10/2014

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

Janaina Mendes

20/10/2014

jothaz, ficou melhor, aonde posso mudar a distancia dos inputs?
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Wellington, no momento não podendo mexer com framework, estou vendo um curso e não gostaria de misturar, entende?
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

jothaz, ficou melhor, aonde posso mudar a distancia dos inputs?


Uma forma simples incluir um <br/> entre os inputs:
            <div class="campo">
                <div class="label">
                    <label for="login">Login</label>
                </div>
                <input type="text" id="login" name="login" maxlength="15" />      
            </div>

          <br /><br />

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

Janaina Mendes

20/10/2014

Só no html mesmo, no css não tem como modificar mais?
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

Só no html mesmo, no css não tem como modificar mais?


Não me leve mal, mas estou achando este html meio confuso. Acho que não precisa de tantas div´s assim. Claro que é sempre recomendado usá-las, contudo em demasia é quase tão ruim quanto usar table.

Vou fazer em exemplo aqui e posto.

Tem como esperar um tempo?
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

Teste o exemplo abaixo e veja se lha ajuda.

Html:
    <fieldset id="fieldset_login">
        <legend>Login do Sistema</legend>
        <div>
            <label for="login">Login</label>
            <input type="text" id="login" name="login" maxlength="15" />
        </div>
        <div>
            <label for="senha">Senha</label>
            <input type="password" id="senha" name="senha" maxlength="15" />
        </div>
        
        <div>
            <input type="submit" value="logar" />

             <a href="">Esqueci a senha</a>
        </div>

        

    </fieldset>


Css:
* {margin:0; padding:0;}

html {
	font: 90%/1.3 arial,sans-serif;
	padding:1em;
	background:#fafafa;
}

body,input {
    font-family: Segoe UI, Arial, Times;
    font-size: 12pt;
}
 
form {
	background:#fff;
	padding:1em;
	border:1px solid #eee;

}

fieldset#fieldset_login {
	border:1px solid #ddd;
	padding:5em 5em 5em 5em;
    margin: auto;
    width: 20em;
}

fieldset div 
{
	float: left;
	margin:0.3em 0;
	clear:both;
	
}

 
fieldset a {
    padding-right: 60px;
    float: left;
    padding: .5em 0 1em 5em;
    display:inline;
}

label {
	float:left;
	width:5em;
	text-align:right;
	margin-right:1em;
}

input[type=text],input[type=password] {
	padding:0.15em;
    width:10em;
	border:1px solid #ddd;
	background:#fafafa;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
	
}

input:hover, input:focus {
	border-color:#c5c5c5;
	background:#f6f6f6;
} 

legend {
	color:#000;
	font-size:1.2em;
}

input[type=submit] 
{
	float: left;
    width: 100px; 
    font-weight : bold;
    padding: 2px 10px;
    font-weight: bold;
	display:inline;
	cursor:pointer !important; cursor:hand;    
}

input[type=submit]:hover {
	background-position:0 -26px;
}

.clear
{
	clear:both;
	border: 1px solid red;
}
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Verei amanha está bem...tenho que acordar cedo.
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Jothaz, não tem como fazer essas modificações apenas mexendo nesse:


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


eu te agradeço mesmo pela força que está me dando.
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

Jothaz, não tem como fazer essas modificações apenas mexendo nesse:


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


eu te agradeço mesmo pela força que está me dando.


Como já lhe disse o exemplo que você postou esta abordando a questão de uma forma complicada. Não é necessário ter div´s para label e para os inputs, isto só complica o html e dificulta o entendimento e manutenção. Não sei se é o caso, mas as vezes quando baixamos exemplos da internet para estudar eles vem com erro. No post/vídeo funciona mas no exemplo baixado não.

Só como informação no exemplo de css que enviei é basicamente o seu só que simplificado. Ele é um pouca maior que o que você postou porque faço um reset nos controles, formato o form, coloquei alguns efeitos aos receber e perder o foco e um clear pra div´s.

Posso tentar usar os mesmos seletores do seu exemplo original, mas vai haver mudança, pois como foi visto da forma que esta não funciona.
Se você puder esperar, posto o resultado depois
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

É que estou vendo um curso e não queria mudar totalmente mas se fosse algo meu seguiria seus exemplo, mas seguirei depois já que div´s não são necessarias.
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

Me dá um tempo que vejo aqui se consigo arrumar seu exemplo, só acho que ele não esta seguindo as melhores práticas.
Mas isso também não nenhuma heresia é que eu sou velho e ranzinza então acabo querendo simplificar as coias.

Tem como esperar para ver se consigo concerta o exemplo original, inclusive deixando a sopa de div´s?
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

Favor teste e verificar se atende as vossas expectativas.

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>
        <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>


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 {
    float: left;
    text-align: right;
    line-height: 1.9em;
    padding-right: 2px;
}
 
.campo  {
    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;
}


Resultado:

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

Uma das coisas mais difíceis é entender a lógica alheia, ainda mais quando você não concorda em todo com ela.

Mantive tudo igual ao original, mais uma vez ressalto que não é a forma de fazer, com a sopa de div´s e tudo.

O problema era o seguinte, onde estava:

.campo input {
    float: right;
}


Deve ficar:

.campo  {
    float: right;
}


Do jeito que estava a linah <div class="campo"> era nula pois não existia esta classe, como css não retorna erro simplesmente não faz o esperado.
No a referência .campo input aplicava-se somente ao controle imput e dai cagava tudo.

Qualquer coisa é só se manifestar.
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

jothaz, obrigada mesmo, mas do jeito que está, quando me ajudou, acho melhor não mudar mais, mas utilizarei esse seu exemplo para outros exemplos, abraço!!!
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

20/10/2014

jothaz, obrigada mesmo, mas do jeito que está, quando me ajudou, acho melhor não mudar mais, mas utilizarei esse seu exemplo para outros exemplos, abraço!!!


De nada. Precisando estamos ai!

Claro se você esta acompanhando um curso é melhor manter os exemplos.

E css, nem digo que é complicado, mas requer muita atenção.

Uma dica é colocar borda nas divs para ver como elas estão sendo renderizadas depois retire.
border:1px solid red;


Isto facilita muito.
GOSTEI 0
Janaina Mendes

Janaina Mendes

20/10/2014

Obrigada pela dica, farei isso daqui em diante.
GOSTEI 0
POSTAR