Text overlapping navigation bar when resizing browser window

Question

I'm trying to create my first webpage for my portfolio but my text keeps overlapping the navigation bar on the left and I don't know why! I have tried different methods but nothing has worked so far and I just don't understand what seems to be the problem! I'm new to HTML and CSS so I'm probably doing something wrong without realising it :)

This is my code:

/* Heading Styles -----------------------*/

.main-header {
  padding-top: 0x;
  height: 250px;
  text-align: right;
}

#background-image {
  background: url("../banner/pilved.jpg") no-repeat center;
  background-size: cover;
}


/*Welcome to text------------------------------------*/

.first-line-title {
  font-size: 35px;
  color: white;
  font-weight: normal;
  font-style: italic;
  position: fixed;
  top: 30%;
  right: 35%;
}


/* AvesDEsign's portfolio text---------------------*/

.second-line-title {
  font-size: 90px;
  color: white;
  font-weight: normal;
  line-weight: 1.3;
  position: absolute;
  overflow: hidden;
  top: 40%;
  right: 8%;
}


/* Navigation bar -------------------------*/

* {
  margin: 0;
  padding: 0;
  font-family: Avenir;
}

nav {
  width: 250px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.2);
  line-height: 80px;
  text-align: center;
}

nav ul {
  float: left;
  margin-left: 45px;
  margin-top: -5px;
}

nav ul li {
  list-style-type: none;
  transition: 0.8s all;
  font-family: Avenir;
}

nav ul li:hover {
  background-color: #d0d6da;
}

nav ul li a {
  text-decoration: none;
  color: white;
  padding: 30px;
}


/* Logo information------------------------------*/

.logo {
  margin-left: -8px;
  margin-top: 40px;
}

<!doctype html>
<html lang="en">

<head>
  <title>AvesDesign</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="background-image">
    <nav>
      <img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">EXPERIENCE</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

    <header class="main-header">
      <div class="first-line-title">Welcome to</div>
  </div>
  <div class="second-line-title">AvesDesign's portfolio
    </h1>

  </div>
  </header>
</body>

</html>

There is a great tool in the editor when asking a question that allows you to put your code is. Folks can then experiment with your code to fix it. Much better than screenshots.. — Daniel, Aug 11 '18 at 16:58
You can try to add font-size in rem or em so it can be reduced according to view, — Robin, Aug 11 '18 at 21:11

Daniel · Accepted Answer · 2018-08-12T00:41:35.377

There are definitely some errors to be found, but let me start that you should place your HTML and CSS in the assigned areas of the editor and not make separate blocks.

In the HTML you had your code mixed up. div tags and header were not closed properly due to placing the closing tags in wrong places. you were also missing an opening h1 tag. View the HTML code and compare it with what you have

Next was to place position:relative in the main-header CSS declaration.

.main-header {
  position: relative;
  padding-top: 0x;
  height: 250px;
  text-align: right;
}

Make these changes and it will give you likely a leap in the right direction.

/* Heading Styles -----------------------*/

.main-header {
  position: absolute;
  width: 100%;
  top: 0;
  height: 250px;
  text-align: right;
  z-index: 0;
}

#background-image {
  background: url("../banner/pilved.jpg") no-repeat center;
  background-size: cover;
}


/*Welcome to text------------------------------------*/

.first-line-title {
  font-size: 35px;
  color: red;
  font-weight: normal;
  font-style: italic;
  /* CHANGE POSITION FROM FIXED TO ABSOLUTE */
  position: absolute;
  top: 30%;
  right: 35%;
}


/* AvesDEsign's portfolio text---------------------*/

.second-line-title {
  font-size: 40px;
  color: green;
  font-weight: normal;
  line-height: 1.3;
  position: absolute;
  overflow: hidden;
  top: 40%;
  right: 8%;
}


/* Navigation bar -------------------------*/

* {
  margin: 0;
  padding: 0;
  font-family: Avenir;
}

nav {
  position: relative;
  float: left;
  width: 250px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.8);
  line-height: 80px;
  text-align: center;
  z-index: 999;
}

nav ul {
  padding: 0;
  margin-left: 45px;
  margin-top: -5px;
  z-index: 9999;
}

nav ul li {
  list-style-type: none;
  transition: 0.8s all;
  font-family: Avenir;
}

nav ul li:hover {
  background-color: #d0d6da;
}

nav ul li a {
  text-decoration: none;
  color: white;
  padding: 30px;
}


/* Logo information------------------------------*/

.logo {
  margin-left: -8px;
  margin-top: 40px;
}

<!doctype html>
<html lang="en">

<head>
  <title>AvesDesign</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="background-image">
    <nav>
      <img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">EXPERIENCE</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

    <header class="main-header">
      <div class="first-line-title">Welcome to</div>

      <div class="second-line-title">
        <h1>AvesDesign's portfolio
        </h1>
      </div>
    </header>
  </div>
</body>

</html>

Thank you so much for your edits Daniel! Although the text is still covering the navigation bar when i make the browser window smaller :( — , Aug 11 '18 at 19:41
For that you can change teh `position:fixed1 in you .first-line-ltitle class to absolute. You will likely have to style it to you desire. A more detailed discussion on this you can find here. See updated code above .. — Daniel, Aug 11 '18 at 21:05
Sorry .. here's link https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning — Daniel, Aug 11 '18 at 21:10
@KertuK I had a little time to look deeper into this. I see I missed something. I updated the CSS to counter for that. Basically you use `z-index` property to control the "layers" — Daniel, Aug 12 '18 at 00:41

Text overlapping navigation bar when resizing browser window

1 Answers1