CODEWITHSUNDEEP
htmlcssimage
Alex
Alex

Reputation: 139

image does not stay in right position

I want something like this:

+-------------------------------------------------------------------+
|                                                                   |
| LOGO                           Search_box... ITEM_1 ITEM_2 ITEM_3 |
|                                                                   |
+-------------------------------------------------------------------+

The LOGO is an image. Search_box is an input text and ITEM_X an orizontally list item.

I tried this, but the logo doesn't stay where I want: https://jsfiddle.net/mna4de2n/

Note: I did not implement the input text yet.

CSS:

header{
    width: 100%;
    height: auto;
    text-align: center;
    display: inline-block;
}

header ul {
    list-style-type: none;
    text-align: center;
    padding: 0.5vw;
    overflow: hidden;
}

header li {
   display: inline;
}

header li a{
    display: inline-block;
    color: #262626;
    text-align: center;
    padding: 0.5vh 0.5vw;
    text-decoration: none;
}

header .left {
    padding-left: 15%;
    float: left;
}

header .right {
    float: right;
    padding-right: 25%;
}

header img {
  width: 10%;
}

HTML:

<header>
    <div class="left">
      <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        </ul>
    </div>
</header>

Upvotes: 1

Views: 599

Answers (4)

Syden
Syden

Reputation: 8625

Why not use flexbox?

header {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

header img {
  width: 50%;
}

header .left {
  width: 30%;
}

header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

header ul {
  list-style-type: none;
  padding: 0.5vw;
  overflow: hidden;
  display: flex;
}

header li a {
  color: #262626;
  padding: 0.5vh 0.5vw;
  text-decoration: none;
}

header input {
  height: 30px;
  align-self: center;
}
<header>
  <div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
  </div>
  <div class="right">
    <input type="search">
    <ul>
      <li><a class="active" href="#home">Matcha</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
</header>

Upvotes: 4

bhansa
bhansa

Reputation: 7504

I have kept the li under ul, instead of div and changed the image size to pixels.

<div class="left">
          <ul>
            <li>
              <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
            </li>
          </ul>

        </div>


header {
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
}

.left ul{
  padding:0;
}

header ul {
  list-style-type: none;
  text-align: center;
  padding: 0.5vw;
  overflow: hidden;
}

header li {
  display: inline;
}

header li a {
  display: inline-block;
  color: #262626;
  text-align: center;
  padding: 3vh 0.5vw;
  text-decoration: none;
}

header .left {
  padding-left: 15%;
  float: left;
}

header .right {
  float: right;
  padding-right: 25%;
}

header img {
  width: 80px;
}
<header>
  <nav>
    <div class="left">
      <ul>
        <li>
          <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
        </li>
      </ul>

    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
</header>

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56410

You need to set the image width to pixels, instead of percentage, this is making the parent of the image to take the full width of the header. Which is causing the issue. Also removing the li tag wrapping the image, since it is of no use.

Before:

header img {
  width: 10%;
}

<div class="left">
    <li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>

After:

header img {
  width: 100px;
}

<div class="left">
    <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>

Note: Please view the demo in full screen to see the change.

header {
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
}

header ul {
  list-style-type: none;
  text-align: center;
  padding: 0.5vw;
  overflow: hidden;
}

header li {
  display: inline;
}

header li a {
  display: inline-block;
  color: #262626;
  text-align: center;
  padding: 0.5vh 0.5vw;
  text-decoration: none;
}

header .left {
  padding-left: 15%;
  float: left;
}

header .right {
  float: right;
  padding-right: 25%;
}

header img {
  width: 100px;
}
<header>
  <nav>
    <div class="left">
      <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
    </div>
    <div class="right">
      <ul>
        <li><a class="active" href="#home">Matcha</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
</header>

Upvotes: 0

Danimal
Danimal

Reputation: 333

<header>

<div class="right">
  <ul>
    <li><a class="active" href="#home">Matcha</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
</div>



<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
 <img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>

I moved your logo after the right floated menu. and removed the li tag from the logo and the class for that div (float left is not needed.).

Upvotes: 2

Related Questions