I'm facing an issue and seeking guidance on how to make the footer and 'Google in different languages' fixed when hovering over the buttons. I'm attempting to create this on my own without referencing the Google homepage code in Chrome Dev Tools, so I'm unsure of how they positioned these two elements.
Below is the code I've been working on:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li class="button"><a href="#">Sign in</a></li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: <a href="#">Hindi</a><a href="#">Bangla</a><a href="#">Malayalam</a><a href="#">Marathi</a>
</p>
<footer>
<nav class="left">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<nav class="right">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">UseGoogle.com</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
The CSS stylesheet I'm using:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
I want to mention that I am still learning about CSS3 elements. While I have a good grasp on most CSS properties, there are some areas that I am new to. Once again, I don't need a complete debugging solution unless absolutely necessary. Please provide assistance specifically on the topic mentioned at the beginning in bold.