CODEWITHSUNDEEP
htmlcss
Ibrahim Hafez
Ibrahim Hafez

Reputation: 1

List in header + image. (HTML, CSS)

I'm facing difficulties implementing a header with a list and a small logo in the top right end of the page (merged with the header lines) (first image link is what I want to do, second is where I'm stuck).

Desired result

Current state

Upvotes: 0

Views: 992

Answers (2)

PJFrontEndDev93
PJFrontEndDev93

Reputation: 11

write a html that contains a main wrapper, main inner wrapper and 2 blocks then use display: flex; instead of inline-block.

That's quite a good way to do it quicker and better.

Example HTML:

<div class="container">
  <div class="container-inner">
    <div class="navigation">
      <nav>
        <ul>
          <li>Menu Item</li>
          <li>Menu Item</li>
        </ul>
      </nav>
    </div>
    <div class="brand">
      <img src="https://via.placeholder.com/150x50" alt="test" title="test" />
    </div>
  </div>
</div>

Example CSS:

.container {
  width: 100%;  
  padding: 25px;
  background: #666;
}

.container-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
  max-width: 768px;
  margin: 0 auto;
}

nav ul {
  display: flex;
  align-items: center;  
  list-style: none outside;
}
nav ul li {
  color: #fff;
  padding: 10px;
}

DEMO FIDDLE

Upvotes: 1

BeanBoy
BeanBoy

Reputation: 855

This should work:

with paddings and floats you can align the elements in your header.

/* Style the header with a grey background and some padding */
            .header {
              overflow: hidden;
              background-color: gray;
              padding: 10px 10px;
            }

            /* Style the header links */
            .header a {
              float: left;
              color: black;
              text-align: center;
              padding: 12px;
              text-decoration: none;
              font-size: 18px;
              line-height: 25px;
              border-radius: 4px;
            }

            /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
            .header .logo {
              float: right;
              height: 50px;;
            }

            /* Change the background color on mouse-over */
            .header a:hover {
              background-color: #ddd;
              color: black;
            }

            /* Style the active/current link*/
            .header a.active {
              background-color: dodgerblue;
              color: white;
            }

            /* Float the link section to the left */
            .header-left {
              float: left;
            }

            /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
            @media screen and (max-width: 500px) {
              .header a {
                float: none;
                display: block;
                text-align: left;
              }
              .header-left {
                float: none;
              }
            }
<div class="header">
          <div class="header-left">
            <a class="active" href="#home">Home</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
          </div>
          <img src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg" class="logo" alt="logo"></img>
        </div>

Upvotes: 1

Related Questions