I've encountered an issue with a form I was developing. I decided to start fresh on an old project that included recreating the Google homepage design. While I aimed for an exact replica, some elements were unnecessary. The search box (form) moved to its intended position, but due to a new logo, I had to adjust its placement during animation. Although the coordinates are correct, the height and width refuse to change. Below is my complete 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>
Seeking assistance in adjusting the height and width of the .SearchBar class without disrupting the layout. Despite my attempts to set it at 550 pixels, it remains unchanged. Appreciate your time reading this dilemma.