Ir ao conteúdo
  • Cadastre-se
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 

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×