CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 351

HTML CSS navigation bar not wide enough & wrong highlight hover

NB: code is using Jinja for python.

Problems:

EDIT:

Any help is appreciated.

Nav bar isn't wide enough: Login page Have to scroll to see footer & black hover highlight over 'Homepage' doesn't fill to the bottom: Wrong highlight

The HTML code below links to other pages like the login page but the CSS and format is in this snippet:

<!doctype html>
<title>{% block title %}{% endblock %} - Website</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

<style>
html {
  height: 100%;
  box-sizing: border-box;
}
h1 {
  font-family: "Verdana", serif;
  font-size: 50px;
  letter-spacing: 15px;
  color: orange;
  text-align: center;
}
body {
  background-color: white;
  border-left: 1px solid lightblue;
  border-right: 1px solid lightblue;
  width: auto;
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;
  margin-left: 7%;
  margin-right: 7%;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  color: blue;
}
header {
  text-align: center;
}
nav {
background-color: #efefef;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
.topnav li a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 10px 60px;
  font-size: 17px;
}
.topnav a:hover {
  background-color: black;
  color: white;
}
.topnav a.active {
  background-color: black;
  color: white;
}
footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #efefef;
  text-align: center;
}
footer nav ul li {
  font-size: 5px;
}
</style>

<div id="header" class="topnav">
  <section>
    <header>
      <div id="website-title">
        <h1>Welcome</h1>
      </div>

      <div id="nav-bar">
        <nav>
          <ul id="navbar">
            {% if g.user %}
              <li><a href="{{ url_for('index') }}">Homepage</a></li>
              <li><a href="{{ url_for('auth.account') }}">My account: {{ g.user['username'] }}</a></li>
              <li><a href="{{ url_for('auth.logout') }}">Dashboards</a></li>
              <li><a href="{{ url_for('auth.logout') }}">Log Out</a></li>
              <li><a href="{{ url_for('auth.login') }}">About</a></li>
            {% else %}
              <li><a href="{{ url_for('index') }}">Homepage</a></li>
              <li><a href="{{ url_for('auth.login') }}">Log In</a></li>
              <li><a href="{{ url_for('auth.register') }}">Register</a></li>
              <li><a href="{{ url_for('auth.login') }}">About</a></li>
            {% endif %}
          </ul>
        </nav>
      </div>

    </header>
  </section>
</div>

<div id="body">
  <section class="content">
    {% block head %}{% endblock %}

    {% for message in get_flashed_messages() %}
      <div class="flash">{{ message }}</div>
    {% endfor %}

    {% block content %}{% endblock %}
  </section>
</div>

<div id="footer">
  <footer>
    <nav>
      <ul>
        <li>All rights reserved.</li>
        <li>Sitemap</li>
      </ul>
    </nav>
  </footer>
</div>

Upvotes: 0

Views: 1703

Answers (2)

mooga
mooga

Reputation: 3307

You have used 

ul {
    display: inline-block;
}

you have to use display:block and it will save the problems

for the footer problem you have to give the body

max-height: 100% not the min-height

html {
  height: 100%;
  box-sizing: border-box;
}
h1 {
  font-family: "Verdana", serif;
  font-size: 50px;
  letter-spacing: 15px;
  color: orange;
  text-align: center;
}
body {
  background-color: white;
  border-left: 1px solid lightblue;
  border-right: 1px solid lightblue;
  width: auto;
  position: relative;
  padding-bottom: 6rem;
  max-height: 100%;
  margin-left: 7%;
  margin-right: 7%;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  color: blue;
}
header {
  text-align: center;
}
nav {
background-color: #efefef;
}
ul {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
.topnav li a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 10px 60px;
  font-size: 17px;
}
.topnav a:hover {
  background-color: black;
  color: white;
}
.topnav a.active {
  background-color: black;
  color: white;
}
footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #efefef;
  text-align: center;
}
footer nav ul li {
  font-size: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>


<div id="header" class="topnav">
  <section>
    <header>
      <div id="website-title">
        <h1>Welcome</h1>
      </div>

      <div id="nav-bar">
        <nav>
          <ul id="navbar">
              <li><a href="{{ url_for('index') }}">Homepage</a></li>
              <li><a href="{{ url_for('auth.login') }}">Log In</a></li>


          </ul>
        </nav>
      </div>

    </header>
  </section>
</div>

<div id="body">
  <section class="content">
  <br/>
  </section>
</div>

<div id="footer">
  <footer>
    <nav>
      <ul>
        <li>All rights reserved.</li>
        <li>Sitemap</li>
      </ul>
    </nav>
  </footer>
</div>

Upvotes: 1

Artem Saribekian
Artem Saribekian

Reputation: 356

To make your nav full width you just need to remove your <body> padding, change it to padding: 5px 0; for example.

About problem with your filling color.. just make your nav display: block

If you want to remove scrolling and make your page full height, just use height: 100vh; for <body>

Here is the fiddle with all changes

Upvotes: 1

Related Questions