CODEWITHSUNDEEP
htmlcss
JCA
JCA

Reputation: 287

How to align items correctly CSS?

I found a layout of a site that I really liked that I'm trying to implement on a site I'm creating for a school project, it looks like this: enter image description here

I cannot figure out how to add that little white line that they have under the nav. How would I add that line?

Here is my code:

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: black;
}

.container {
  background-color: #CC0000;
  margin-top: 25px;
}

.header {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 20px;
  margin-top: 20px;
}

.header h1 {
  margin-left: 25px;
}

.headerNav {
  display: flex;
}

nav {
  font-family: 'Exo 2', sans-serif;
  margin-left: 1000px;
}

nav ul.mynav li {
  float: left;
  list-style-type: none;
  margin-top: 75px;
}

nav ul.mynav li a {
  display: block;
  margin: 0px 20px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

nav ul.mynav li.active a {
  color: black;
  font-weight: bold;
}

nav ul.mynav li a:hover {
  color: black;
}

.keepopen {
  clear: both;
}
<div class='headerNav'>
  <header class='header'>
    <h1>Ute</h1>
    <h1>Football</h1>
    <h1>Faithful</h1>
  </header>
  <nav>
    <ul class='mynav'>
      <li class="active"><a href="index.html">About</a></li>
      <li><a href="schedule.html">Schedule</a></li>
      <li><a href="news.html">News</a></li>
    </ul>
    <div class='keepopen'></div>
  </nav>
</div>

I would like my navigation to look as close to the photo above as possible. How would I go about correctly implementing it?

Upvotes: 0

Views: 58

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

you can inbricate flexboxes and use justify-content, align-items or margin to reset alignement. border-style with or without box-shadow could be used to fake an hr visual

a possible example:

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0px;
  margin: 0px;
}

body {
  background-color:rgb(188, 2, 0);
}

.container {
  background-color:rgb(188, 2, 0);
  margin-top: 25px;
}

.header {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 20px;
  margin-top: 20px;
}

.header h1 {
  margin-left: 25px;
}

.headerNav {
  display: flex;
  align-items: center;
}

nav {
  font-family: 'Exo 2', sans-serif;
  display: flex;
  flex: 1;
  margin: auto 1em;
  border-bottom: groove rgb(224, 129, 127)
}

nav ul.mynav li {
  float: left;
  list-style-type: none;
}

ul {
  margin-left: auto;
}

nav ul.mynav li a {
  display: block;
  margin: 0px 20px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

nav ul.mynav li.active a {
  color: black;
  font-weight: bold;
}

nav ul.mynav li a:hover {
  color: black;
}

.keepopen {
  clear: both;
}
<div class='headerNav'>
  <header class='header'>
    <h1>Ute</h1>
    <h1>Football</h1>
    <h1>Faithful</h1>
  </header>
  <nav>
    <ul class='mynav'>
      <li class="active"><a href="index.html">About</a></li>
      <li><a href="schedule.html">Schedule</a></li>
      <li><a href="news.html">News</a></li>
    </ul>
    <div class='keepopen'></div>
  </nav>
</div>

a reminder about flex rules : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Related Questions