Question 42821 in Html Question posted in
Some basic documentation can be found here.

Putting an element to the left of my page – Html

Hello I’m new to HTML/CSS and I need help for something :
my page
How can I put PORTFOLIO to the left edge of my page.
Here is my code :
HTML:

<nav>
    <ul id="nav">
        <li class="nav-item">PORTFOLIO</li>
        <li class="nav-item">Présentaion</li>
        <li class="nav-item">Réalisations</li>
        <li class="nav-item">Mon CV</li>
        <li class="nav-item">Me contacter</li>
    </ul>
</nav>

CSS :

#nav{
    display : flex;
    text-transform: uppercase;
    justify-content:center;
    align-items: center;  
}

.nav-item{
    text-decoration : none;
    list-style : none;
    text-transform: uppercase;
    margin-right: 2em;
    font-family: 'Oswald', sans-serif;
}

.nav-item:first-child{
    font-size:30px;
}

So I created a list to make a nav bar, I use display fex so it would be in line, I use justify-content to center my nav bar and align-items to center it horizontally.
What can I put in .nav-item:first-child for the PORTFOLIO text to be on the very left of the page.

This is what I would like to achieve page

Thanks for reading me and helping me out

I tried justify-self, the left property, align self …

Tags:

2

Answers


  1. 0

    The solution will differ depending on what visual result you want to get. Judging by the context, you want the "Portfolio" item to be at the edge AND all other elements to be at the center, right?

    Of course, you could just do a simple absolute positioning here, but in that case it will overlap with the buttons if the screen width is not enough, so it’s better to take another approach:

    1. Separate your buttons and your logo so they are two children of your outer container
    2. Enable a flexbox to your nav container and align everything to center
    3. Add a flex: 1 property to your nav buttons container so it takes up all the available space
    4. Define a width of your logo (for example, 150px) if you need to strictly center your nav buttons in the next step
    5. To compensate the presence of logo and strictly center your buttons (if needed), create a right-margin for your nav buttons

    See the following example:

    body {
  margin: 0;
  font-size: 12px;
}

.nav {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  justify-self: start;
  width: 150px;
  text-align: center;
}

#nav-buttons {
  display: flex;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  margin-right: 150px;
  padding: 0;
  flex: 1;
}

.nav-item {
  list-style: none;
  margin-right: 10px;
}
    <!DOCTYPE html>
<html lang="en">

<body>
  <nav class="nav">
    <div class="logo">PORTFOLIO</div>
    <ul id="nav-buttons">
      <li class="nav-item">Présentaion</li>
      <li class="nav-item">Réalisations</li>
      <li class="nav-item">Mon CV</li>
      <li class="nav-item">Me contacter</li>
    </ul>
  </nav>
</body>

</html>

    Be careful though: this design will not look good for small screens. Good luck in learning Web!

    Login or Signup to reply.
  2. 0

    There is already an answer. I just added mine just in case.

    #nav{
  display : flex;
  text-transform: uppercase;
  justify-content:center;
  align-items: center;  
}
.nav-item{
  text-decoration : none;
  list-style : none;
  text-transform: uppercase;
  margin-right: 2em;
  font-family: 'Oswald', sans-serif;
}
.nav-item:first-child{
  position:fixed;
  left: 0;
  margin: 1rem;
  font-size:30px;
}
    <nav>
  <ul id="nav">
      <li class="nav-item">PORTFOLIO</li>
      <li class="nav-item">Présentaion</li>
      <li class="nav-item">Réalisations</li>
      <li class="nav-item">Mon CV</li>
      <li class="nav-item">Me contacter</li>
  </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search