I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.
I am developing this webpage using python/django framework in which my base.html file looks like this
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
I believe the problem resides in my base.html file however here is a sample html of another page that use base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
I am new to web development so any help would me much appreciated.
Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line
.container .page-header { border-bottom: 0px:} which then got rid of this border.
Not sure why the border was there in the first place.
If anyone comes along I hope this helps.
Related
I have visited these answers too Running Flask environment using HTML:receiving error message of expected else statement and How to fix jinja2 exceptions Template SyntaxError: but could not solve the problem.
I am a beginner at Flask and tried using jinja2 template inheritance. Here are my files.
index.html
{% extends "layout.html" %}
{% block body %}
<!-- Page Header-->
<header class="masthead" style="background-image: url('{{ url_for('static',filename='assets/img/home-bg.jpg') }}')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
</div>
</div>
</div>
{% endblock body %}
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<link href="{{ url_for('static',filename='css/styles.css') }}" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/about">About</a></li>
</ul>
</div>
</div>
</nav>
{% block body %} { % endblock % }
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I want to inheritent the template from layout.html to index.html. But I am getting this error:
jinja2.exceptions.TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.
I have surfed a lot of websites to solve it but could not. Any help would be highly appreciated.
Finally! I just got the reason for the error. The error was generated at this line:
{% block body %} { % endblock % }
After figuring it out, I came to know that there should be no space between the braces and the % sign. And the code should look like this.
{% block body %} {% endblock %}
I am working on a portfolio website in flask, python, HTML, CSS. However, I have encountered what seems like a simple error but I can't solve it.
I want the navbar to be on top of the background image that I'm using from Unsplash. The background picture is also showing up on all the other pages too. I don't want that. All I want is, a home page with the background image and the navbar being on top of it so that it looks good. The contact page, portfolio, and about should have their own content and it should not display the home image.
This is what I mean. I want the home page to be similar to this site and when browsing other images it should display its content (http://template-shutter.webflow.io/photographers)
http://template-shutter.webflow.io/
Here is my template code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Jainam's Portfolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
<nav class="bgimg navbar navbar-expand-lg fixed-top navbar-light">
<a class="navbar-brand" href="#">First LastName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="{{url_for('home')}}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('about')}}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('portfolio')}}">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('contact')}}">Contact</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
Home.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Portfolio</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}
<div class="container">
<h1>Hi</h1>
</div>
{% endblock %}
</body>
</html>
CSS
body {
overflow-x: hidden;
}
.bgimg {
min-height: 600px;
background-image: url('https://images.unsplash.com/photo-1478515463067-d20f52aace26?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
position: relative;
}
Add position of navbar as relative instead of using absolute
.navbar{
position:relative;
z-index:1;
}
`
.testimonials {background: url('./images/s8.png'); padding:55px 0; overflow:hidden; }
`Am using django 2.1 having a problem in displaying a background image which is styled in my css folder
I have tried several ways like
.testimonials {background: url("/static/images/s8.png"); padding:55px 0; overflow:hidden; }
and having an inline customization both didn't work please help
<div class="testimonials" style="background: url({% static "images/s8.jpg" %})">
Using a background image in CSS file doesn't require a static block. Just make sure you have path correctly matched with your folders. Use ./ to go back in path mapping.
css/base.css
images/slide1Back.png
My CSS file was in CSS folder and images were in the images folder. So I used this.
background-image: url('./images/slide1Back.png');
First of all, make sure you added this line to your html file:
{% load staticfiles %}
then put this to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
now everythings work like what!
UPDATE
Here is my profile.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
</body>
</html>
and my style.css
#subheader.about {
background: url("../images/s8.jpg") center center no-repeat;
padding: 100px 25px;
}
#subheader.about:after {
background: rgba(34, 43, 50, .9);
bottom: 0px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
please attention, i used ../ instead of ./
and this is my tree:
tree
and this is result:
result view
Am using this template here as about.html
{% extends "base.html" %}
{% load static %}
{% block Content %}
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
<!-- DESCRIPTION -->
<div class="about-descr">
<div class="row">
<div class="col-sm-12 col-md-10 center-block">
<h3>WHAT ARE WE ALL ABOUT?</h3>
<div class="titleborder centered">
<div class="titleborder_left"></div>
<div class="titleborder_sign"></div>
<div class="titleborder_right"></div>
</div>
</div>
</div>
<div class="row spacing-25">
<div class="col-sm-12 col-md-7">
<img src="images/about-us.jpg" alt=""/>
</div>
<div class="col-sm-12 col-md-5">
<p class="topspacing">We work hard to provide Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa. </p>
<p>Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa..</p>
</div>
</div>
</div>
<!-- END OF DESCRIPTION -->
<!-- ABOUT ICONS -->
<div class="about-icons">
<div class="row">
<div class="col-sm-3"><img src="images/icon17.png" alt=""/><p>CHOOSE</p></div>
<div class="col-sm-3"><img src="images/icon18.png" alt=""/><p>SCALE</p></div>
<div class="col-sm-3"><img src="images/icon19.png" alt=""/><p>LAUNCH</p></div>
<div class="col-sm-3"><img src="images/icon20.png" alt=""/><p>USE</p></div>
</div>
</div>
<!-- END OF ABOUT ICONS -->
{% endblock Content%}
and this is my css
======================== */
#subheader.about {background: url("../images/s8.jpg") center center no-repeat; padding:100px 25px;}
#subheader.about:after { background: rgba(34,43,50,.9); bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }
Can tell where is the mistake or am missing something here
here is the path to image projects/djangoprojects/static/images/s8.jpg
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content=" ">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>| Web | Software </title>
<link rel="shortcut icon" href="{% static "images/favicon.png" %}" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap & Styles -->
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-theme.min.css" %}" rel="stylesheet">
<link href="{% static "css/block_grid_bootstrap.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/owl.carousel.css" %}">
<link rel="stylesheet" href="{% static "css/owl.theme.css" %}">
<link rel="stylesheet" href="{% static "css/animate-custom.css" %}">
<link rel="stylesheet" href="{% static "css/flexslider.css" %}">
<link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
<link rel="stylesheet" href="{% static "css/slicknav.min.css" %}">
<link href="{% static "css/style.css" %}" rel="stylesheet">
</head>
<body>
<!-- TOP NAV -->
<div class="topmenu">
<div class="row">
<div class="col-sm-3">
<ul class="top left">
<li><i class="fa fa-phone"></i>+666666666 Call us</li>
</ul>
</div>
<div class="col-sm-9">
<ul class="topright">
<li><i class="fa fa-unlock-alt"></i> CLIENT AREA</li>
<li><i class="fa fa-commenting-o"></i> LIVE CHAT</li>
<li><i class="fa fa-hand-pointer-o"></i> Support</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP NAV -->
<!-- HEADER -->
<div class="header">
<div class="row">
<div class="col-sm-3">
<div class="logo">
<a href="/"><img src="{% static "images/logo.png" %}" alt="" />
</a>
</div>
</div>
<div class="col-sm-9">
<nav id="desktop-menu">
<ul class="sf-menu" id="navigation">
<li class="current">Home
<ul>
<li>Billing</li>
<li>Web Design</li>
</ul>
</li>
<li>Hosting
<ul>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
</ul>
</li>
<li>Domains</li>
<li>Pages
<ul>
<li>About</li>
<li>FAQ</li>
<li>Datacenter</li>
</ul>
</li>
<li>Blog
<ul>
<li>hosting tips</li>
<li>Facebook</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- END OF HEADER -->
{% block Content %}
{% endblock Content %}
<!-- FOOTER -->
<div class="footer">
<div class="row">
<div class="col-sm-3">
<h4>CLOUD HOSTING</h4>
<ul>
<li>cPanel Hosting</li>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
<li>WordPress Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>HOSTING FOR APPS</h4>
<ul>
<li>WordPress Hosting</li>
<li>Joomla Hosting</li>
<li>Drupal Hosting</li>
<li>Magento Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>COMPANY</h4>
<ul>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Acceptable Usage Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h4>NEWSLETTER SIGNUP</h4>
<div id="mc_embed_signup">
<form class="form-inline validate material" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input id="mce-EMAIL" type="email" name="EMAIL" placeholder="E-mail" required>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
</div>
<input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="mtr-btn button-blue">
</form>
</div>
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- SOCIAL & COPYRIGHT -->
<div class="social">
<div class="row">
<div class="col-sm-12">
<ul class="social-links">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-pinterest-p"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-github-alt"></i></li>
</ul>
<p class="text-center">Copyright© . All rights reserved.</p>
</div>
</div>
</div>
<!-- END OF SOCIAL & COPYRIGHT -->
<!-- LOGIN MODAL -->
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="LoginModal">
<div class="modal-dialog" role="document">
<form method="post" action="#" class="material">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i>LOGIN TO YOUR ACCOUNT</h4>
</div>
<div class="modal-body">
<input type="text" name="username" placeholder="E-mail Address">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="mtr-btn button-fab">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
<!-- END OF LOGIN MODAL -->
<i class="fa fa-angle-up"></i>
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.flexslider-min.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<script src="{% static "js/hoverIntent.js" %}"></script>
<script src="{% static "js/superfish.min.js" %}"></script>
<script src="{% static "js/owl.carousel.js" %}"></script>
<script src="{% static "js/ripple-effect.js" %}"></script>
<script src="{% static "js/wow.min.js" %}"></script>
<script src="{% static "js/jquery.form.min.js" %}"></script>
<script src="{% static "js/jquery.slicknav.min.js" %}"></script>
<script src="{% static "js/retina.min.js" %}"></script>
<script src="{% static "js/custom.js" %}"></script>
</body>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5933bc17b3d02e11ecc6824e/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</html>
I am following the tutorial/code described here. The specific code in question is this part:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harrison Kinsley</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
When I run this code, the links to 'Home', Blog' and 'Content' pages are all on one line, with no spaces between them (i.e. the links are like this: HomeBlogContent).
I want them to look like:
Home
Blog
Content
When I add this line into the code:
<p>This is<br>a paragraph<br>with line breaks</p>
The output is as expected:
This is
a paragraph
with line breaks
When I replace the strings in this line, like this:
<p><li><a href='/'>Home</a></li><br>li><a href='/blog/'>Blog</a></li><br>li><a href='/contents/'>Contents</a></li></p>
I would have hoped that solved my problem, but it doesn't. Can someone tell me where I'm going wrong, how can I get the Home, Blog and Content links to print on separate lines? Thanks.
You are missing the left bracket for your <li> tags.
Or if you're not a noob just get rid of those <br> tags. <li> will go to next line automatically.
nav {
display: flex;
flex-direction: column;
}
<nav>
<a href='/'>Home</a>
<a href='/blog/'>Blog</a>
<a href='/contents/'>Contents</a>
</nav>
Your markup looks good to me in the original file. However, from the problem you are describing sounds like there is something wrong with how you are importing Bootstrap 3 into this file. Check that you have the file bootstrap.min.css where you say you have it under personal/css/bootstrap.min.css
This should work.
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contents/'>Contents</a></li>
</ul>
I'm working on a Django(1.10) project in which I need to load a template only for logged in users, which is coming from profile template.I need to load generateCert.html only for logged in user, this template should display the same navbar as profile template because both of these templates have the same header.
Here's my generateCert.html template:
{% load staticfiles %}
{% load static from staticfiles %}
{% load mathfilters %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NAMI Montana | User's Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content=""/>
<meta name="author" content="http://webthemez.com"/>
<!-- css -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"/>
<link href="{% static 'css/fancybox/jquery.fancybox.css' %}" rel="stylesheet">
<link href="{% static 'css/flexslider.css' %}" rel="stylesheet"/>
<link href="{% static 'css/style.css' %}" rel="stylesheet"/>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<!--Pulling Awesome Font -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]><![endif]-->
<style>
input[type="image"] {
padding-left: 30%;
padding-top: 5%;
font-size: 1em;
color: #fff;
background: transparent;
border: 1px solid #fff;
font-weight: bold;
width: 70%;
}
</style>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs"><i class="fa fa-envelope"></i><span>matt#namimt.org </span></p>
<p class="pull-right"><i class="fa fa-phone"></i>Tel No. (406) 443-7871</p>
</div>
</div>
</div>
</div>
<!-- start header -->
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/logo.png' %}" alt="logo"
width="190px" height="50px;"/></a>
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
{% if not user.is_authenticated %}
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Login</li>
<li>SignUp</li>
<li>Contact</li>
{% endif %}
{% if user.is_authenticated %}
<li>Home</li>
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Logout</li>
<li>Contact</li>
{% endif %}
</ul>
</div>
</div>
</div>
</header>
<!-- end header -->
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="margin-top: 5%">
<div class="panel panel-default">
<div class="panel-heading">
<h4> You have to pay <b> $95 </b> to generate your certificate.</h4>
</div>
{% block content %}
{{ form.render }}
{% endblock %}
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
Here are my views.py:
#login_required
def payment_process(request):
if request.user.is_authenticated():
minutes = int(request.user.tagging.count()) * 5
testhours = minutes / 60
hours = str(round(testhours, 3))
# pdb.set_trace()
# What you want the button to do.
invoice = generate_cid()
paypal_dict = {
"business": settings.PAYPAL_RECEIVER_EMAIL,
"item_name": "Certificate of Completion from Nami Montana",
"custom": {"name": str(request.user.first_name + ' ' + request.user.last_name),
"hours": str(hours)},
"invoice": str(invoice),
"amount": "5.00",
"notify_url": "https://8bf57d43.ngrok.io/users/paypal/",
# "return_url": "https://b906ef46.ngrok.io/users/profile/",
"cancel_return": "https://8bf57d43.ngrok.io/users/cancel/",
}
print(paypal_dict)
# Create the instance.
form = PayPalPaymentsForm(initial=paypal_dict)
context = {"form": form}
return render_to_response("users/generateCert.html", context)
else:
return HttpResponseRedirect('/users/login')
Here is my urls.py:
url('^process/$', views.payment_process, name='payment'),
generateCert.html template display the menu of Anonymous users not logged in users menu, that means this template loaded by the unauthenticated user. How can I strict this template to only logged in users as it's coming from the profile page.
No, it doesn't mean that at all. What it does mean is that you are not passing the user to the template. This is because you are using render_to_response - which apart from anything else is deprecated - rather than the render shortcut which runs context processors.
Note, your login_required decorator makes that if request.user.is_authenticated() check pointless; the user will never not be authenticated.
Also note that you really should be using template inheritance to break out things like the top nav and the HTML boilerplate into their own templates.