Bollate

HTML

[ANSWERED] html – What in my CSS is making my header/nav bar display incorrectly?

By

Nov 18, 2022 ,

Solution 1 :

Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!

Solution 2 :

As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.

Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: black;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content .left-side .details {
  margin: 14px;
  text-align: center;
}

.content .left-side .details i {
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}

.content .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content .left-side .details .text-one,
.content .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container .content .right-side {
  width: 75%;
  margin-left: 75px;
}

.content .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}

.right-side .input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #bc0456;
}

@media (max-width: 950px) {
  .container {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container {
    margin: 40px 0;
    height: 100%;
  }
  .container .content {
    flex-direction: column-reverse;
  }
  .container .content .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container .content .left-side::before {
    display: none;
  }
  .container .content .right-side {
    width: 100%;
    margin-left: 0;
  }
}
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>

<body>

  <header>
    <section class="header">

      <div class="header_content">
        <div class="logo_container">
          <a href="index.html">
            <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
          </a>


        </div>

        <ul class="navigation">
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="aboout_me.html">About ME</a>
            <li><a href="contact.html">Contact</a></li>

        </ul>
      </div>

    </section>

  </header>
  <div class="container">
    <div class="content">
      <div class="left-side">
        <div class="address details">
          <i class="fas fa-map-marker-alt"></i>
          <div class="topic">Address</div>
          <div class="text-one">Los Angles, CA</div>
          <div class="text-two">Austin,TX</div>
        </div>
        <div class="phone details">
          <i class="fas fa-phone-alt"></i>
          <div class="topic">Phone</div>
          <div class="text-one">(512) xxx-xxxx</div>
          <div class="text-two">+</div>
        </div>
        <div class="email details">
          <i class="fas fa-envelope"></i>
          <div class="topic">Email</div>
          <div class="text-one">[email protected]</div>
          <div class="text-two">[email protected]</div>
        </div>
      </div>
      <div class="right-side">
        <div class="topic-text">Send me a message!</div>
        <br>
        <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
        <form action="#">
          <div class="input-box">
            <input type="text" placeholder="Enter your name">
          </div>
          <div class="input-box">
            <input type="text" placeholder="Enter your email">
          </div>
          <div class="input-box message-box">

          </div>
          <div class="button">
            <input type="button" value="Send Now">
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

Solution 3 :

The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.

/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
    width: 100%;
    height: 50px;
    display: block;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
    height: 100%;
    display: table;
    float: left;
    border: none;
}
.logo {
    
    max-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
/* Navigation */
.navigation {
    float: right;
    height: 100%;
    margin: 0;
}
.navigation li {
    float: left;
    height: 100%;
    display: table-cell;
    padding: 15px 20px;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
}
a:hover {
    color: #bc0456 !important;
}
.navigation li a {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    color:#067393;
    font-family: Kapelka New;
    text-decoration: none !important;
}
.sub_menu1 {
    display: none;
}
.navigation li:hover .sub_menu1 {
    display: block;
    position: absolute;
    background: black;
    top: 100%;
}
.navigation li:hover .sub_menu1 ul {
    display: inline-block;
    margin: 0%;
    padding: 0%;
    text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
   padding: 5px;  
}




@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
  

}
.wrapper {
   display: flex;
  align-items: center;
  justify-content: center; 
}

.container{
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side{
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}
.content .left-side::before{
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}
.content .left-side .details{
  margin: 14px;
  text-align: center;
}
.content .left-side .details i{
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}
.content .left-side .details .topic{
  font-size: 18px;
  font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
  font-size: 14px;
  color: #afafb6;
}
.container .content .right-side{
  width: 75%;
  margin-left: 75px;
}
.content .right-side .topic-text{
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}
.right-side .input-box{
  height: 50px;
  width: 100%;
  margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}
.right-side .message-box{
  min-height: 110px;
}
.right-side .input-box textarea{
  padding-top: 6px;
}
.right-side .button{
  display: inline-block;
  margin-top: 12px;
}
.right-side .button input[type="button"]{
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input[type="button"]:hover{
  background: #bc0456;
}

@media (max-width: 950px) {
  .container{
    width: 90%;
    padding: 30px 40px 40px 35px ;
  }
  .container .content .right-side{
   width: 75%;
   margin-left: 55px;
}
}
@media (max-width: 820px) {
  .container{
    margin: 40px 0;
    height: 100%;
  }
  .container .content{
    flex-direction: column-reverse;
  }
 .container .content .left-side{
   width: 100%;
   flex-direction: row;
   margin-top: 40px;
   justify-content: center;
   flex-wrap: wrap;
 }
 .container .content .left-side::before{
   display: none;
 }
 .container .content .right-side{
   width: 100%;
   margin-left: 0;
 }
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
   <!-- <title> Responsive Contact Us Form  | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

<body>

  <header class="header">
         
              
                  <div class="header_content">
                          <div class="logo_container">
                                  <a href="index.html">
                                          <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
                                  </a>


                          </div>

                          <ul class="navigation">
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="portfolio.html">Portfolio</a></li>
                                  <li><a href="aboout_me.html">About ME</a>
                                  <li><a href="contact.html">Contact</a></li>

                          </ul>
                  </div>

          

  </header>
  <div class="wrapper">
    
  <div class="container">
    
    <div class="content">
      <div class="left-side">
        <div class="address details">
          <i class="fas fa-map-marker-alt"></i>
          <div class="topic">Address</div>
          <div class="text-one">Los Angles, CA</div>
          <div class="text-two">Austin,TX</div>
        </div>
        <div class="phone details">
          <i class="fas fa-phone-alt"></i>
          <div class="topic">Phone</div>
          <div class="text-one">(512) xxx-xxxx</div>
          <div class="text-two">+</div>
        </div>
        <div class="email details">
          <i class="fas fa-envelope"></i>
          <div class="topic">Email</div>
          <div class="text-one">[email protected]</div>
          <div class="text-two">[email protected]</div>
        </div>
      </div>
      <div class="right-side">
        <div class="topic-text">Send me a message!</div>
          <br>
        <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
      <form action="#">
        <div class="input-box">
          <input type="text" placeholder="Enter your name">
        </div>
        <div class="input-box">
          <input type="text" placeholder="Enter your email">
        </div>
        <div class="input-box message-box">
          
        </div>
        <div class="button">
          <input type="button" value="Send Now" >
        </div>
      </form>
    </div>
    </div>
  </div>
  </div>
</body>
</html>

Problem :

Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can’t seem to pinpoint why my header bar wouldn’t display at the top of my page. Anyone willing to take a look? Here’s my code.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
   <!-- <title> Responsive Contact Us Form  | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

<body>

<header>
          <section class="header">
              
                  <div class="header_content">
                          <div class="logo_container">
                                  <a href="index.html">
                                          <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
                                  </a>


                          </div>

                          <ul class="navigation">
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="portfolio.html">Portfolio</a></li>
                                  <li><a href="aboout_me.html">About ME</a>
                                  <li><a href="contact.html">Contact</a></li>

                          </ul>
                  </div>

          </section>

  </header>
  <div class="container">
    <div class="content">
      <div class="left-side">
        <div class="address details">
          <i class="fas fa-map-marker-alt"></i>
          <div class="topic">Address</div>
          <div class="text-one">Los Angles, CA</div>
          <div class="text-two">Austin,TX</div>
        </div>
        <div class="phone details">
          <i class="fas fa-phone-alt"></i>
          <div class="topic">Phone</div>
          <div class="text-one">(512) xxx-xxxx</div>
          <div class="text-two">+</div>
        </div>
        <div class="email details">
          <i class="fas fa-envelope"></i>
          <div class="topic">Email</div>
          <div class="text-one">[email protected]</div>
          <div class="text-two">[email protected]</div>
        </div>
      </div>
      <div class="right-side">
        <div class="topic-text">Send me a message!</div>
          <br>
        <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
      <form action="#">
        <div class="input-box">
          <input type="text" placeholder="Enter your name">
        </div>
        <div class="input-box">
          <input type="text" placeholder="Enter your email">
        </div>
        <div class="input-box message-box">
          
        </div>
        <div class="button">
          <input type="button" value="Send Now" >
        </div>
      </form>
    </div>
    </div>
  </div>
</body>
</html>



/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
    width: 100%;
    height: 50px;
    display: block;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #61d1e2; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
    height: 100%;
    display: table;
    float: left;
    border: none;
}
.logo {
    
    max-height: 50px;
    display: table-cell;
    vertical-align: middle;
}
/* Navigation */
.navigation {
    float: right;
    height: 100%;
    margin: 0;
}
.navigation li {
    float: left;
    height: 100%;
    display: table-cell;
    padding: 15px 20px;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
}
a:hover {
    color: #bc0456 !important;
}
.navigation li a {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    color:#067393;
    font-family: Kapelka New;
    text-decoration: none !important;
}
.sub_menu1 {
    display: none;
}
.navigation li:hover .sub_menu1 {
    display: block;
    position: absolute;
    background: black;
    top: 100%;
}
.navigation li:hover .sub_menu1 ul {
    display: inline-block;
    margin: 0%;
    padding: 0%;
    text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
   padding: 5px;  
}




@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container{
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .content .left-side{
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}
.content .left-side::before{
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}
.content .left-side .details{
  margin: 14px;
  text-align: center;
}
.content .left-side .details i{
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}
.content .left-side .details .topic{
  font-size: 18px;
  font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
  font-size: 14px;
  color: #afafb6;
}
.container .content .right-side{
  width: 75%;
  margin-left: 75px;
}
.content .right-side .topic-text{
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}
.right-side .input-box{
  height: 50px;
  width: 100%;
  margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}
.right-side .message-box{
  min-height: 110px;
}
.right-side .input-box textarea{
  padding-top: 6px;
}
.right-side .button{
  display: inline-block;
  margin-top: 12px;
}
.right-side .button input[type="button"]{
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button input[type="button"]:hover{
  background: #bc0456;
}

@media (max-width: 950px) {
  .container{
    width: 90%;
    padding: 30px 40px 40px 35px ;
  }
  .container .content .right-side{
   width: 75%;
   margin-left: 55px;
}
}
@media (max-width: 820px) {
  .container{
    margin: 40px 0;
    height: 100%;
  }
  .container .content{
    flex-direction: column-reverse;
  }
 .container .content .left-side{
   width: 100%;
   flex-direction: row;
   margin-top: 40px;
   justify-content: center;
   flex-wrap: wrap;
 }
 .container .content .left-side::before{
   display: none;
 }
 .container .content .right-side{
   width: 100%;
   margin-left: 0;
 }
}

Comments

Comment posted by fnostro

Please make use of SO’s code snippet functionality, it will be easier to see the issues

Comment posted by Alexandria

@fnostro I was looking for the option to do that, how do I find the code snippet functionality?

Comment posted by fnostro

it’s in the edit bar, one of the tool buttons, a pair of angle brackets

Comment posted by Dhaifallah

You have two main elements inside

Comment posted by Alexandria

Thank you for the response! I fixed the header being inside the body! However, the removing the float right doesn’t seem to fix the issue either. I have this same header on multiple diff web pages and they all display properly. It’s just this one page that isn’t cooperating.

Comment posted by Alexandria

Thank you for this helpful response! I figured the issue was with the body. I like what you did with this, but what CSS property made the address, phone, and email switch to the bottom rather than the left side?

Comment posted by Alexandria

Nevermind! Realized this was only displaying this way in the preview box!

Comment posted by Maik Lowrey

@Alexandria It was teh flex design which disrupted the design.

By

Related Post

HTML

[ANSWERED] html – Child div has an offset border

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022