Recreating the Google Homepage for The Odin Project

I am trying to recreate the Google homepage as part of a The Odin Project task. I had a hard time lining up the top right hand menu bar - should I have done it differently? Was the way I did it the correct way? Also, I didn't know you could have a UL list overlapping a div - is this wrong?

Any feedback on the code or the way I went about building this would be welcome.



`#wrapper {
position: absolute;
height: 500px;
width: 600px;
top: -48%;
bottom: 0;
left: -5.5%;
right: 0;
margin: auto;
}
nav ul {
position: absolute;
right: 0px;
width: 400px;
height: 70px;
display: inline;
line-height: 10px;
list-style-type: none;
font-family: Arial, sans-serif;
margin-top: 30px;
}
nav li {
padding-top: -10px;
display: inline-block;
padding-right: 10px;
text-decoration: none;
font-size: 13px;
vertical-align: top;
}
#bottom_nav {
position: absolute;
bottom: 0px;
left: 0px;
height: 20px;
width: 400px;
padding-bottom: 7px;
}
#bottom_nav ul {
display: inline;
list-style-type: none;
padding-left: 20px;
color: lightgrey;
font-family: Arial;
font-size: 13px;
}
#bottom_nav li {
display: inline;
padding-left: 20px;
color: lightgrey;
}
#bottom_nav li a {
color: 6E6E74;
}
#bottom_nav2 {
position: absolute;
bottom: 0px;
right: 10px;
height: 20px;
width: 230px;
padding-bottom: 7px;
}
#bottom_nav2 ul {
display: inline;
list-style-type: none;
color: lightgrey;
font-family: Arial;
font-size: 13px;
}
#bottom_nav2 li {
display: inline;
color: lightgrey;
padding-right: 20px;
}
#bottom_nav2 li a {
color: 6E6E74;
}
a:link {
color: #000;
text-decoration: none;
}
#picture_menu {
position: absolute;
right: 30px;
line-height: 40px;
width: 200px;
top: -7px;
}
#share {
border: 1px solid #dcdcdc;
color: #444!important;
background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
padding: 7px;
}
#share_icon {
position: absolute;
top: -5px;
right: 60px;
}
#menu_icon {
po

Your CSS isn't too bad, but there are three problems according to the CSS validator at W3C.

First of all, it complains about your padding-top: -10px; because you are not allowed to use negative padding values. From my tests, it appears you could remove this line without affecting anything, or you could change the value to margin-top: -10px; to shift the text up by 10 pixels.

Second and third, you reference the color #6E6E74 twice in your code as 6E6E74. You did your colors correctly in all other places, so this must just be a slip.

Your HTML is much worse. You can check that here at the W3C validator also.

First, you made the common problem of leaving the doctype out:




This lets browsers know which version of HTML you are using. This is the current version, which you should be using.

Second, you should enclose your entire HTML in a ` element.

Third, you need to have a element with a element. The element is the page title that appears on tabs. You can also link external files, like CSS and JS files, here, as well as specify which character set you are using, typically UTF-8:




Fourth, the HTML you posted needs to go in the element inside your tag. This is how your file should look:




Page title








Fifth, your img elements should always have alt attributes to help people with disabilities and search engines.

Sixth, you do not close elements with , you just leave them open.

Seventh, you have this:








That first is not closing an li element, it should probably be a . The first needs to be above the tag, and the second is invalid. I changed it this:








Eighth, you need to close your
element here:


New! Explore the Pyramids of Giza in Google Maps



Ninth, your elements should be
.

Tenth, you need to escape your spaces in this with %20:




Eleventh, you are not allowed to use elements inside elements. This solution appears to work for me:



• +Adam

• Gmail

• Images

-



-
\


-









Additionally, you have several of your

• elements like this:






• +Adam

`

I would either put that all on one line or split it up into three lines.

StackExchange Code Review Q#64520, answer score: 6