0

Olá boa tarde gostaria de tirar umas duvidas estou começando a aprender agora , estou com um problema pra criar um campo de busca no meu site , gostaria de uma ajuda .

Gostaria de colocar esse sistema de pesquisa inserir a descrição da imagem aqui

No topo do meu site que seria esse inserir a descrição da imagem aqui

Sou iniciante na área quem poder me ajudar agradeceria muito !!!

Código CSS :

@charset "utf-8";
/* CSS Document */

body {
font-family:Calibri;
font-size:30px;
line-height:36px;
color:rgb(255,255,255);
text-align:left;
}

#topo {
	background:url(../imagens/topo.png);	
	width:1024px;
	height:190px;
	border-bottom:none;
	margin:auto;
	
}

.logo {
	float:left;
	background:url(../imagens/logoc.png);
	width:541px;
	height:133px;
	position:relative;
	margin:40px 0 0 -4px;

}

Código HTML Abaixo
<title>Untitled Document</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id ="topo">
<div = class="logo"></div>
</body>
</html>

Obrigado Pela Atenção !!! Abraços

1
  • Colocar em baixo do lado direito 19/05/2017 às 16:57

1 Resposta 1

0
<form action="">
    <input class="Busca-texto" type="text"> //Campo de busca
</form>

<style>
    .Busca-texto{
        width: 200px; //Largura do campo
        height: 35px; //Altura do campo
        float: right; //Posição do campo
        background-image: url('img/ic_search_white_24dp_1x.png'); //diretório e imagem do icone 
        background-position: left;  //posição do icone
        background-repeat: no-repeat; //Não repetir o icone <- COLOCA ISSO PELO AMOR DE ODIN
        background-color: #fff; //Cor do fundo do campo
        border: 2px solid #000; //Cor da borda do campo
        border-radius: 4px; //Curvatura da borda nas "quinas"
        text-indent: 25px; //Um espaçamento para n atrapalhar a img
    }
</style>
5
  • Eu coloco no CSS ou no index do HTML ? estou com essa duvida 19/05/2017 às 17:04
  • no HTML. a tag style faz com que você possa adicionar css dentro dela. mas se você quiser separar o HTML do css, basta copiar o css sem as tag <style></style> e colar no seu arquivo css
    – ODDY
    19/05/2017 às 18:23
  • Entendi só to meio perdido no <form action=""> <input class="Busca-texto" type="text"> //Campo de busca </form> , mais vou tentar aqui muito obrigado pela ajuda !! abraço 19/05/2017 às 18:44
  • Consegui , só não consigo poscionar ele no lugar que eu quero , mas muito obrigado pela ajuda !!! 19/05/2017 às 19:22
  • quando você cria um formulário de peenchimento, você tem que colocar esse "<form>" e mais algumas coisas que vai dentro dele, para ele fazer a ligação com PHP, ir para a página de resultado e etc. o campo <input type="text"> e padrão para fazer um campo de peenchimo. você pode fazer outros tipos de campo com input, botão, caixa de marcar opções, campo de colocar texto dentre outras coisas. esses 2 vão no HTML. e de nada ^^
    – ODDY
    19/05/2017 às 20:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .