CODEWITHSUNDEEP
cssgridalignmentline
Muzzlet
Muzzlet

Reputation: 239

Trouble creating top and bottom horizontal border lines aligning to the text in grid layout

I'm trying to draw a horizontal line without interrupting the grid layout. This is what I'm hoping to reach:

I have wrapped all the navigation elements with a grid system. As I try to create a horizontal lines from the parent element, the lines are drawn aligning to the image.

Upvotes: 0

Views: 39

Answers (1)

A Haworth
A Haworth

Reputation: 36574

You can put the lines in as pseudo elements on the navbar - giving a top and bottom offset in % terms. Note however that this does not give a sensible result when the menu is not level with the heading - but that is understood (and the reason it wont work in a SO snippet).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lab04_New</title>
  <link rel="stylesheet" href="Lab04_new.css">
  <style>
 @media only screen and (max-width: 1280px) {
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 3fr 4fr 2fr 2fr;
    grid-template-areas:
      "nav nav nav nav";
  }
  
  #navbar {
    grid-area: nav;
  }

  #navbar img, header, ul, li {
    display: inline-block;
    vertical-align: middle;
  }

  #navbar img {
    border-radius: 50%;
    margin-left: 20px;
  }

  h3 {
    font-size: 28px;
  }

  ul {
    float: right;
  }

  li {
    padding: 15px;
  }

}

section#navbar {
  position: relative;
  --offset: 30%;
  }
  
#navbar::before, #navbar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100vw;
  height: 1px;
  background-color: black;
  z-index: -1;
}

#navbar::before {
  top: var(--offset);
}

#navbar::after {
  top: calc(100% - var(--offset));
}

  </style>
  
</head>

<body>
  <div class = "main">
    <section id = "navbar">
      <img src="gear.jpg" alt="lens" width="90" height="90">
      <header>
        <h3>Art of Photography</h3>
      </header>
      <ul>
        <li><div class="navbar_left">Photography</div></li>
        <li><div class="navbar_left">History</div></li>
        <li><div class="navbar_right">Samples</div></li>
        <li><div class="navbar_right">About</div></li>
      </ul>
    </section>
  </div>
</body>
</html>

Upvotes: 1

Related Questions