HTML Como fazer esse menu: HTML5 + CSS

Renan Leite BL · 11 de novembro de 2017

Fala galera, de boas?

Eu fiz um menu no photoshop e estou tentando passar para HTML5 e CSS, mas estou enfrentando problemas =(

Esse é o link de como ficou no photoshop: https://ibb.co/kyY03G

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

Esse é o link de como está ficando no HTML5 e CSS: https://ibb.co/daff3G

Eu até conseguiria centralizar esse input(buscar no site) mas teria que usar margin negativa...

Eu queria que tudo ficasse dentro do meu Header que será meu menu Horizontal... (Estou fazendo da forma mais correta?)

Meu código html está assim:

<!DOCTYPE html>
<html>
<head>
	<title>WorLoc</title>
	<link rel="stylesheet" type="text/css" href="_css/style.css">
</head>
<body>
	<header>
		<img src="_img/logo.png" id="logo">
		<div id="divBusca">
			<input type="text" id="textoBusca" placeholder="Buscar no site">
		</div>	
	</header>
</body>
</html>

Meu css está assim:

body {
	margin: 0;	
	padding: 0;
}

header {
	position: absolute;
	width: 1600px;
	height: 58px;
	background: #1884e0;
}

header img#logo {
	margin-left: 170px;
	margin-top: 10px;
}

#divBusca{
  position: relative;
  background-color:white;
  border:solid .5px;
  border-radius:15px;
  width:150px;
  height: 30px;
  margin-top: 0px;
  margin-left: 340px;
}

#textoBusca{
  float:center;
  background-color:transparent;
  padding-left:5px;
  font-style:italic;
  font-size:15px;
  border:none;
  height:32px;
  width:150px;
}

DiF · 11 de novembro de 2017

@Renan Leite BL Olá, no início é sempre complicando entender como codificar seus designs.

Alguns pontos:

Não use a posição absoluta para elementos que serão o "wrapper"( pacote)

No caso , o header precisa ter a posição relativa e seus "filhos" a posição absoluta.

Se quiser que eles fiquem lado a lado, defina no CSS o display com inline-block.

Um exemplo: https://jsfiddle.net/dife/krvzj285/

Mas claro está longe de ser o que você quer mas é umas dicas.

primeiro separe os setores, depois você popula

Veja como eu fiz o jogo de cores ali só para mostrar cada elemento.

Renan Leite BL · 11 de novembro de 2017

@DiF Valeu Dif, tu é meu heroi cara! hahahaha Entendi as dicas, vai ajudar muito

adicionado 41 minutos depois

@DiF Mano, eu quase consegui mas não to conseguindo alinhar o Logo verticalmente no Header...

Eu coloquei assim no html:

<header>
	<div class="logo"><img src="_img/logo.png"></div>	
</header>

E assim no css:

body {
	margin:0;
}

header{
	width: 100%;
	height: 50px;
	background: blue;
	position: relative;
}

.logo{
  width: 200px;
  height: 50px;  
  display: inline-block;
  position: absolute;
  margin-left: 175px;
  margin-top: 5px; 
}

Coloquei margin-top: 5px; E aos meus olhos parece está alinhado verticalmente saca? Mas não é certeza kkk, teria algum comando para alinhar verticamente em relação ao header?

DiF · 12 de novembro de 2017

@Renan Leite BL Na verdade, não é o logo que você precisa se preocupar em alinhar verticalmente.

O jeito mais fácil de ter certeza de que tá 100% certo é você criar o elemento DIV e img do mesmo tamanho do elemento header. Assim todos terão o mesmo height.

Então se na imagem do logo, o height é o mesmo, basta você centralizar o logo e texto do logo no meio da própria imagem!

Em outras palavras, no CSS você se preocupa somente em posicionar o lado desejado com os tamanhos certos. O posicionamento certo do desenho do logo e o texto faça diretamente na imagem. Assim não tem erro.

Veja esse exemplo: https://jsfiddle.net/dife/krvzj285/1/

Nesse caso, usei o display: table, no header, display table-cell no logo, display inline-table no resto.

Há N maneiras de resolver, esta é apenas uma delas