How to do CSS and HTML search field

Asked

Viewed 7,835 times

0

Hello good afternoon I would like to take some questions I’m starting to learn now , I have a problem to create a search field on my site , I would like a help .

I’d like to put this search system inserir a descrição da imagem aqui

At the top of my site that would be this inserir a descrição da imagem aqui

I am beginner in the area who can help me would appreciate very much !!!

CSS code :

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

Thank You For Your Attention!!! Hugs

php html css quest

  • Put down the right side

1 answer

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>

  • I put in CSS or HTML index ? I have this question

  • in HTML. the style tag makes it possible for you to add css into it. but if you want to separate HTML from css, just copy the css without the <style></style> tag and paste it into your css file

  • I got only half lost in the <form action=""> <input class="Text search" type="text"> //Search field </form> but I’ll try it here thanks a lot for the help !! hug

  • I got it , I just can’t get it in the place I want it , but thank you very much for the help !!!

  • when you create a filling form, you have to put this "<form>" and a few other things that goes inside it, to make the link with PHP, go to the result page and etc. the <input type="text" field and default to make a field of peenchimo. you can do other field types with input, button, check box options, place text field among other things. those 2 go in HTML. and you are welcome ^^

Browser other questions tagged php html css quest

You are not signed in. Login or sign up in order to post.