Menu
I'm having trouble with this form I was creating. I started working on a old project and decided to start fresh and scrap the code. The project was a recreation of the Google homepage design. I wanted to have an exact design, except for some things which aren't really needed. The search box (form) moved right where I wanted, but because of the new logo, I had to place my search box on the hand during the animation. The problem is that my coordinates are how I wanted it, but the height and width won't change. This is my whole entire code:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Google</title>
<style>
.GoogleLogo {
position:absolute;
TOP:125px;
LEFT:575px;
}
.SearchBar {
position: absolute;
top: 355px;
left: 575px;
height: 30px;
width: 50px;
}
</style>
</head>
<body>
<div class="GoogleLogo">
<a href="https://www.google.com/?gws_rd=ssl#q=Google+logo+history&hl=en&oi=ddle"><img src="../../Pictures/Google2.gif" alt="Google" width="400" height="231" border="0" /></a>
</div>
<div class="SearchBar">
<form>
<input type="text" placeholder="Search..." required>
</form>
</div>
</body>
</HTML>
Is there a way to change the height and width without 'damaging' anything. I want the class, .SearchBar, to respond to my coding of which I changed the height and width. I changed it to 550 pixels, and it still doesn't work, thank you for taking the time to read this.
359
The size property sets or returns the value of the size attribute of a search field. The size attribute specifies the width of a search field (in number of characters). The default value is 20. Tip: To set or return the maximum number of characters allowed in the password field, use the maxLength property.
You have to place your cursor between the url bar and search bar. The cursor will change the shape to bidirectional arrow and pressing it will allow you to change size of the search bar.
For a responsive full page height, set the body element min-height to 100vh. If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.
In order to change the with of the actual input element, you need to, well... change the width of the actual input element. You've changed the div, but not the input.
.SearchBar {
position: absolute;
top: 355px;
left: 575px;
}
.SearchBar input {
height: 30px;
width: 50px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
