7
\$\begingroup\$

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 {
  position: absolute;
  top: -10px;
  right: 20px;
}
#header {
  position: relative;
  background-image: url("images/logo.png");
  height: 200px;
  width: 400px;
  background-repeat: no-repeat;
  left: 35%;
  top: 40%;
}
#searchbar {
  position: absolute;
  top: 64%;
  left: 55px;
  width: 580px;
  height: 30px;
  border: 1px solid #cdcdcd;
}
#microphone {
  position: absolute;
  top: 65%;
  left: 612px;
  background: url('images/microphone.png') no-repeat;
  height: 50px;
  width: 50px;
}
#search_button {
  position: absolute;
  top: 73.2%;
  left: 236px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}
#lucky_button {
  position: absolute;
  top: 73.2%;
  left: 347px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #444!important;
  font-size: 11px;
  font-weight: bold;
  padding: 8px;
  background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  border-radius: 2px;
}
#tag_text {
  background: url(images/mountains.png) no-repeat;
  background-position: left;
  padding-left: 40px;
  position: absolute;
  top: 85%;
  left: 180px;
  font-size: 13px;
}
#tag_text span {
  color: red;
}
#tag_text a:link {
  color: blue;
}
p {
  font-family: arial;
}
#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 40px;
  background: #f2f2f2;
  border-top: 1px solid #e4e4e4;
}
<nav>
  <ul>
    <li><a href="#+Adam">+Adam</a>
    </li>
    <li><a href="#gmail">Gmail</a>
    </li>
    <li><a href="#images">Images</a>
    </li>
    <div id="picture_menu">
      <li>
        <img src="images/block.png">
      </li>
      <li>
        <img src="images/bell.png">
      </li>
      <div id="share_icon">
        <li>
          <input type="button" value="Share" id="share"></input>
        </li>
      </div>
      <div id="menu_icon">
        <img src="images/monkey.png">
        </li>
  </ul>
  </div>
  </div>
</nav>
<div id="wrapper">
  <div id="header"></div>

  <input type="text" name="searchBar" id="searchbar">
  <div id="microphone"></div>
  <input type="button" value="Google Search" id="search_button"></input>
  </br>
  <input type="button" value="I'm Feeling Lucky" id="lucky_button"></input>
  </br>

  <div id="tag_text">
    <p><span>New!</span>  <a href="#Explore the Pyramids of Giza"> Explore the Pyramids of Giza </a> in Google Maps
      <p>
  </div>
</div>

<div id=f ooter>
  <div id="bottom_nav">
    <ul>
      <li><a href="#advertising">Advertising</a>
      </li>
      <li><a href="#business">Business</a>
      </li>
      <li><a href="#about">About</a>
      </li>
    </ul>
  </div>
  <div id="bottom_nav2">
    <ul>
      <li><a href="#privacy">Privacy & Terms</a>
      </li>
      <li><a href="#settings">Settings</a>
      </li>
    </ul>
  </div>
</div>

\$\endgroup\$
  • 1
    \$\begingroup\$ I don't have time to do a full review right now, but this will not validate: "Element div not allowed as child of element ul in this context" (among other errors). \$\endgroup\$ – cimmanon Oct 2 '14 at 13:56
  • \$\begingroup\$ Ah I thought as much, I'll see if I can work on it more, I'm sure I'll fix it eventually! \$\endgroup\$ – Addioioi Oct 2 '14 at 14:43
  • \$\begingroup\$ @Addioioi : validator.w3.org \$\endgroup\$ – ANeves Oct 2 '14 at 15:03
  • 3
    \$\begingroup\$ Not sure why there are 4 close requests for broken code - perhaps one of the mods can weigh in here. I feel that while this is not a perfect reproduction of the Google homepage, the OP has submitted code that represents their attempt at building the reproduction. As such, in light of the fact that the OP is learning how to build websites, the OP may not be creating things the right way - this does not however constitute broken code, just bad code (which is why we do Code Reviews, no?) \$\endgroup\$ – jsanc623 Oct 2 '14 at 16:39
  • 2
    \$\begingroup\$ I don't agree with the close votes either. The OP is not asking to fix broken code, as they are not aware that their code is broken in the first place. However, invalid HTML can cause the document to render incorrectly. As a result, the author is likely to make styling choices in an attempt to compensate. \$\endgroup\$ – cimmanon Oct 2 '14 at 17:46
6
\$\begingroup\$

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:

<!DOCTYPE html>

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 <html> element.

Third, you need to have a <header> element with a <title> element. The <title> 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:

<meta charset="UTF-8">

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

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- Your code here -->
    </body>
</html>

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

Sixth, you do not close <input> elements with </input>, you just leave them open.

Seventh, you have this:

  <div id="menu_icon">
    <img src="images/monkey.png">
    </li>
  </ul>
</div>
</div>

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

        <div id="menu_icon">
            <img src="images/monkey.png">
        </div>
    <div>
</ul>

Eighth, you need to close your <p> element here:

<p><span>New!</span>  <a href="#Explore the Pyramids of Giza"> Explore the Pyramids of Giza </a> in Google Maps
<p>

Ninth, your </br> elements should be <br/>.

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

<a href="#Explore the Pyramids of Giza">

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

<nav>
    <ul>
        <li><a href="#+Adam">+Adam</a></li>
        <li><a href="#gmail">Gmail</a></li>
        <li><a href="#images">Images</a></li>
        <li id="picture_menu">
        <li>
            <img alt="" src="images/block.png">
        </li>
        <li>
            <img alt="" src="images/bell.png">\
        </li>
        <li>
            <input type="button" value="Share" id="share">
        </li>
        <li id="menu_icon">
            <img alt="" src="images/monkey.png">
        </li>
    </ul>
</nav>

Additionally, you have several of your <li> elements like this:

<li><a href="#+Adam">+Adam</a>
</li>

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.