Publicado em 2 de jan.

deve ser uma falhazinha minha...

#desenvolvimento-frontend

Bom, pra variar, no IE7 funciona perfeitamente. Mas no Firefox não funciona, fica torto.

Alguém pode me ajudar?

obs: Peguei esse exemplo na internet. Não lembro aonde, estou tentando melhorar o sistema.

E tenho mais uma dúvida:

É recomendável eu criar uma imagem já com opacidade ou eu é melhor eu filtrar por CSS ???

OBRIGADÃO,

Lucas Martins.

ESTE É O CÓDIGO INTEIRO DO ARQUIVO EXTERNO CSS (estilo.css)

body {

	font: normal 11px Tahoma, Verdana, 'Trebuchet MS', Sans-Serif;
	margin: 0;
	background: #D3E6EA;
	text-align: center;
}

#geral {
	width: 100%;
	height: 100%;
	margin: 0;
}

#geral .topo {

	width: 100%;
}

.topo .logo {

	width: 128px;
	float: left;
}

.topo .titulo {

	float: left;
	padding-top: 100px;
	font: bold 17px Tahoma, Verdana, 'Trebuchet MS', Sans-Serif;
	color: navy;
	text-transform: uppercase;
}

#geral #status {

 font: normal 17px Verdana,Helvetica,sans-serif;
}

#geral .login {

	margin: 0 auto;
	width: 27%;
	border: 2px solid navy;
	height: 78px;
	background-color: navy;
	text-align: center;
}

.label {
	width: 20%;
	background-color: #C2CFDF;
	float: left;
	height: 37px;
	padding-top: 12px;
	text-align: right;
	padding-right: 2px;
}

.botao {
	margin: 3px;
	font: bold 11px;
	padding: 5px;
}

.input_form {
	width: 80%;
	background-color: #F2F2F2;
	float: left;
 padding-top: 8px;
	padding-left: 2px;
	height: 37px;
	text-align: left;
}

input {

	font-size: 13px;
}

.inp {
	border: 1px solid #7F9DB9;
}

.fundo {
	bottom: 0;
	right: 0;
	position:absolute;
}

.opacidade {
	-moz-opacity: 0.3;
	filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=37);
}

-----------------------------------------------

ESTE É O CÓDIGO INTEIRO DA PÁGINA PRINCIPAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="ajax.js" type="text/javascript" language="javascript"></script>
	<style type="text/css">
 <!--
 @import url(estilo.css);
 -->
	</style>
</head>
<body>
<div id="geral">
	<div class="topo">
 <div class="logo"><img src="sisadmin.png" border="0"></div><!--logo-->
 <div class="titulo">Login do Usuário</div><!--titulo-->
	</div><!--topo-->
	<div id="status"></div><!--status-->
	<form name="formulario" id="formulario" method="POST" action="#">
	<div class="login">
 <div class="label">Usuário</div>
 <div class="input_form"><input type="text" name="login" id="login" size="22" class="inp"></div>
 <div class="label">Senha</div>
 <div class="input_form"><input type="password" name="senha" id="senha" size="22" class="inp"></div>
 <input type="button" value="Logar" onClick="java script:return Send();" class="botao">
	</div><!--login-->
	</form>
</div><!--geral-->
<div class="fundo"><img class="opacidade" src="lin_agt_wrench.png" border="0"></div><!--fundo-->
</body>
</html>

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

brcontainer· 2 de jan.

falar a verdade é que seu layout esta desestrututrado

você poderia fazer algo mais simples

a tambem coisas não meio estranhas

exemplo:

-moz-opacity: 0.3;
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=37);

faça assim:

-khtml-opacity: 0.37;/Mac/
opacity: 0.37;/CSS3 já suportado pelo Firefox e Opera/
-moz-opacity: 0.37;/Mozilla/
filter:Alpha(opacity=37);/internet explorer/
isso tambem você poderia mudar um pouco:

.input_form {
width: 80%;
background-color: #F2F2F2;
float: left;
padding-top: 8px;
padding-left: 2px;
height: 37px;
text-align: left;
}

isso são apenas dicas

agora respondendo a pergunta, é melhor usar o CSS mesmo, pois ficaria mais leve

porem pode variar conforme sua ideia

abraço ;)

lucasmartins· 3 de jan.

Valew pelas dicas Silverfox.

Mas o que eu poderia mudar no input_form ???

E mais uma coisa, esta propriedade: filter:Alpha(opacity=37);

funciona tanto no IE6 como no IE7 ??

Abraços!!!

Ainda estou esperando uma ajuda no layout, pois acho que está estruturado sim.

lucasmartins· 10 de out.

Ah, fiz melhor, mudei todo o meu site:

www.lucasmartins.com.br

espero que esteja tudo certo com ele, hehe...

VOTEM EM MIM NO PEIXE GRANDE http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Abraços!

brcontainer· 10 de out.

Tem muita falta Semântica ainda, prescisa melhorar ;)

lucasmartins· 11 de out.

Tem muita falta Semântica ainda, prescisa melhorar ;)

Como assim?

:blink:

Guilherme Rambo· 11 de out.

@lucasmartins Leia isto: http://pt.wikipedia.org/wiki/Sem%C3%A2ntica

[]'s