CODEWITHSUNDEEP
htmlcss
Christopher Altamirano
Christopher Altamirano

Reputation: 157

How can i make two list items go on the other side of the page?

I am recreating Google's page as practice, I have looked and looked, but how can I make two li, gmail and images, appear on the right side of the page? Also what can I improve on in my code? 

body {
  font-family: Arial;
}

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

li {
  display: inline;
}

img {
  width: auto;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15%;
}

.searchbar {
  text-align: center;
}

.nav_bar {
  word-spacing: 10px;
}
<nav class="nav_bar">
  <ul>
    <li>About</li>
    <li>Store</li>
    <li>Gmail</li>
    <li>Images</li>
  </ul>
</nav>
<div class="google">
  <img src="http://pngimg.com/uploads/google/google_PNG19644.png" alt="google">
</div>
<div class="searchbar">
  <input type="text" placeholder="Search..." id="search">
</div>

Upvotes: 1

Views: 53

Answers (3)

Nabeel Khan
Nabeel Khan

Reputation: 3993

Ideal way is to have separate menu ul for the left and for right side of the screen.

So then you can use float property to move the menu for right to the right side in a clean way.

The code will look like this:

body {
  font-family: Arial;
}

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

li {
  display: inline;
}

img {
  width: auto;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15%;
}

.searchbar {
  text-align: center;
}

.nav_bar {
  word-spacing: 10px;
}

.menu_left{
  float: left;
}

.menu_right{
  float: right;
}
<nav class="nav_bar">
  <ul class="menu_left">
    <li>About</li>
    <li>Store</li>
  </ul>
  <ul class="menu_right">
    <li>Gmail</li>
    <li>Images</li>
  </ul>
</nav>
<div class="google">
  <img src="http://pngimg.com/uploads/google/google_PNG19644.png" alt="google">
</div>
<div class="searchbar">
  <input type="text" placeholder="Search..." id="search">
</div>

I hope it helps.

Upvotes: 0

kebir
kebir

Reputation: 276

I have understand that you want to put only "images" and "gmail" on the right, so you can do this (the code is on the comment)

Good luck

<nav class="nav_bar">
      <ul>
    <li>About</li>
        <li>Store</li>
        <li>Images</li>
        <li>Gmail</li>
      </ul>
    </nav>
        <div class="google">
          <img src="http://pngimg.com/uploads/google/google_PNG19644.png" alt="google">
        </div>
    <div class="searchbar">
      <input type="text" placeholder="Search..." id="search">
    </div>

CSS

body{
  font-family: Arial;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li{
  display: inline;
  float:left;
  padding: 0 5px;
}

img {
  width: auto;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15%;
}
.searchbar {
  text-align:center;
}
.nav_bar {
  word-spacing: 10px;
}
nav.nav_bar li:nth-child(3), nav.nav_bar li:nth-child(4) {
    float: right;
}

Upvotes: 0

versvs
versvs

Reputation: 643

You need to float the element to the right, for instance with:

.nav_bar ul {
  float: right;
}

As a more general comment, you could organize the HTML and CSS in different files, to better diferentiate between the content and the styles. Try to follow the W3 basic tutorial to catch the first concepts behind markup for the web.

Upvotes: 1

Related Questions