Qual melhor forma de fazer este site?

chlins · Maio 28, 2012

Pessoal,

Estou desenvolvendo este site em html5 e preciso tirar diversas dúvidas:

Quais elementos devo usar POSITION ou FLOAT?
Quando devo usar imagens via CSS ou direto no HTML?
Esses 2 arcos top e bottom, tentei fazer um múltiplo background mas não funcionou (chrome).
Se for usar POSITION, devo colocar o RELATIVE na DIV GERAL (div que acomoda todo o site)?

Segue a imagem para uma melhor compreensão:

André do Vale · Maio 28, 2012

Pelo visto te falta experiência na área, pois abordar o assunto até consegue. Infelizmente não podemos te dizer como você irá trabalhar, isto é algo que você irá adquirir com o tempo, e aprendendo principalmente com os erros.

Sugiro começar aprendendo desde o básico:

http://www.maujor.com

chlins · Maio 28, 2012

Pelo visto te falta experiência na área, pois abordar o assunto até consegue. Infelizmente não podemos te dizer como você irá trabalhar, isto é algo que você irá adquirir com o tempo, e aprendendo principalmente com os erros.

Sugiro começar aprendendo desde o básico:

http://www.maujor.com

Não compreendo para que serve um FORUM quando recebo estas respostas.

Sei que é preciso aprender com o tempo, mas um usuário experiente saberia dizer que o LOGO dever ser usado um POSITION em relação a DIV HEADER e não um Float, por exemplo. Uma resposta relativamente simples para quem sabe.

Não estou pedindo para fazer o site para mim, mas sim tirar duvidas, que mesmo estudando ficam.

Se pegarmos 10 site de mesmo tema e vermos o código, terão diferentes formas e isso se aprende é com os usuários e não com o Maujor que mostra uma visão geral.

Eu acho que é para isso que seve um fórum, senão, qual utilidade, se tem o Maujor para ensinar tudo?

Tenho condições de fazer este site, já fiz mais complicado. Mas quero o fazer em HTML5 e usar a forma correta e não aleatória como muitos de nós fazemos, mesmo dando certo.

Valeu a intenção, mas não ajudou em nada.

André do Vale · Maio 28, 2012

Não compreendi sua revolta. Se diz que já fez sites mais complicados que este, então não deveria ter dúvida alguma.

Usar HTML5 não diferencia o uso do CSS. HTML5 é apenas a marcação de sua página, e o CSS continua agindo da mesma maneira.

E bem, o site que passei, assim como vários outros no Google, ou até mesmo a BUSCA do fórum, conseguem sanar essas dúvidas. Mas já que você deseja respostas para suas dúvidas, vamos lá:

R01: Não há como sabermos sem vermos o seu HTML e tampouco como foram feitos os seus cortes de imagem. Mas pela foto do layout não precisa utilizar posicionamento algum, somente trabalhar com 1 ou 2 elementos flutuantes, e espaçamentos (margem, padding, text-ident) já resolve.

R02: Quando a imagem faz parte do contexto. Não se esqueça da descrição, legenda, e tudo mais.

R03: Sim, múltiplo background funciona. Se não está funcionando, algo está de errado em seu(s) código/cortes. Outra maneira de funcionar no IE7+ é utilizando :after e :before (+ selectivizr).

R04: Posições absolutas e fixas tomam como pontos de referência o primeiro ancestral que estiver com posição relativa.

chlins · Maio 28, 2012

Segue o html:


<body>
<div id="main-total" class="">
<div id="main" class="">
	<header>
		<div id="head">
		<section class="social">
			<ul>
				<li><a class="fb over" href="" title="Siga-nos no Facebook" id="face" target="_blank">Facebook</a></li>
				<li><a class="tw over" href="" title="Siga-nos no Twitter" id="twitter" target="_blank">Twitter</a></li>
				<li><a class="in over" href="" title="Pagina no Linkedin" id="linkedin" target="_blank">Linkedin</a></li>
				<li><a class="gp over" href="" title="Recomende com o Google Plus" id="gplus" target="_blank">Google Plus</a></li>
			</ul>
		</section><!-- /social -->

			<div class="contatos">
				<a href="" class="faleconosco">fale conosco</p>
				<a href="" class="orcamento">orçamento</p>
			</div><!-- /contatos -->

				<div id="logo">
					<a href="#" title="aberzo - Traduzindo Palavras"><img src="images/logo-24b.png" alt="aberzo"></a> 
				</div><!-- /logo -->

			<div id="nav" role="navigation">
				<ul>	
					<li class="empresa"><a title="Empresa" href="/">Empresa</a></li>
					<li class="nav-servicos"><a title="Serviços" href="/">Serviços</a></li>
					<li class="nav-clientes"><a title="Clientes" href="/">Clientes</a></li>
					<li class="nav-trab"><a title="Trabalhe conosco" href="/">Trabalhe conosco</a></li>
				</ul>
			</div><!-- /nav -->
		</div><!-- /head -->
		</header>


	<div id="main-content">
		<section id="descricao">
			<p><span class="traducao">traduçao</span></p>
			<p><span class="translation">translation</span></p>
			<p><span class="interpretacao">interpretaçao</span></p>
			<p><span class="interpretation">interpretation</span></p>
			<p><span class="revisao">revisao-transcriçao</span></p>
			<p><span class="proffreading">profreading-voice-over</span></p>
		</section><!-- / -->
	</div><!-- /content-main -->

	<div id="footer" role="rodape">
		<p class="copy">© Copyright 2012, </p>
	</footer>
</div><!-- /main -->
</div><!-- /main-total -->
</body>

André do Vale · Maio 28, 2012

Veja só como a "coisa" muda de desenvolvedor para desenvolvedor. Este código seu por exemplo, eu trabalharia assim:

<!doctype html>
<html lang="pt-br" dir="ltr">
<meta charset="utf-8">
<title>iMaster 5/28/2012</title>

<header>
	<div class="social">
		<a href="" title="Siga-nos no Facebook" target="_blank">Facebook</a>
		<a href="" title="Siga-nos no Twitter" target="_blank">Twitter</a>
		<a href="" title="Pagina no Linkedin" target="_blank">Linkedin</a>
		<a href="" title="Recomende com o Google Plus" target="_blank">Google Plus</a>
	</div>

	<div class="contatos">
		<a href="" title="Fale conosco">Fale conosco</a>
		<a href="" title="Orçamento">Orçamento</a>
	</div>

	<h1> <a href="" title="aberzo - Traduzindo Palavras"><img src="images/logo-24b.png" alt="aberzo"></a> </h1>

	<nav id="nav">
		<a title="Empresa" href="/">Empresa</a>
		<a title="Serviços" href="/">Serviços</a>
		<a title="Clientes" href="/">Clientes</a>
		<a title="Trabalhe conosco" href="/">Trabalhe conosco</a>
	</nav>
</header>

<section id="main-content">
<p>traduçao</p>
<p>translation</p>
<p>interpretaçao</p>
<p>interpretation</p>
<p>revisao-transcriçao</p>
<p>profreading-voice-over</p>
</section>

<footer>
<p class="copy">© Copyright 2012</p>
</footer>

Com o HTML5 você também abre outra oportunidade: CSS3, e justamente nos seletores, onde pode evitar o uso excessivo de classes e IDs (apesar do DOM encontrar mais rápido os elementos nomeados com classes ou ID, isso lhe economizará código e lembrança de vários nomes). :thumbsup:

chlins · Maio 28, 2012

Cara, quando comecei a fazer o CSS algumas partes não funcionaram com o modo mais simples que você sugeriu e eu havia algo parecido. Com menos DIVS.

Por isso ao invés de resolver o problema do CSS mal feito, foi mais simples voltar com as DIVS. Mas penso em reavaliar esta estrutura, já que você me aconselha.

Mesmo o HTML mal estruturado, penso que o calcanha de aquiles de muitos e claro eu, seja o CSS.

Não entendi como seria o uso deste meu layout sem posicionamento e com poucos floats.

André do Vale · Maio 28, 2012

Talvez o mais simples, seja colocando um CSS Reset. Recomendo o do Meyer, mas você pode se adaptar a outros também. Você escolhe.

Com um reset você cria um ponto de igualdade para as formatações, e evitar ter de ficar contornando a todo instante formatações dos próprios navegadores. Ao se adaptar com um reset, fica tranquilo editar o resto. :thumbsup:

chlins · Maio 28, 2012

Talvez o mais simples, seja colocando um CSS Reset. Recomendo o do Meyer, mas você pode se adaptar a outros também. Você escolhe.

Com um reset você cria um ponto de igualdade para as formatações, e evitar ter de ficar contornando a todo instante formatações dos próprios navegadores. Ao se adaptar com um reset, fica tranquilo editar o resto. :thumbsup:

CSS desta home:


/*
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Ropa Sans', sans-serif;
*/


/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, abbr, address, big, cite, code, del, dfn, em, font, img, dl, dt, dd, ol, ul, li,fieldset, form, label{
list-style: none; margin: 0; padding: 0; border: 0; outline: 0; font-weight:normal; font-size: 100%; vertical-align:baseline; background:transparent; text-decoration:none;}
:focus {outline: 0;}
/* for IE 7+ */
aside, footer, header, nav, section{display:block;}



body{
background-image: url(images/bg-body.png);
font-family: 'Ropa Sans', sans-serif;
font-size: 13px;
color: #333;
width: 100%;
height: 100%;
}
.social a {width:36px; height:33px; background:url(images/sprite.png) no-repeat; display: block}

#main-total {
background: transparent;
width: 100%;
height:100%;
}

#main{
width: 980px;
height: auto;
min-height: 500px;
background: #FFF url(images/bg-curva-alto.png) no-repeat top right;
margin: 0 auto;
box-shadow:0 0 10px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}

/*HEADER*/
#head{width: 980px; height: 350px; padding: 0; margin: 0; }

.social{padding: 20px;}
.social li{float: left; display:block; background:none !important; -webkit-transition: background 0.3s ease-out;}
.over{text-indent:-9000px; overflow:hidden;}
.social a.fb {background-position:-10px  -12px }
.social a.fb:hover{background-position:-10px  -44px}
.social a.tw {background-position:-50px  -12px }
.social a.tw:hover{background-position:-50px  -44px}
.social a.in {background-position:-88px  -12px }
.social a.in:hover{background-position:-88px  -44px}
.social a.gp {background-position:-127px -12px }
.social a.gp:hover{background-position:-127px -44px}

.contatos{width:180px; height:50px; margin: 25px 0 0 25px;}
.contatos a{font-size:18px; letter-spacing:-0.5px; text-transform: uppercase; line-height: 25px; color: #777; }
.contatos a:hover{color: #333; }

#logo{margin-top:-75px; right:130px; position: absolute;}

#nav{width: 100%; text-transform: uppercase;}
#nav ul{float: right; padding-bottom: 5px; margin-top: 120px; margin-right: 60px; border-bottom: 1px dotted #999;}
#nav li ul { height: auto; position: absolute; z-index: 1000;}
#nav li {display: inline; font-size:20px; padding:2px 4px;}
#nav a{ color:#777; text-decoration: none; margin-left: 1px;}
#nav a:hover {color:#369;}
#nav a.first{margin-left:0 !important;}

#main-content{
width:940px;
height: auto;
min-height: 350px;
padding: 0 20px;
margin-top: 0;
}

#descricao{
width: auto;
height:auto;
float: right;
line-height: 23px;
margin: 22px 20px 0 0;
}

#descricao .traducao{font-size: 52px; font-weight: bold; color:#369;}
#descricao .translation{font-size: 36px; font-weight: bold; color:#009846; margin-left: 65px;}
#descricao .interpretacao{font-size: 52px; font-weight: bold; color:#369; margin-left: -10px;}
#descricao .interpretation{font-size: 36px; font-weight: bold; color:#009846; margin-left: 110px;}
#descricao .revisao{font-size: 46px; font-weight: 700; color:#369; margin-left: -10px;}
#descricao .proffreading{font-size: 52px; font-weight: bolder; color:#009846; margin-left: -90px;}

#footer{
width: 980px; 
clear: both;

}

footer p {
	font-size: 10px;
	background: url(images/images/bg-curva-base.png) right no-repeat;
}

Thiago Moraes · Maio 28, 2012

O layout tem largura fixa?

chlins · Maio 28, 2012

O layout tem largura fixa?

Deixei a DIV main que acomoda todos os elementos com tamanho de 980px, por conta da imagem do arco superior.

Estou com dificuldade em colocar a imagem inferior (um arco inverso) e a assinatura do lado esquerdo. (como está na imagem)

Dentro do arco, será um campo para acomodar informações e ou fotos (a depender da página)

Thiago Moraes · Maio 28, 2012

Nesse caso, se tratando de dimensões fixas, eu trabalharia com positions.

chlins · Maio 29, 2012

Pessoal,

Vendo a imagem abaixo, pergunto a vocês qual a melhor forma de usar a imagem curva inferior diferente nas páginas posteriores a home:

Tipo: a img curva com a foto, só será usada na HOME, nas outra a img curva é vazada.

No momento esta IMG está integrada ao rodapé, assim o conteudo (meio) fica livre para receber o que for com height: auto.

Devo criar uma div somente para acomodar esta img acima do rodapé?

Outra coisa, os traços que quero usar no meio da pag, só ficará por tras de tudo se usar position: absoluto e z-index?

Se não, tem outra forma?

chlins · Junho 10, 2012

Pessoal,

O que há de errado neste projeto?

Não estou conseguindo posicionar corretamente os elementos.

A imagem do site é esta que está acima.


<body>
<div id="main" class="">
	<span class="imagem-top"> </span>
	<header>
		<div id="head">
		<section class="social">
			<ul>
				<li><a class="fb over" href="https://www.facebook.com/pages/" title="Siga-nos no Facebook" id="face" target="_blank">Facebook</a></li>
				<li><a class="tw over" href="#" title="Siga-nos no Twitter" id="twitter" target="_blank">Twitter</a></li>
				<li><a class="in over" href="#" title="Pagina no Linkedin" id="linkedin" target="_blank">Linkedin</a></li>
				<li><a class="gp over" href="#" title="Recomende com o Google Plus" onClick="javascript:abrirGoogle();" id="gplus">Google Plus</a></li>
			</ul>
		</section><!-- /social -->

		<!-- GOOGLE PLUS -->
		<div id="google" class="google">
                <!-- <span>Nos recomende no Google +1!</span> -->
                <g:plusone></g:plusone>
           </div>
           <!--  -->

		<div class="idioma">
			<a href="#" title="Português">pt</a>
			<a href="#" title="English">en</a>
		</div><!-- /idioma -->

			<div class="contatos">
				<a href="faleconosco.html" class="contato" id="contato">fale conosco</a>
				<a href="#" class="orcamento">orçamento</a>
			</div><!-- /contatos -->

				<h1><a href="index.html" title="aberzo - Traduzindo Palavras"><img src="images/logo.png" alt="aberzo"></a> </h1><!-- /logo -->

			<nav id="nav" role="navigation">
				<ul>	
					<li class ="empresa"><a title="Empresa" href="empresa.html">Empresa</a></li>
					<li class ="nav-servicos"><a title="Serviços" href="servicos.html">Serviços</a></li>
					<li class ="nav-clientes"><a title="Clientes" href="clientes.html">Clientes</a></li>
					<li class ="nav-trab"><a title="Trabalhe conosco" href="trabalheconosco.html">Trabalhe conosco</a></li>
				</ul>
			</nav><!-- /nav -->
		</div><!-- /head -->
		</header>
		<!-- fim header -->

		<!-- MAIN CONTENT -->
	<div id="main-content">

		<section id="col-one">
			<span class=""> </span>
			<img src="images/logo-footer.png" alt="">
		</section><!-- /col-one -->

		<section id="clientes">
			<h2>Nossos clientes</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
		<br>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
			<a href="#" title=""><img src="3" alt=""></a>
		</section><!-- /clientes -->
		<div class="clear"></div>
	</div><!-- /content-main -->

	<footer>
		<p>©Copyright 2012 -  LTDA - <a href="#" title="">Design by </a></p>
	</footer>
</div><!-- /main -->	
</body>


/*
font-family: 'PT Sans Narrow', sans-serif;
font-family: 'Ropa Sans', sans-serif;
*/

a:link, a:active, a:visited {color: #305F9B;text-decoration: none;}
.clear{clear:both;}

a{ -moz-transition: color  0.5s; -webkit-transition: color 0.5s; -o-transition: color  0.5s; -ms-transition: color 0.5s; transition: color 0.5s;}

p { margin-bottom: 15px; } 
h1, h2, h3, h4, h5, h6 { margin-bottom: 5px; } 

body{
background-image: url(images/bg.jpg);
font-family: 'Ropa Sans', "Trebuchet MS",sans-serif;
font-size: 14px;
font-weight: normal;
position: relative;
color: #333;
width: 100%;
height: 100%;
color:#666;
margin: 30px 0px;
}
.social a {width:36px; height:33px; background:url(images/sprite.png) no-repeat; display: block}

/*GOOGLE PLUS*/
#google{display:none; font-size:15px; position: absolute; left:165px; top: 10px; z-index: 999; padding: 15px 0 0 10px;

/*	color: #666; 
background: none repeat scroll 0 0 #F5F5F5;	
width: 100px;     
text-align:center; 
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;*/
}

#main{
width: 980px;
height: auto;
min-height: 720px;
background-color: #FFF;
margin: 0 auto;
text-align:left;
box-shadow:0 0 10px rgba(0,0,0,0.5);
position: relative;
overflow: hidden;
position: relative;
}

.imagem-top {
background-image: url(images/bg-curva-alto.png);
width: 980px;
height: 257px;
position: absolute;
top:0;
right:0;
}

.imagem-bottom-home {
background:url(images/bg-curva-base2.png) no-repeat;
width: 722px;
height: 168px;
position: absolute;
bottom:0;
right:0;
}

.imagem-bottom {
background:url(images/bg-curva-base.png) no-repeat;
width: 722px;
height: 168px;
position: absolute;
bottom:0;
right:0;
}


/*HEADER*/
#head{width: 980px; height: 265px; padding: 0; margin: 0; position: relative;}

.social{width:190px; height:35px; margin-top: 20px; }
.social li{float: left; display:block; background:none !important;}
.over{text-indent:-9000px; overflow:hidden;}
.social a.fb {background-position:-10px  -12px }
.social a.fb:hover{background-position:-10px  -44px}
.social a.tw {background-position:-50px  -12px }
.social a.tw:hover{background-position:-50px  -44px}
.social a.in {background-position:-88px  -12px }
.social a.in:hover{background-position:-88px  -44px}
.social a.gp {background-position:-127px -12px }
.social a.gp:hover{background-position:-127px -44px}
.social li a:link, .social li a:active,	.social li a:visited{
-webkit-transition: background 0.5s ease-out;
-moz-transition: background 0.5s ease-out;
-o-transition: background 0.5s ease-out;
-ms-transition: background 0.5s ease-out;
transition: background 0.5s ease-out;
}

.contatos{width:100px; height:35px; margin: 20px 0 0 20px;}
.contatos a{font-size:18px; letter-spacing:0.5px; text-transform: uppercase; line-height: 25px; color: #888; display: block; }
.contatos a:hover{color: #333;}

.g-plusone{float: left; }

.idioma{float: right; position: absolute; top: 0; right: 10px}
.idioma a{text-decoration: none; font-size: 17px; padding: 2px 4px; width: 10px; height: 10px; background-color: #f4f4f4;
		text-align:center; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.idioma a:hover{text-decoration: underline; color: #369; background-color: #EFEFEF;}

header h1{margin-top:0; right:150px; position: absolute; }

#nav{width: auto; text-transform: uppercase;}
#nav ul{float: right; padding-bottom: 5px; margin-top: 190px; margin-right: 70px; border-bottom: 1px dotted #999;}
#nav li {display: inline; font-size:20px; padding:2px 6px;}
#nav a{ color:#777; text-decoration: none; margin-left: 1px;}
#nav a:hover {color:#369;}
#nav a.first{margin-left:0 !important;}

/*MAIN CONTENT*/
#main-content{
width:940px;
height: auto;
padding: 20px;
margin: 0;
background-image: url(images/tracos.png);
}

section#col-one{width: 300px; height: auto; min-height: 200px; float: left; margin-left: 20px; background-color: #f4f4f4;}

/*HOME*/
#descricao{width: 520px; height:auto; margin: 5px 0 0 20px; float: right;}
#descricao p{line-height: 35px; margin: 0 auto;}
#descricao .traducao{font-size: 52px; font-weight: bold; color:#369; margin-left: 110px;}
#descricao .translation{font-size: 36px; font-weight: bold; color:#009846; margin-left: 180px;}
#descricao .interpretacao{font-size: 52px; font-weight: bold; color:#369; margin-left: 90px;}
#descricao .interpretation{font-size: 36px; font-weight: bold; color:#009846; margin-left: 160px;}
#descricao .revisao{font-size: 48px; font-weight: 700; color:#369; margin-left: 80px;}
#descricao .proffreading{font-size: 50px; font-weight: bolder; color:#009846; margin-left: 0px;}

/*FOOTER*/
footer { background: #F8F6F1 url(images/logo-footer.png) no-repeat right 10px;
padding: 10px;
border-top: 2px solid #DDDDDD;
clear: both;
height: 5%;
}
footer p{font-size: 11px;

	text-shadow: 0 1px 0 #FFF;}


/*EMPRESA*/
section#empresa, section#servicos, section#clientes{width: 450px; float: right; margin: 0 45px 0 0;}
section#empresa h2{font-size: 25px; color: red; font-weight: 700; }
section#empresa, section#servicos, section#clientes, section#trabalheconosco p{font-size:16px; line-height: 22px;}

/*SERVICOS*/
section#servicos h2{font-size: 25px; color: red; font-weight: 700; }

/*CLIENTES*/
section#clientes h2{font-size: 25px; color: red; font-weight: 700;}
section#clientes a{}
section#clientes img{width: 50px; height: 50px; border:1px dotted #999; outline: 1px solid #369; padding: 5px; margin:5px}

/*TRABALHE CONOSCO*/
/*section#trabalheconosco h2{font-size: 25px; color: red; font-weight: 700; float: left; margin-left: 90px; margin-bottom: 10px;}
section#trabalheconosco form {width:330px; margin-left: 90px; float:left;}
section#trabalheconosco form input{border:1px solid #9a9a9a; height:14px; color:#666;  padding: 3px; -moz-border-radius:6px; border-radius:6px;}
section#trabalheconosco form select{border:1px solid #9a9a9a; height:24px; color:#666;  padding: 3px; -moz-border-radius:6px; border-radius:6px;}
section#trabalheconosco ul li{padding-bottom:5px;  font-size: 14px;}
section#trabalheconosco ul li label{
 color:#000;
 width:130px;
 text-align:right;
 float:left;
 margin-right:10px;
 cursor:pointer;
 font-size: 18px;
}

section#trabalheconosco .box-form input:hover, input:focus {-moz-box-shadow:0 0 3px #333; -webkit-box-shadow:0 0 3px #333; box-shadow:0 0 3px #333;}

section#trabalheconosco form input[type="submit"]{width:80px; height:25px; margin-top: 10px; padding: 0 10px; cursor:pointer; float: right;}
section#trabalheconosco form input[type="submit"]:hover{background-color: #DDD;	color: #000;}*/

/*///// FALE CONOSCO ///////*/
section#faleconosco{width:630px; height:auto; color:#000; padding:10px; margin-right:45px; float: right; background-color: #DDD;}

section#faleconosco h1 {font-family: Georgia; font-style:italic; margin: 0 10px; font-size:35px; font-weight:100; color:#666; border-bottom:1px dotted #999;}
.contatos {width:260px; color:#333; float:left; padding:10px 0; margin:0 50px 0 10px;}
.contatos h2 {font-size:20px; color:#369; margin:5px 0 0;}
.contatos p {font-size:16px; color:#333; margin:0; line-height: 18px;}

section#faleconosco .box-form input:hover, input:focus {-moz-box-shadow:0 0 3px #333; -webkit-box-shadow:0 0 3px #333; box-shadow:0 0 3px #333;}

section#faleconosco form {width:290px; float:left; margin:20px 0 10px;}
section#faleconosco input{border:1px solid #9a9a9a; height:18px; color:#666;  padding: 3px; -moz-border-radius:6px; border-radius:6px; vertical-align:middle;}
section#faleconosco form textarea{border:1px solid #9a9a9a; height:18px; color:#666;  padding: 3px; -moz-border-radius:6px; border-radius:6px;}
section#faleconosco ul li{padding-bottom:5px;  font-size: 14px;}
section#faleconosco label{width:70px; text-align:right; float:left; margin-right:10px; cursor:pointer; font-size: 16px; vertical-align:middle;}


section#faleconosco form input[type="submit"]{width:80px; height:25px; margin-top: 10px; padding: 0 ; cursor:pointer; float: right;}
section#faleconosco form input[type="submit"]:hover{background-color: #DDD;	color: #000;}

/*///// TRABALHE CONOSCO ///////*/
section#trabalheconosco {width:630px; height:auto; color:#000; -moz-border-radius:10px;
					border-radius:10px; padding:10px; margin-right:45px; float: right;}

section#trabalheconosco .trabalhe {width:600px; margin-left: 10px; border-bottom:1px dotted #999;}

section#trabalheconosco h3 {font-size:18px; font-style:italic; color:#666;}
section#trabalheconosco .contatos {width:260px; color:#333; float:left; margin:20px 40px 0 10px; background-color: #DDD;}
section#trabalheconosco h1 {font-family: Georgia; font-style:italic; font-size:35px; font-weight:100; color:#666;}
section#trabalheconosco .contatos h2 {font-size:20px; color:#369; margin:5px 0 0;}
section#trabalheconosco .contatos p {font-size:16px; color:#333; margin:0; line-height: 18px;}

section#trabalheconosco .contatos li {font-size:16px; color:#333; margin:0 0 0 35px; line-height: 18px; list-style: outside;}

section#trabalheconosco .box-form input:hover, input:focus {-moz-box-shadow:0 0 3px #333; -webkit-box-shadow:0 0 3px #333; box-shadow:0 0 3px #333;}

section#trabalheconosco form {width:320px; float:left; margin:20px 0 10px; background-color: #DDD;}
section#trabalheconosco form input{border:1px solid #9a9a9a; height:18px; color:#666;  padding: 3px; -moz-border-radius:6px; border-radius:6px;}
section#trabalheconosco ul li{padding-bottom:5px;  font-size: 14px;}
section#trabalheconosco ul li label{width:70px; text-align:right; float:left; margin-right:10px; cursor:pointer; font-size: 16px;}

section#trabalheconosco form input[type="submit"]{width:80px; height:25px; margin-top: 10px; padding: 0 ; cursor:pointer; float: right;}
section#trabalheconosco form input[type="submit"]:hover{background-color: #DDD;	color: #000;}

Arquivado

Qual melhor forma de fazer este site?

Recommended Posts

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante