CSS elements stay inline unintentionally - Html

iLaurian
February 22, 2023
278 views
0 votes
2 Answers

I have made a navigatation bar for one of my website projects and all the HTML elements that I am trying to add after are staying in line with the navbar. I have checked for any open HTML tags or any syntax error or overlapping CSS styles but didn’t solve the problem the only way I can get the elements in proper position is using absolute positioning, but I do not want to use that as I want my site to be flexible.

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline;
  float: left;
}

nav a:link,
nav a:visited {
  background-color: brown;
  color: white;
  display: block;
  width: 160px;
  text-align: center;
  padding: 10px 0;
}

nav a:hover {
  background-color: black;
}

header {
  margin: 0 auto;
  background-image: url("http://localhost/prosoft_noi_orizonturi/images/header-cover.jpg");
  margin-bottom: 70px;
}

header h1 {
  color: rgba(256, 256, 256, .8);
  margin-left: 30px;
  margin-top: 30px;
  font-size: 50px;
}

<header>
  <nav>
    <h1>Bun venit,
      <?php echo $_SESSION['user']?>!</h1>
    <ul>
      <li><a href="home.php">Acasă</a></li>
      <li><a href="search.php">Căutare</a></li>
      <li><a href="w8form.php">Formular W-8</a></li>
      <li><a href="notification.php">Notificări</a></li>
      <li><a href="message.php">Mesaje</a></li>
      <li><a href="cont.php">Cont</a></li>
    </ul>
  </nav>
</header>

An overview of the problem in browser

Any help would be very much appreciated!

Answers

Try this:

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}

nav li {
  display: inline;
}

nav a:link,
nav a:visited {
  background-color: brown;
  color: white;
  display: block;
  width: 160px;
  text-align: center;
  padding: 10px 0;
}

nav a:hover {
  background-color: black;
}

header {
  margin: 0 auto;
  background-image: url("http://localhost/prosoft_noi_orizonturi/images/header-cover.jpg");
  margin-bottom: 70px;
}

header h1 {
  color: rgba(256, 256, 256, .8);
  margin-left: 30px;
  margin-top: 30px;
  font-size: 50px;
}

<header>
  <nav>
    <h1>Bun venit,
      <?php echo $_SESSION['user']?>!</h1>
    <ul>
      <li><a href="home.php">Acas&#259;</a></li>
      <li><a href="search.php">C&#259;utare</a></li>
      <li><a href="w8form.php">Formular W-8</a></li>
      <li><a href="notification.php">Notific&#259;ri</a></li>
      <li><a href="message.php">Mesaje</a></li>
      <li><a href="cont.php">Cont</a></li>
    </ul>
  </nav>
</header>

All you need to do is remove float: left; from nav ul and it’s now not-inlined.

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline;
  /* float: left; */
}

nav a:link,
nav a:visited {
  background-color: brown;
  color: white;
  display: block;
  width: 160px;
  text-align: center;
  padding: 10px 0;
}

nav a:hover {
  background-color: black;
}

header {
  margin: 0 auto;
  background-image: url("http://localhost/prosoft_noi_orizonturi/images/header-cover.jpg");
  margin-bottom: 70px;
}

header h1 {
  color: rgba(256, 256, 256, .8);
  margin-left: 30px;
  margin-top: 30px;
  font-size: 50px;
}

<header>
  <nav>
    <h1>Bun venit,
      <?php echo $_SESSION['user']?>!</h1>
    <ul>
      <li><a href="home.php">Acas&#259;</a></li>
      <li><a href="search.php">C&#259;utare</a></li>
      <li><a href="w8form.php">Formular W-8</a></li>
      <li><a href="notification.php">Notific&#259;ri</a></li>
      <li><a href="message.php">Mesaje</a></li>
      <li><a href="cont.php">Cont</a></li>
    </ul>
  </nav>
</header>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS elements stay inline unintentionally – Html

Answers