CODEWITHSUNDEEP
htmlcsslayout
Muzzlet
Muzzlet

Reputation: 239

Trouble increasing image size to expand outside of the parent

I'm trying to create my website as follow:

enter image description here

In here, the logo image overlaps the grid of the navigation bar.

I have also used CSS grid layout to create the navigation bar, but I'm having trouble making the image expand outside of the border.

This is currently what I have:

enter image description here

Basically, I want the background orange image (border) to shrink in the size vertically so I can have the same design as the above.

#main {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
  grid-template-areas:
    "nav nav nav nav"
    "main-heading main-heading main-heading main-heading"
    "sub-heading sub-heading sub-heading sub-heading"
    "icons icons icons icons"
    "images images images contents";
  grid-gap: 0.2rem;
}
#navbar {
  border-top: 1px solid black;
}
#navbar {
  display: inline-block;
  grid-area: nav;
  background: orange;
  border-radius:var(--main-radius);
  padding-top: var(--main-padding);
}

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

#navbar img {
  border-radius: 50%;
  margin-left: 20px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*display: inline-block;*/
  float: right;
  margin-top: 25px;
  margin-right: 20px;
}

li {
  display: inline-block;
  padding: 12px;
}

#main-heading {
  grid-area: main-heading;
  background: yellow;
}

#sub-heading {
  grid-area: sub-heading;
  background: pink;
}

#icons {
  grid-area: icons;
  background: lightblue;
}

#images {
  grid-area: images;
  background: orange;
}

#contents {
  grid-area: contents:
    background: brown;
}
/*@media only screen and (max-width: 600px) {
  #main {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3";
  }
}*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive J Web</title>
  <link rel="stylesheet" href="Lab04.css">
</head>
<body>
  <div id = "main">
    <div id = "navbar">
      <img src="lens.jpg" alt=lens width=90px height=90px>
      <header>
        <h3>
          Art of Photography
        </h3>
      </header>
      <ul>
        <li>Photography</li>
        <li>History</li>
        <li>Samples</li>
        <li>About</li>
      </ul>
    </div>
    <div id = "main-heading">Main-heading</div>
    <div id = "sub-heading">Sub-heading</div>
    <div id = "icons">Icon</div>
    <div id = "images">Images</div>
    <div id ="contents">Contents</div>
  </div>
</body>
</html>

Upvotes: 0

Views: 51

Answers (1)

Soufiane Boutahlil
Soufiane Boutahlil

Reputation: 2604

In order to do the same design, you need to change the position of the logo img as absolute, and give some space to put the logo.

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


#main {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
  grid-template-areas:
    "nav nav nav nav"
    "main-heading main-heading main-heading main-heading"
    "sub-heading sub-heading sub-heading sub-heading"
    "icons icons icons icons"
    "images images images contents";
  grid-gap: 0.2rem;
}
#navbar {
  border-top: 1px solid black;
}
#navbar {
  display: inline-block;
  grid-area: nav;
  background: orange;
  border-radius:var(--main-radius);
  padding-top: var(--main-padding);
  position: relative;
}

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

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

h3 {
  margin-left:120px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*display: inline-block;*/
  float: right;
  margin-top: 25px;
  margin-right: 20px;
}

li {
  display: inline-block;
  padding: 12px;
}

#main-heading {
  grid-area: main-heading;
  background: yellow;
}

#sub-heading {
  grid-area: sub-heading;
  background: pink;
}

#icons {
  grid-area: icons;
  background: lightblue;
}

#images {
  grid-area: images;
  background: orange;
}

#contents {
  grid-area: contents:
    background: brown;
}
/*@media only screen and (max-width: 600px) {
  #main {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3";
  }
}*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive J Web</title>
  <link rel="stylesheet" href="Lab04.css">
</head>
<body>
  <div id = "main">
    <div id = "navbar">
      <img src="https://www.allintheloop.com/assets/img/logo-sample.jpg" alt=lens width=90px height=90px>
      <header>
        <h3>
          Art of Photography
        </h3>
      </header>
      <ul>
        <li>Photography</li>
        <li>History</li>
        <li>Samples</li>
        <li>About</li>
      </ul>
    </div>
    <div id = "main-heading">Main-heading</div>
    <div id = "sub-heading">Sub-heading</div>
    <div id = "icons">Icon</div>
    <div id = "images">Images</div>
    <div id ="contents">Contents</div>
  </div>
</body>
</html>

You can also try this solution, u should give your navbar fixed height and change display to flex with align items: center.

https://codepen.io/boutahlilsoufiane/pen/NWbPgra enter image description here

Upvotes: 1

Related Questions