Having difficulty positioning the image on the left side

Question

Having difficulty positioning the image on the left side

Learning CSS can be a challenge, but I recently made progress by using display flex to create a navigation bar. However, I encountered an issue where the background image for the navbar doesn't align with the left side of the screen and results in unwanted scroll bars. Here is the code snippet:

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.bg-img {
  margin: 0;
  opacity: 0.9;
  position: absolute;
  z-index: -1;
  justify-content: center;
}

<div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>

html css

Answer 1

Answer №1

https://i.sstatic.net/cRrPs.pngWhen it comes to the css code, this is what will make it work:

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 75px;
    background-color: rgba(79, 79, 79, 0.13);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul li {
    display: inline-block;
    margin: 0px 20px;
}

nav ul {
    margin-right: 50px;
}

.logo {
    width: 150px;
    height: auto;
    cursor: pointer;
    margin-left: 50px;
}

.bg-img {
    margin: 0;
    top: 0;
    left: 0;
    height: 75px;
    width: 100vw;
    opacity: 0.9;
    position: absolute;
    z-index: -1;
    justify-content: center;
}

The issue arises from the fact that a fixed padding cannot be set for the navbar due to the presence of the background image. The background image also needs to have a fixed height in order to align correctly. It is recommended to set the navbar height to a fixed value of 75px for optimal results.

Answer 2

https://i.sstatic.net/cRrPs.pngWhen it comes to the css code, this is what will make it work:

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 75px;
    background-color: rgba(79, 79, 79, 0.13);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul li {
    display: inline-block;
    margin: 0px 20px;
}

nav ul {
    margin-right: 50px;
}

.logo {
    width: 150px;
    height: auto;
    cursor: pointer;
    margin-left: 50px;
}

.bg-img {
    margin: 0;
    top: 0;
    left: 0;
    height: 75px;
    width: 100vw;
    opacity: 0.9;
    position: absolute;
    z-index: -1;
    justify-content: center;
}

The issue arises from the fact that a fixed padding cannot be set for the navbar due to the presence of the background image. The background image also needs to have a fixed height in order to align correctly. It is recommended to set the navbar height to a fixed value of 75px for optimal results.

Answer 3

Answer №2

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
  
}
.lp {
  float: right;
  
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.header {
  background-image: url("files/images/top-bg.jpg");
  display: flex;
}
/* additional styling for the header background */

<div class="container">
<div class="header">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>
</div>
</div>

Answer 4

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
  
}
.lp {
  float: right;
  
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.header {
  background-image: url("files/images/top-bg.jpg");
  display: flex;
}
/* additional styling for the header background */

<div class="container">
<div class="header">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>
</div>
</div>

Answer 5

Answer №3

*{box-sizing:border-box;}

This rule applies to every element on the page, ensuring that their height and width are accurately calculated without any overflow.

Answer 6

*{box-sizing:border-box;}

This rule applies to every element on the page, ensuring that their height and width are accurately calculated without any overflow.

Answer 7

Answer №4

For the initial image adjustment, I made some changes to its positioning to ensure it aligns perfectly with the left edge of the navbar. By increasing the padding of the background image to 18.5px, I ensured that it doesn't overlap with the logo. As for the scrollbar, I included both overflow: hidden and box-sizing: border-box properties to hide the scrollbar and maintain all elements within a unified space.

It appears that the use of display: flex was interfering with the float property and overall positioning - just something to consider.

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  box-sizing: border-box;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
  position: relative;
  left: -40px;
}


.bg-img {
  padding: 18.5px;
  opacity: 0.9;
  position: sticky;
  right: 1080px;
  top: -10px;
  float: left;
  z-index: -1;
  justify-content: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>
    </body>
</html>

Hopefully, this advice proves helpful. (:

Answer 8

For the initial image adjustment, I made some changes to its positioning to ensure it aligns perfectly with the left edge of the navbar. By increasing the padding of the background image to 18.5px, I ensured that it doesn't overlap with the logo. As for the scrollbar, I included both overflow: hidden and box-sizing: border-box properties to hide the scrollbar and maintain all elements within a unified space.

It appears that the use of display: flex was interfering with the float property and overall positioning - just something to consider.

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  box-sizing: border-box;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
  position: relative;
  left: -40px;
}


.bg-img {
  padding: 18.5px;
  opacity: 0.9;
  position: sticky;
  right: 1080px;
  top: -10px;
  float: left;
  z-index: -1;
  justify-content: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>
    </body>
</html>

Hopefully, this advice proves helpful. (:

Having difficulty positioning the image on the left side

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

choose courses using jQuery

Tips for integrating CSS with Material UI TableContainer

Discovering the required rotation angle for an object to directly face another using JS HTML5 CANVAS

Guide to designing a dropdown navigation menu in GWT

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style

What is the significance of using HttpUtility's HtmlDecode function in my code?

Tooltip Bootstrap timing

Setting up button alignment in Bootstrap

What is the process for implementing hover transitions on link elements?

Achieving True Nested Divs: Making Children Truly Inside

Conceal the div element when located beneath an ordered list with a designated

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

What is the best way to conceal part of a chart or a div in Angular?

Issue with form submission using getElementById

Issue with Element's Response to JQuery Click Event

Which is the better option for opening a link in a button: using onclick or href?

Navigating to User's Specific Info Page using Node.js

Choose an option from the drop-down menu and transfer the selected value to the following page using a hidden

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Particular arrangement of a table