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

Header Alignment Struggles HTML & CSS

Been struggling for hours trying to figure this out but I at least have all of the parts looking the way that i want them.

I am trying to align a logo (currently in the right spot on the page), the nav bar (currently centered but not on the same line), and a button (currently floated right with margin on another line) aligned to act as the header. No matter how i manipulate it, i cant seem to get them on the same line looking like they are supposed to.

Here is my HTML code:

/* Globals */

* {
  font-family: 'Chronica';
}


/* Elements */

.header {
  width: 100%;
  overflow: hidden;
}

.nav ul {
  list-style-type: none;
  text-align: center;
}

.nav ul li {
  display: inline;
}

.nav ul li a {
  text-decoration: none;
  color: black;
  padding-left: 50px;
  padding-right: 50px;
  transition: 0.3s;
}

.nav ul li a:hover {
  color: gray;
}

img {
  width: 83px;
  margin-left: 30px;
}

#btn {
  background-color: #ff0000;
  border: none;
  border-radius: 5px;
  padding-left: 22px;
  padding-right: 23px;
  padding-top: 12px;
  padding-bottom: 12px;
  float: right;
  margin-right: 30px;
  transition: 0.2s;
  cursor: pointer;
  font-size: 16px;
}

#btn a {
  text-decoration: none;
  color: white;
}

#btn:hover {
  border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <div class="header">
    <p>
      <a href="https://www.deliberatemedia.com/">
        <img src="Images/dm logo.png" class="logo" /></a>
    </p>
    <nav class="nav">
      <ul>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PRICING</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
    <button id="btn">
        <a href="https://www.deliberatemedia.com/schedule-a-meeting"
          >GET STARTED</a
        >
      </button>
  </div>
</body>

</html>

What i am trying to create is the header on my existing website (trying to create it from scratch to learn the coding and shortcuts in HTML and CSS).

Have been scrolling through stack overflow as well as w3schools trying out various different options and trying to optimize if for the look i was trying to achieve on my existing site and have come up empty.

Gone through like 10 iterations at this point and nothing is working but this is as close as i’ve gotten.

Tags:

3

Answers


  1. 0

    Take a look at Flexbox

    You add this

      display: flex;
  justify-content: space-between;

    to you header

    /* Globals */

* {
  font-family: 'Chronica';
}


/* Elements */

.header {
  width: 100%;
  overflow: hidden;
  /* Add this */
  display: flex;
  justify-content: space-between;
  /*----*/
}

.nav ul {
  list-style-type: none;
  text-align: center;
}

.nav ul li {
  display: inline;
}

.nav ul li a {
  text-decoration: none;
  color: black;
  padding-left: 50px;
  padding-right: 50px;
  transition: 0.3s;
}

.nav ul li a:hover {
  color: gray;
}

img {
  width: 83px;
  margin-left: 30px;
}

#btn {
  background-color: #ff0000;
  border: none;
  border-radius: 5px;
  padding-left: 22px;
  padding-right: 23px;
  padding-top: 12px;
  padding-bottom: 12px;
  float: right;
  margin-right: 30px;
  transition: 0.2s;
  cursor: pointer;
  font-size: 16px;
}

#btn a {
  text-decoration: none;
  color: white;
}

#btn:hover {
  border-radius: 15px;
}
    <div class="header">
  <p>
    <a href="https://www.deliberatemedia.com/">
      <img src="Images/dm logo.png" class="logo" /></a>
  </p>
  <nav class="nav">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PRICING</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
  <button id="btn">
    <a href="https://www.deliberatemedia.com/schedule-a-meeting">
      GET STARTED
    </a>
  </button>
</div>
    Login or Signup to reply.
  2. 0

    To achieve what you want you need to use flex or grid, here I use flex to solve your problem:

    .header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    Login or Signup to reply.
  3. 0

    Oh dear, you’ve made your HTML containers so complicated, first a <p> then an <a> and finally your image.
    but still you can handle it with Flexbox.

    you can create 3 div and in one throw your image, in one your nav and the other one your button. And put this 3 divs into one container and give a display: flex; to the container. It’s done!

    Example:

    <head>
    <style>
         .container{
              display: flex;
              justify-content: center;
              align-items: center;
          }
    </style>

    <body>
    <div class = 'container'>
        <div>
           <!-- Your Logo -->
        </div>
        <div>
           <!-- Your Nav -->
        </div>
        <div>
           <!-- Your button -->
        </div>
    </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search