¡¡Asking for A SEARCH BAR!- Google Project

Hola chicos! in this ocasion im putting the search bar and uhm, im triying with each element that i’been searching on internet (align-items, justify-content…) but i can´t put the search bar in the middle; can someone give me a hand on this and explain me why it doesnt work?

THE HTML CODE:

<div class="barrabusqueda">
	<form class="formulariodebarra" action="#" method="POST">

			<div class="inputdebarra">
				<input class="" type="search" placeholder="">
			</div>
			<div>
				<input class="botonclick" type="submit" value="Buscar con Google"/>
				<input class="botonclick" type="submit" value="Me siento con suerte"/>
			</div>
				
			</div>
	
			</div>

	</form>

		</div>

THE CSS CODE:

.barrabusqueda{
    padding: 10 40px 10 25px;
    position: center;
    margin: 0 auto;
    padding-top: 6px;
    height: 600px;
    align-content: center;
    align-items: center;
}
.barrabusqueda, .formulariodebarra, {
width: 200px ;
height: 50px;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
justify-content: center
}

.formulariodebarra{
    overflow: hidden;
	position: relative;

@pabloeoliveros ¡Hola hermano!, I belive you need to set the width in pixels on barrabusqueda to something like 600px and make sure the parent div has width 100%.
You have set ‘margin: 0 auto;’ but the div does not know how to auto align itself since the width is not set.

1 Like

My brother, thx for the sharing but it doesnt work. Maybe its a trouble with the html dont you think? :confused:

  <div class="barrabusqueda">
        <form class="formulariodebarra" action="#" method="POST">

            <div class="inputdebarra">
                <form action="/action_page.php">
                    <input type="text" placeholder="Search.." name="search">
                    <button type="submit">Submit</button>
                </form>
            </div>
            <div class="buttons">
                <input class="botonclick" type="submit" value="Buscar con Google" />
                <input class="botonclick" type="submit" value="Me siento con suerte" />
            </div>
        </form>
    </div>

CSS

* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}



.inputdebarra{
float:center;
margin:auto;
padding:auto;
text-align:center;
}

.buttons{
text-align:center;
}

Sorry, what? i don 't understand… :confused:

I have corrected slightly Html and used “float” in CSS , the field search is centered, do you want it to be centered inside buttons or on the page?

@pabloeoliveros Esto es mejor. Creo que este codigo es lo que buscabas.

Escriba el HTML así.

<div class="barrabusqueda">
  
  <form class="formulariodebarra" action="#" method="POST">

    <div class="inputdebarra">
      <input class="" type="search" placeholder="">
    </div>
    
    <div>
      <input class="botonclick" type="submit" value="Buscar con Google" />
      <input class="botonclick" type="submit" value="Me siento con suerte" />
    </div>

  </form>

</div>

Y el CSS así.

.barrabusqueda {
  width: 500px;
  border: solid;
  margin: 0 auto;
  height: 200px;
}

.formulariodebarra {
  display: flex;
  flex-direction: column;
  width: 100%;
}

input {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid red;
  height: 40px;
  margin-bottom: .5rem;
}

Hi! well, centered in the page it’s the goal (i mean, like google you know :slight_smile: )

Brandon! God bless you pal, well i’ve putted all the code as you tell me and it looks “good” in some ways but in others there’s need to re-localize the inputs and image of the right way:

@brandon_wallace It looks like this way

ok, i see, here is the code for html

<body>

<div class="flex-container">
  <div class="barrabusqueda">
   <form class="formulariodebarra" action="#" method="POST">
    <div class="inputdebarra">
      <input class="" type="search" placeholder="">
    </div>
    </form>
</div>
<form>
 <div>
      <input class="botonclick" type="submit" value="Buscar con Google" />
 </div>
</form>
</div>

</body>

and for css

<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  color: white;
  
}
</style>

you can choose what suits you well :slightly_smiling_face:

1 Like

Gusak! thanks a lot, in a few minuts i will test that code and ill tell you how it goes :wink: . But, apart of that; im making the bottons of search and really i want to look well but it seems like in height is a little bit passed away:

This is the code that im using for this:

Wich changes you think that may help ? :confused: .

¡hola! would you please share the code on https://codepen.io/?

1 Like

Sure, why not? Its on this page: https://codepen.io/pabloeoliveros/details/QWEJYpR .

PD: I’ve fixed the large of the buttons thx God but, (when you see it) we got a trouble making a divisory line between each botton and making them be
next to each other; not about another

hola! so here is the code, I have changed some classes to make things easier for myself :slight_smile: please have a look

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CodePen - Google Project Repo</title>
	<link rel="stylesheet" href="">

	<head>

	<body>
		<style>
			body {
				margin: 0;
				padding: 0;
				/* position:absolute; */
			}

			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			li {
				display: inline;
				float: right;
			}

			li a {
				display: block;
				text-align: center;
				padding: 10px 10px;
			}

			li a:hover {
				background-color: aquamarine;
			}


			.flex-container {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 200px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
								position: absolute;
			}

			.search {
				width: 300px;
				box-sizing: border-box;
				padding:10px;
				margin:2px;
				border:solid black 0.2px;
				border-radius: 5px;
			}
			.buttons{
				display:flex;
				text-align: center;
				justify-content: center;
			}

			button{
				box-sizing: border-box;
				margin-top:10px;
				margin-left:5px;
			}


		</style>
		<ul>
			<li>
				<a href="#arriba">Gmail </a>
			</li>
			<li>
				<a href="#arriba">Imágenes</a>
			</li>
			<li>
				<a href="#central">Icon</a>
			</li>
			<li>
				<a href="#footer">Profile</a>
			</li>
		</ul>

		<div class="flex-container">
			<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo">
			<div>
				<form action="#" method="POST">
					<div>
						<input placeholder="Search..." type="text" name="search" class="search">
					</div>
					<div class="buttons">
						<button type="submit" value="Buscar con Google">Buscar con Google</button>
						<button type="submit" value="Me siento con suerte">Me siento con suerte</button>
					</div>
				</form>
			</div>
		</div>
	</body>

</html>

@pabloeoliveros
so what I did: I removed decoration black cicrle for unordered list, then used display:flex for the buttons and logo, and also transform-translate to vertical and horizontal align, instead of two files css and HTML i put everything in HTML file using tag for css

1 Like

GUSAK! thank you for all the support, i used some intersting part of your code, and it works!
:smiley:

1 Like

ok, cool!
cheers,
Marina

1 Like