CODEWITHSUNDEEP
htmlcss
rgb_jewel
rgb_jewel

Reputation: 81

Navigation bar for Google won't fit across the width

I am trying to re-create the www.google.com page to learn css but I can't get the navigation bar to stretch across the page even though I have tried using width:100%. and margin:0on the ul element and the body element (it had no effect on the body element so I removed it from there)

I have also tried using

position:absolute;
left:0;
right:0;

in my #header id but that didn't work either.

You can see in the image below that the navigation bar doesn't span across the entire width of the page. If you can't view the image properly, you can view the image through the link shown below.

I am sure it has something to do with the way I have positioned my elements because when I hover over my profile picture or the settings icon, it doesn't fit across the width of the block and goes out of the bar.

You can view the page online using the link below.

My Google Page

The navigation bar

body {
  margin: 0px;
}
.google-search {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#logo {
  width: 272px;
  height: 92px;
  margin-top: 200px;
  margin-bottom: 20px;
}
.search {
  width: 535px;
  height: 40px;
  font-size: 16px;
  padding-left: 4px;
  margin: auto;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat right 4px center;
  background-size: auto 22px;
  margin-left: -100px;
  /*Styles */
  border-top: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
}
button {
  margin-top: 30px;
  margin-right: 4px;
  padding-right: 16px;
  padding-left: 16px;
  height: 40px;
  text-align: center;
  /*Styles */
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  color: #757575;
  font-size: 13px;
  font-weight: bold;
  font-family: arial, sans-serif;
}
button:hover {
  color: #222;
  background-color: #f8f8f8;
  border: 1px solid #c6c6c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#lucky-button {
  margin-left: 4px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:hover {
  color: #222;
  background-color: #666666;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
a:link,
a:visited {
  color: #ccc;
  display: block;
  padding-top: 4px;
  padding-left: 8px;
  padding-bottom: 4px;
  text-decoration: none;
  text-align: center;
}
#header {
  background-color: #2d2d2d;
  width: 100%;
  height: 30px;
}
#navbar {
  margin-top: -10px;
  margin-left: -10px;
}
#me {
  float: right;
  margin-top: -24px;
  margin-bottom: 5px;
}
#footer {
  bottom: -150px;
  background-color: #f2f2f2;
  height: 30px;
  clear: both;
  position: relative;
}
#terms {
  float: right;
  margin-top: -24px;
  margin-bottom: 5px;
}
/*font color for the footer links */

.link:link,
.link:visited {
  color: #777;
}
.link:hover {
  color: #777;
  text-decoration: underline;
  padding-top: 4px;
  padding-left: 8px;
  padding-bottom: 4px;
  background-color: #f2f2f2;
  box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="styles/main.css">
  <title>Google</title>

</head>

<body>
  <div id="header">
    <div id="navbar">
      <ul>
        <li><a href="#">Google+</a>
        </li>
        <li><a href="#">Search</a>
        </li>
        <li><a href="#">Images</a>
        </li>
        <li><a href="#">Maps</a>
        </li>
        <li><a href="#">Play</a>
        </li>
        <li><a href="#">YouTube</a>
        </li>
        <li><a href="#">Gmail</a>
        </li>
        <li><a href="#">Drive</a>
        </li>
        <li><a href="#">More</a>
        </li>
      </ul>
      <ul id="me">
        <li><a href="#">Nida Farooqui</a>
        </li>
        <li><a href="#">0</a>
        </li>
        <li><a href="#">Share...</a>
        </li>
        <li>
          <a href="#">
            <img src="https://lh6.googleusercontent.com/-0HkjOqmEXu8/AAAAAAAAAAI/AAAAAAAAAAA/FQ22oIY4KjM/s24-c-mo/photo.jpg" width="24px" height="24px" alt="Nida Farooqui">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-04-512.png" width="20px" height="20px">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="google-search">
    <img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo">

    <form>
      <input type="search" placeholder="Search Google or type URL" name="search" class="search">
    </form>

    <div class="buttons">
      <button>Google Search</button>
      <button id="lucky-button">I'm Feeling Lucky</button>
    </div>
  </div>

  <div id="footer">
    <div id="footer-nav-bar">
      <ul>
        <li><a href="#" class="link">Advertising</a>
        </li>
        <li><a href="#" class="link">Business</a>
        </li>
        <li><a href="#" class="link">About</a>
        </li>
      </ul>
      <ul id="terms">
        <li><a href="#" class="link">Privacy</a>
        </li>
        <li><a href="#" class="link">Terms</a>
        </li>
        <li><a href="#" class="link">Settings</a>
        </li>
        <li><a href="#" class="link">Use Google.com</a>
        </li>
      </ul>

    </div>

  </div>

</body>

</html>

The CSS below only shows the code related to the header and footer.

CSS:

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;

}

a:hover {
    color: #222;
    background-color: #666666;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
}
a:link, a:visited {
    color: #ccc;
    display: block;
    padding-top: 4px;
    padding-left: 8px;
    padding-bottom: 4px;
    text-decoration: none;
    text-align: center;

}

 #header {
    top: -10px;
    left: -10px;
    background-color: #2d2d2d;
    width: 100%;
    height: 30px;
 }

 #navbar {
    margin-top: -10px;
    margin-left: -10px;


 }

#me {
    float: right;
    margin-top: -24px;
    margin-bottom: 5px;
}



#footer {
    bottom: -150px;
    background-color: #f2f2f2;
    height: 30px;
    clear: both;
    position: relative;
}



#terms {
    float: right;
    margin-top: -24px;
    margin-bottom: 5px;

}


/*font color for the footer links */
.link:link, .link:visited {

    color: #777;
}


.link:hover {
    color: #777;
    text-decoration: underline;
    padding-top: 4px;
    padding-left: 8px;
    padding-bottom: 4px;
    background-color: #f2f2f2;
    box-shadow: none;
}

EDIT: I have edited my code like you've all said but if you click on this link

My Google Page

you'll see it is still the same.

Upvotes: 1

Views: 1064

Answers (5)

NotJay
NotJay

Reputation: 4076

I viewed your source and the page is still showing a margin of 8px for the body. Try adding !important to the body margin in the css. !important allows you to set a preference in the event there is clashing css.

body{margin:0 !important;}

Upvotes: 1

Jasom Dotnet
Jasom Dotnet

Reputation: 1317

<!DOCTYPE html>
<html lang="en">

<head>

<title>Google</title>
<style>
body{
  margin:0;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;

}

a:hover {
    color: #222;
    background-color: #666666;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
}
a:link, a:visited {
    color: #ccc;
    display: block;
    padding-top: 4px;
    padding-left: 8px;
    padding-bottom: 4px;
    text-decoration: none;
    text-align: center;

}

 #header {
    top: -10px;
    left: -10px;
    background-color: #2d2d2d;
    width: 100%;
    height: 30px;
 }

 #navbar {
    margin-top: -10px;
    margin-left: -10px;


 }

#me {
    float: right;
    margin-top: -24px;
    margin-bottom: 5px;
}



#footer {
    bottom: -150px;
    background-color: #f2f2f2;
    height: 30px;
    clear: both;
    position: relative;
}



#terms {
    float: right;
    margin-top: -24px;
    margin-bottom: 5px;

}


/*font color for the footer links */
.link:link, .link:visited {

    color: #777;
}


.link:hover {
    color: #777;
    text-decoration: underline;
    padding-top: 4px;
    padding-left: 8px;
    padding-bottom: 4px;
    background-color: #f2f2f2;
    box-shadow: none;
}
</style>
</head>

<body>
  <div id="header">
    <div id="navbar">
      <ul>
        <li><a href="#">Google+</a>
        </li>
        <li><a href="#">Search</a>
        </li>
        <li><a href="#">Images</a>
        </li>
        <li><a href="#">Maps</a>
        </li>
        <li><a href="#">Play</a>
        </li>
        <li><a href="#">YouTube</a>
        </li>
        <li><a href="#">Gmail</a>
        </li>
        <li><a href="#">Drive</a>
        </li>
        <li><a href="#">More</a>
        </li>
      </ul>
      <ul id="me">
        <li><a href="#">Nida Farooqui</a>
        </li>
        <li><a href="#">0</a>
        </li>
        <li><a href="#">Share...</a>
        </li>
        <li>
          <a href="#">
            <img src="https://lh6.googleusercontent.com/-0HkjOqmEXu8/AAAAAAAAAAI/AAAAAAAAAAA/FQ22oIY4KjM/s24-c-mo/photo.jpg" width="24px" height="24px" alt="Nida Farooqui">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-04-512.png" width="20px" height="20px">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="google-search">
    <img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo">

    <form>
      <input type="search" placeholder="Search Google or type URL" name="search" class="search">
    </form>

    <div class="buttons">
      <button>Google Search</button>
      <button id="lucky-button">I'm Feeling Lucky</button>
    </div>
  </div>

  <div id="footer">
    <div id="footer-nav-bar">
      <ul>
        <li><a href="#" class="link">Advertising</a>
        </li>
        <li><a href="#" class="link">Business</a>
        </li>
        <li><a href="#" class="link">About</a>
        </li>
      </ul>
      <ul id="terms">
        <li><a href="#" class="link">Privacy</a>
        </li>
        <li><a href="#" class="link">Terms</a>
        </li>
        <li><a href="#" class="link">Settings</a>
        </li>
        <li><a href="#" class="link">Use Google.com</a>
        </li>
      </ul>

    </div>

  </div>

</body>

</html>

Try add this into css

body {
    margin: 0;
}

Upvotes: 1

TrojanMorse
TrojanMorse

Reputation: 642

I saw something that caused your margin:0 property not to work.

In the CSS, remove the styling you did on the:

 #navbar {
    margin-top: -10px;
    margin-left: -10px;
 }

//delete this above from the css then add the following to the body 

body{
    margin: 0;
}

JSFiddle link - https://jsfiddle.net/ToreanJoel/6kwshsmo/

Upvotes: 2

Sebass van Boxel
Sebass van Boxel

Reputation: 2612

Your body has a default margin of 8px, make is 0px. 

body {
   margin:0px;
}

en get rid of the negative placements of elements you have now. Your #header will be as follows:

#header {
    background-color: #2d2d2d;
    width: 100%;
    height: 30px;
}

Upvotes: 1

W0MP3R
W0MP3R

Reputation: 151

Have you tried putting the #header like this?

#header {
/* top: -10px; */
left: -10px;
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: relative;
padding-left: 18px;
}

Upvotes: 1

Related Questions