CODEWITHSUNDEEP
htmlcss
Rick
Rick

Reputation: 15

Creating a nav bar from scratch, but having issues with floating links to the right and the alignment

I am trying to create a homemade nav bar for a website and want my name to appear to the far left and have the links float to the far right. I used CSS to format everything under Nav, but when I use float for the links, it is out of alignment and they appear backwards from how I typed the html for them.

I know I have a major problem with how I'm using CSS, but looking for some insight or maybe a better practice.

I'm avoiding bootstrap or anything predefined so I can get some practice and hardcode it from the ground up.

nav {
  border-bottom: 1px solid rgb(196, 196, 196);
  background-color: #F7F9F9;
  padding: 10px;
  width: 100%;
}

.navbar a {
  float: right;
  text-decoration: none;
}
<header>
  <nav>
    <div class="navbar">
      <div>Rick Wilson</div>
      <a href="#">Experience</a>
      <a href="#">Projects</a>
      <a href="#">Technology Stack</a>
      <a href="#">Contact</a>
    </div>
  </nav>
</header>

Upvotes: 1

Views: 87

Answers (4)

Nicol&#225;s Alarc&#243;n Rapela
Nicol&#225;s Alarc&#243;n Rapela

Reputation: 2982

You could use the new way of aligning: grid. AND Let me explain, with grid you can align two div so that you do not have to depend on aligno float.

To achieve this you have to generate two divs: one for the logo and one for the links.

Then you declare at the beginning: display: grid to use this property and in turn the logo div is positioned as first ( grid-column: 1 / 2) and in the links as the second (grid- column: 2 / 2).

One of the advantages of using a grid is that it is partly responsive.

More info

    .navbar {
        display: inline-grid;
        grid-template: 20% 30%;
        background-color: #F7F9F9;
        border-bottom: 1px solid #c4c4c4;            
        padding: 10px;
        width: 100%;
    }
    .logo {
        grid-column: 1/2;
        background-color: #F7F9F9;
    }
    .links {
        grid-column: 2/2;
    }
    .links a {
        text-decoration: none;
    }
<header>
  <nav>
    <div class="navbar">
      <div class="logo">Rick Wilson</div>
      <div class="links">
        <a href="#">Experience</a>
        <a href="#">Projects</a>
        <a href="#">Technology Stack</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </nav>
</header>

Upvotes: 1

Yann
Yann

Reputation: 604

You HTML is a little off in terms of semantics. I'd do something like:

<header>
   <h1>Rick Wilson</h1>
  <nav>
     <ul>
        <li><a href="#">Experience</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Technology Stack</a></li>
        <li><a href="#">Contact</a></li>
     </ul>
  </nav>
</header>

CSS Grid would be ideal for this, but if you can't because of browser requirements, Flexbox would be the way to go:

header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   border-bottom: 1px solid #ccc;
   background-color: #F7F9F9;

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

   li {
      margin-left: 1.5em;
   }

   a {
      text-decoration: none;
   } 
}

https://codepen.io/md/pen/LqQeLE

Upvotes: 0

dvo
dvo

Reputation: 2153

div tags are going to be block elements unless specified otherwise. For a nav bar, you could use something like an h1 tag. Adding "display: inline" to the h1 tag will align everything to look in a line.

Another tip: to add spacing between your links ("a" tags), you can add padding-left. See below (padding-left: 10px;)

nav {
  border-bottom: 1px solid rgb(196, 196, 196);
  background-color: #F7F9F9;
  padding: 10px;
  width: 100%;
}

.navbar h1{
  display: inline;
}

.navbar a {
  float: right;
  text-decoration: none;
  padding-left: 10px;
}
<header>
  <nav>
    <div class="navbar">
      <h1>Rick Wilson</h1>
      <a href="#">Experience</a>
      <a href="#">Projects</a>
      <a href="#">Technology Stack</a>
      <a href="#">Contact</a>
    </div>
  </nav>
</header>

Upvotes: 0

benvc
benvc

Reputation: 15130

As noted in the comments, flexbox is a nice way to handle things like this. In this case, you can wrap your links in another div and then use justify-content: space-between. For example:

nav {
  background-color: #F7F9F9;
  border-bottom: 1px solid rgb(196, 196, 196);
  padding: 10px;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
}

.navbar a {
  text-decoration: none;
}
<header>
  <nav>
    <div class="navbar">
      <div>Rick Wilson</div>
      <div>
        <a href="#">Experience</a>
        <a href="#">Projects</a>
        <a href="#">Technology Stack</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </nav>
</header>

Upvotes: 0

Related Questions