Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Luiz_Augusto_Silveira

CSS Prolemas ao alinhar itens do menu e do newsletter.

Recommended Posts

Estou tendo problemas em alinhar  o primeiro link do menu igual aos outros e também estou com um problema de alinhamento entre um campo de email e um botão  da minha newsletter.

Alguém poderia me ajudar a arrumar esses problemas.

<!-- Topo do site -->
<section class="topodosite">
			<div class="logomarca">
				<img src="_imagens/logomarcaempresa.jpg" alt="LogoMarcadaempresa">
			</div>
			<nav class="menu">
				<a href="#" id="botaomenu" class="btn-menu"><i class="faz fa-bars fa-lg"></i></a>
				<ul class="menunavegacaoprincipal">
					<li><a href="">Home</a></li>
					<li><a href="">Empresa</a></li>
					<li><a href="">Serviços</a></li>
					<li><a href="">Blog</a></li>
					<li><a href="">Projeto</a></li>
					<li><a href=""><span>Nossos</span> Produtos</a></li>
					<li><a href="">Contato</a></li>
				</ul>
			</nav>
		</section>
<!-- Newsletter do site -->
				<div class="newsletter">
					<h1>Newsletter</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					<form action="">
					<input type="email" placeholder="Digite seu email!">
					<button type="submit"><i class="faz fa-paper-plane"></i></button>
					</form>
				</div>
/* Código css visitando um aparelho que possua um laergura de 320px*/
/* Topo do site */
.topodosite{
	width:100%;
	height:160px;
	margin:0 auto;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.logomarca{
	width:60%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	float: left;
	margin-left:  20px;
}
/* Menu de navegação principal do
topo do site*/

/*Mostra o botão de abrir 
e fechar o menu do mouse 
na menor versão de 
dispositivo possível*/
.btn-menu{
	width:46px;
		height:46px;
		font-size: 1.2em;
		border: 1px solid rgba(0,0,0,0.50);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
		margin-bottom: 4%;
		color: #45c4e9;
		background-color: rgba(255,255,255,1);
		margin-right: 20px;
		float: right;
}
.menunavegacaoprincipal{
width:100%;
		height:auto;
		display:none;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		position:absolute;
		top:160px;
		left:0;
		padding: 5% 5%;
		background-color:#f8f8f8;
		overflow: auto;
		z-index: 999;
}
.menunavegacaoprincipal  li{
		width:100%;
		height: auto;
		border:0.5px solid rgba(255,255,255,1);
}
.menunavegacaoprincipal  li a{
	display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 100%;
		height: 100%;
		color: rgba(0,0,0,1);
		background-color:#45c4e9;
		padding: 3%;
		font-size: 1.7em;
}
.menunavegacaoprincipal  li a:hover{
	color:rgb(255,255,255);
}

/* Newsletter do site */
	.newsletter{
		width:100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
	}
	.newsletter h1{
		width:100%;
		font-size:36px;
	}
	.newsletter form{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin: 10% 0;
		text-align: left;
	}
	.newsletter form input{
		width:80%;
		height:46px;
		background-color: rgb(255,255,255);
	}
	.newsletter form button{
		width:20%;
		height:46px;
		color:rgb(255,255,255);
		background-color: #45c4e9;
		border:none;
		font-size: 14px;
	}
	.newsletter form button:hover{
		width:20%;
		height:46px;
		color:rgb(255,255,255);
		background-color: #424141;
		border:none;
		font-size: 14px;
		cursor: pointer;
}
@media only screen and (min-width: 1024px) {
  /* Topo do site */
		.topodosite{
			width:90%;
			height: 100px;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
		}
		.logomarca{
			width:200px;
			margin-left: 10px;
		}
		.logomarca img{
			width: 100%;
		}
		.menu{
			height: 100%;
		}
		.menunavegacaoprincipal{
			height:100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: none;
			align-items: center;
		}
		.menunavegacaoprincipal li {
			height: 100px;
			width: auto;
		}
		.menunavegacaoprincipal li:first-child {
			margin-left: 0;
		}
		.menunavegacaoprincipal li:last-child {
			margin-right:0;
		}
		.menunavegacaoprincipal li a{
			width: auto;
			height: 100px;
		}
		.menunavegacaoprincipal li a:first-child{
			margin: none;
		}
  
  
}

campodeemailebotaodanewsletterdesalinhadoss.thumb.png.84c187b26d578d34d6996b1ac034ab64.pngprimeiroiconedomenudesalinhado.thumb.png.bc30794db890c5acf2983ff50dc87395.png 

Editado por Luiz_Augusto_Silveira
Esqueci de colocar os códigos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×