I am developing a web app and I'm using a navbar.html as layout in each page of my webapp with this code :
eachpage.html :
{% extends 'navbar.html' %}
{% block body %}
<div class="container">
<div class="titre_pages">
<h2>PAGE TITLE </h2>
</div>
</div>
Everything works fine and my pages seems responsive bu when I reduce the size of my browser my navbar and my titles are overlaping. Should I add something between my navbar/layout and my html code to avoid this ?
Here is my page with a normal browser size :
Here is my page when I reduce the size of my browser :
The answer to your problem is to use media queries to serve different css/design for different viewport sizes. If you use bootstrap or something and bootstrap grid often you can have responsiveness handled for you. Also see below for standard practice instead of extending a nav bar we would create a base.html that would contain the entire layout including navbar. With this method of assigning blocks and including files you can over you can then extend from base.html and only over ride the body block or sidebar block as necessary.
<!-- base.html -->
<!html>
<head>
</head>
<header>
{% block header %}
{% include 'navbar.html' %}
{% endblock %}
</header>
<body>
{% block body %}
{% include 'index.html' %}
{% endblock %}
</body>
</html>
Related
I am trying to extend a navbar so it appears in several pages. When I insert {% extend %} {% block content %} {% endblock %}, it only appears as text - the code dosen't work.
Here is my Navbar that I want to extend:
This is how it appears in the browser:
This is the html file I want to include my navbar in:
How it appears:
I want to inherit my navbar, but only the code text appears in the browser.
{% extend %} and so on have no special meaning in HTML.
The syntax is clearly from some template engine. Maybe Nunjucks.
You'll need to pass your source code through the template engine and use the HTML generated from it.
I am new to web development and I am working on Django framework in VSCode. I have been trying to make a user interface for the web application which has a menu on the left side of the screen and a nav bar on top which says "home page" (the image is below). There I need all the texts and photos to be in the rest part of the page, and when I scroll down I want only that part to move, like in a real web application. But I don't know how to do it, do I have to use JavaScript for that or can I just do it within HTML/CSS?
As you can see in the picture the paragraph covers the nav bar.
Thank you!
What you're looking for is the CSS position: fixed property. For example:
<div class="navbar" style="position: fixed;">
https://www.w3schools.com/howto/howto_css_fixed_menu.asp
You must use a base_generic_page to contain all the aplication pages.
basic_generic_page has the nav_bar or side_bar
<html lang="en">
<head>
{% block title %}<title>Local Library</title>{% endblock %}
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>
You can heritage the base in application pages and rewrite content block in this way :
{% extends "base_generic.html" %}
{% block content %}
<h1>Local Library Home</h1>
<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
{% endblock %}
Source: https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page
Much like the position:fixed
You could also give position: sticky
Has the added benefit of occupying space
Depend really on how you want the page to flow
I am currently a beginner in html and I have seen this problem many times and I do not know how to solve it. I copied a source code from a video in an attempt to make a social media. The following code is in the file home.html:
{% extends 'base.html' %}
{% block title %}
home
{% endblock title %}
{% block content %}
{{hello}}
<br>
{{user}}
{% endblock content %}
{% block scripts %}
<script>
$(document).ready(function(){
console.log('working')
})
</script>
{% endblock scripts %}
However, in the video the html page seems correct and all buttons and functions are working. On the other side my html page is like this:
...
The guide you have seen concerns Flask, a framework for applications written in Python. The code will not work because there is no preprocessor that can process it. In this case the browser will show you plain text without formatting.
I have a small GAE app that's working fine. I use it to serve a few static files as well like (About page, Privacy and contact page). I put the "about.html" in a /static folder along with the /css, /img and /js. In "app.yaml" I declared the handler:
- url: /static
static_dir: static
It all works fine. Now I've abstracted the common contents (navigations, etc) into "_base.html" like this:
<html>
<head><title> Page title here</title>
<!--Some header files here -->
</head>
<div id="content">
{% block bodycontent %}
{% endblock bodycontent %}
</div>
</body>
</html>
The child file looks like this:
{% extends "_base.html" %}
{% block title %} About {% endblock %}
{% block bodycontent %}
<p>Some contents here...</p>
{% endblock bodycontent %}
Now, problem when it displays, the "_base.html" does not render. In fact the whole jinja code just displays. But when I wrote an handler for "about.html" it renders the base html correctly.
Question is, why do I have to create instances b4 I can display static files like About, Privacy pages just because I want to use template inheritance? Am I doing something wrong?
Templates are not static files, by definition. If you want a completely static HTML file, you can of course have one without any handler code. But templates require rendering, which means they need a handler to do it.
I have a template block to override the class name in the inherited template. The resultant html from the block override is showing up the a malicious text.
Base.html:
<html>
<body>
{% block content %}
<h1 class="{% block heading_style %}Base{% endblock %}">Base Page Heading</h1>
{% endblock%}
</body>
</html>
Child.html:
{% extends "Base.html" %}
{% block content %}
{{block.super}}
{% block heading_style %}Login{% endblock %}
{% endblock %}
The block heading_style is the block I'm concerned about.
Resultant html:
As you can see the h1 class has been replaced with "Login" but it has also the started showing the "Login" as text after the h1 tag.
I'm using django 1.3.3 and eclipse with pydev. I've also checked the encoding of the html files and they and they are utf-8
You've put the definition of the heading_style block in the child within the content block. So it's being used for two things: as text content within content, and to fill the heading_style block in the parent.
Move heading_style outside of the content block definition, and it should be fine.
one endblock is missing
{% block content %}
{{block.super}}
{% block heading_style %}Login{% endblock %} {% endblock %}
I'm not sure overriding a block and nested sub-block along with {{block.super}} is good combination of doing things. May be you want to re-factor your templates for not relying on this.
Here is a ticket on django related to this (not sure this has been fixed or not) {{ block.super }} doesn't work with nested {% block %} statements