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:  
Renan Leite BL

HTML Como fazer esse menu: HTML5 + CSS

Recommended Posts

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;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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 :) 

    • Obrigado 1

    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

    ×