Align stuff and more

Hi,

I’m stuck with the portfolio challenge, and I have couple of questions…

  1. How can I insert an image (my logo) inside the navigation bar, to the left side?
  2. I’v designed my firs project there and in went fine. Now I’m trying to
    put my second project, only to margin in to the right, and every thing went back flip crazy, how can I fix it and what did I do wrong ?

That’s my code-pen:

If any one could help me it will must appreciate :slight_smile:

You may add a new li at the end of the ul in nav like:

    <div class="nav">
       
      <ul>
        <li class="בית"><a class="active" href="#">בית</a></li>
        <li class="עבודות"><a class="עבודות" href="#">עבודות</a></li>
        <li class="אודות"><a href="#">אודות</a></li>
        <li class="צור קשר"><a href="#">צור קשר</a></li>
     <li class="logo">
       <img src="http://urmilarcp.com/wp-content/forum/uploads/2016/10/client-logo-placeholder_4.jpg" alt="logo" height="64">
        </li>   

      </ul>

and in css:

.nav li.logo{
  position: fixed;
  left: 0;
  top: 0;
}
1 Like

Thank you very much, I’m nearly there :slight_smile:

By the way,
Why we wrote it .nav li.logo ?
Im trying to understand all the perent, sibling etc’,

Because we want to target only the li having a class logo and is a child of parent element class nav

Could you not use just the class .logo to do it? (Assuming there are no more elements with the same class name).
Is this the best practice?

Yes ofc we can use only class .logo assuming there will be no more elements having the same class.

I preferred to use .nav li.logo to be sure that the element i want is going to be targeted no matter the rest of the code.

1 Like

Try this https://flukeout.github.io/

if link fail search css dinner… it probably will give u the idea on how these selecting item work.

you can drop your image in a figure tag in first place. this will me your website more semantic and better for search engine.

<header>
<figure>
          <img src>
</figure>

<nav>
       <ul>
        <li><a class="active" href="#">Link 1</a></li>
        <li><a class="עבודות" href="#">Link 2</a></li>
       
       </ul>
</nav>
</header>

then you can float your figure to left and your nav to right… and you have 2 elements insted of 1.

Remember that if you can do your work without using divs that would be great cause div elements doesnt have information about structure. they are just boxes. so if you wanna make websites to rank on google or something remember this tip.