Search code examples
htmlw3.css

W3.CSS - .w3-display container - links broken

I have two pages that use base.html as a base template: index.html and login.html. login.html has a fully functional nav bar (links and :hover working) where index.html shows the nav bar but won't recognise the links.

Bear with me as this is my first post, so I have no idea what I need to provide etc...

base.html:

        <!DOCTYPE html>
        <html>

        <head>
        <title>{% block title %}Graduate Proofreading | Professional Essay 
        Proofreading{% endblock title %}</title>

        {% block head_meta %}
        {% block head_meta_charset %}
        <meta charset="UTF-8">


        {% endblock head_meta_charset %}
        {% block head_meta_contentlanguage %}
            <meta http-equiv="Content-Language" value="en-UK" />
        {% endblock head_meta_contentlanguage %}
        {% block head_meta_viewport %}
             <meta name="viewport" content="width=device-width, initial-
         scale=1">
        {% endblock head_meta_viewport %}
        {% endblock head_meta %}

        {% block head_css %}
        {% block head_css_site %}
            <!--=================================CSS LINKS==========================================-->
            <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
            <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-cyan.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
            <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>



              <!-- Custom fonts for this template-->
              <!-- Custom styles for this template-->

        {% endblock head_css_site %}

        {% block head_css_section %}
            <style type="text/css">

            </style>
        {% endblock head_css_section %}

        {% block head_css_page %}
        {% endblock head_css_page %}
    {% endblock head_css %}
</head>
<body>


        <!-- Hidden Side Navigation -->
        <nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
        center " style="display:none" id="mySidebar">
          <h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>

  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
  <a href="#" class="w3-bar-item w3-button">Link 4</a>
  <button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
<!-- ====================================================
                   | MAIN NAV BAR |
========================================================
 -->

<div class="w3-bar w3-left w3-dark-gray" style="width:100%;overflow:hidden;height:44px">

      <button class="w3-bar-item w3-button w3-left"  onclick="w3_open()"  title="Sidebar"><i class="fas fa-bars fa-2x"></i></button>
      <span id="nav-right-btn-margin" class="w3-bar-item w3-right" style="margin-right: 30px"> </span>
      <a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'signup' %}" title="Sign Up" style="padding-top: 14px">SIGN UP</a>
      <a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'login' %}" title="Login" style="padding-top: 14px">LOGIN</a>
      <a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
      <a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>

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

{% endblock content %}

{% block footer %}
<!-- Footer -->
<footer class="w3-container w3-dark-gray w3-padding-16">
  <h3>Graduate Proofreading</h3>
  <div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
    <span class="w3-text w3-theme-light w3-padding">Go To Top</span>    
    <a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
    <i class="fa fa-chevron-circle-up" style="color: #00aac1"></i></span></a>
  </div>
  <br>
  <br>
<p>Website design and development by Luke Pilkington. For Full Stack Web Development, Visit <a href="http://www.lukepilkington.com">www.lukepilkington.com</a></p>
</footer>

<script>
// Script for Sidebar etc

// Side navigation
function w3_open() {
    var x = document.getElementById("mySidebar");
    x.style.width = "100%";
    x.style.fontSize = "40px";
    x.style.paddingTop = "10%";
    x.style.display = "block"
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>
{% endblock footer%}
</body>
</html>

index.html:

    {% extends "base.html" %}

  <title>{% block title %}Professional Essay Proofreading{% endblock title %}</title>

{% block head_css_section %}
    <style type="text/css">

    </style>
 {% endblock head_css_section %}

{% block header %}
<header class="w3-display-container" id="myHeader">

  <img src="/static/pics/office.jpeg" style="width:100%; padding: 0px; opacity: 0.5;">

  <div class="w3-display-middle w3-container" style="text-align: center">
    <h4>GRADUTEPROOFREADING.CO.UK</h4>
  <h1 class="w3-xxxlarge w3-animate-bottom">QUALITY ESSAY PROOFREADING</h1>
    <div class="w3-padding-32">
      <button class="w3-btn w3-xlarge w3-hover-light-grey" style="background-color: #00aac1" onclick="#" style=";"><span style="color: black; font-weight:900">TRY FOR FREE TODAY</span></button>

    </div>
  </div>
</header>
{% endblock header %}

{% block content %}
<body>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
  <div class="w3-card w3-container" style="min-height:460px">
  <h3>Quality Proofreaders</h3><br>
  <i class="fab fa-jenkins fa-7x" style="color: #00aac1"></i>
  <!--<i class="w3-xxxlarge material-icons">person</i>-->
  <p>Native English Proofreaders Only</p>
  <p>University Graduates, Always</p>
  <p>Impeccable Attention To Detail</p>
  <p>Fast Turnaround</p>
  </div>
</div>

<div class="w3-third">
  <div class="w3-card w3-container" style="min-height:460px">
  <h3>Unbeatable Price</h3><br>
  <i class="far fa-money-bill-alt fa-7x" style="color: #00aac1"></i>
  <p>Simple and Affordable</p>
  <p>Just 1.4p Per Word</p>
  <p>Proofread Any Essay</p>
  <p></p>
  </div>
</div>

<div class="w3-third">
  <div class="w3-card w3-container" style="min-height:460px">
  <h3>Try Our Dissertation Service</h3><br>
  <i class="fas fa-graduation-cap fa-7x" style="color: #00aac1"></i>
  <p></p>
  <p>English Lit./Lang. Graduates Only</p>
  <p>Essay Writing Style Improvements</p>
  <p>Formatting Correction</p>
  <p>Just 1.6 Pence Per Word!</p>
  </div>
</div>
</div>
<div></div>


</body>
{% endblock content %}
</html>

finally, login.html:

{% extends "base.html" %}

  <title>{% block title %}Login | Graduate Proofreading{% endblock title %}</title>

    {% block head_css_section %}
          <style type="text/css">


            @media (max-width: 600px) {
                input[type=text], input[type=password] {
                width: 90%;
                margin-top: 0;
                }

                #logincontainer {

                }
      </style>
    {% endblock head_css_section %}

{% block header %}
<header class="w3-padding">
 <i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-button w3-theme"></i>
  <div class="w3-center" style="padding-top: 50px">
  <h4></h4>
  <h1 class="w3-xxxlarge w3-animate-bottom"></h1>
    <div class="w3-padding-32">
     <!-- <button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="#" style="font-weight:900;">TRY FOR FREE TODAY</button>
     -->
    </div>
  </div>
</header>
{% endblock header %}

{% block content %}
<body class="w3-theme">

  <div class="w3-card w3-display-middle w3-round" style="width: 60%; max-width:600px" id="logincontainer">
    <div class="w3-container w3-dark-gray">
    <form class="form-signin" action="#">       
      <h2 class="form-signin-heading">Login</h2>
      </div>
          <div class="w3-container w3-light-gray w3-padding-32" style="width:100%";>
          <div>Username</div>
          <input type="text" class="form-control" name="username" placeholder="Username/Email Address" required="" autofocus="" />
          <div></div>
          <div style="padding-right:6px">Password</div>
          <input type="password" class="form-control" name="password" placeholder="Password" required=""/>      
          <label class="checkbox">

          <div></div>
        <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember Me

      </label>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>   
    </form>
    </div>
    <div class="w3-container w3-dark-gray" style="height:3em"></div>
  </div>
</body>
{% endblock content %}
{% block footer %}

{% endblock footer %}

Please let me know if you need any other info. Thanks!

Solution

  • Ok, I finally worked it out, it's not a Django issue at all, it's just that the w3.CSS class ".w3-display-container" invisibly covers up the nav bar above it for some reason.

    index.html:

    ...
{% block header %}
<header class="w3-display-container" id="myHeader">
...

    Padding the actual element ( in this example) didn't work. The only solution I could come up with was a rather inelegant one. I added a div above the element and padded it equal to the height of the nav bar.

    <div style="padding-bottom: 44px";>

</div>
<div class="w3-display-container" id="myHeader">

    https://www.w3schools.com/w3css/w3css_display.asp

    Didn't tell me anything useful, but there's the link in case anyone wanted to do some digging.