I am building a very simple web app to help me get comfortable writing Javascript and i'm having some problems with the navbar (nothing to do with js). I have a button that I want to align right on the nav and it works fine when the window is at a small size, but when I maximize the window it no longer aligns right. The top right window is the small version of the page.
Here is the page maximized:
So as you can see when the page is above a certain size the button no longer aligns. I feel this may be something obvious that I am missing (quite new to web dev here) and am wondering if there is some type of CSS class or something that I can use to make the components keep their position. e.g. pull-right pull-right-lg. I am using django to serve the main app page and also backbone and underscore. Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
{% load static %}
<link rel='stylesheet' href="{% static 'bootstrap.min.css' %}"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
<script type='text/javascript' src="{% static 'jquery-3.3.1.min.js' %}"></script>
<script type='text/javascript' src="{% static 'underscore-min.js' %}"></script>
<script type='text/javascript' src="{% static 'backbone-min.js' %}"></script>
<script type='text/javascript' src="{% static 'views.js' %}"></script>
<script type='text/javascript' src="{% static 'App.js' %}"></script>
</head>
<body>
<script type='text/template' id='app_view-template'>
<div id='app-view' class='row'>
<div class='col-sm-12 col-md-12 col-lg-12'>
{% lorem %}
{% lorem %}
{% lorem %}
{% lorem %}
{% lorem %}
{% lorem %}
</div>
</div>
</script>
<!--HEADING AND NAVBAR-->
<nav class='navbar navbar-expand-lg navbar-light navbar-fixed-top bg-light'
role='navigation'>
<a class='navbar-brand' href='#'>Recipes</a>
<div class='pull-right'>
<ul class='nav'>
<li>
<button class='btn btn-light'>
<span class='material-icons'>add_circle_outline</span>
</button>
</li>
</ul>
</div>
</nav>
<!--TARGET FOR TEST VIEW-->
<div id='app_view-target' class='container'>
</div>
</body>
I assume that you are using Bootstrap 4
remove the class navbar-expand-lg
pull-right is no more in BS4
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
For more information check official documentation.
Related
Here is my HTML file:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- Link to Bookstrap and stylesheet -->
<link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'css/style.css' %}">
<script src="{% static 'js/bootstrap.min.js' %'}"></script>
</head>
<body class="bg-blue">
<div class="container">
<div class ="row">
<div class ="col-lg-4 col-lg-offset-4">
<br/>
<br/>
<br/>
<div class="panel panel-body">
<div class="panel-body">
<h3 class="text-center text-uppercase"><b> {% block heading %}{% endblock %}</b></h3>
<br/>
{% block content %}{% endblock %}
</div>
</div>
</div>
</body>
</html>
I want to use the "bg-blue" class defined in my style.css.
.bg-blue{
background-color: #3F3F63;
}
However it doesn't work. My boostrap and style.css are in the same folder. The Bootstrap loads, for example my text in centered and uppercase and the font is different.
I've also tried putting the class directly in the html file, and that works, but I want to be able to use style.css.
Edit: it works in Firefox but not Chrome, so it's not the code, any explain to this?
that is because you forgot to clear cache in chrome.press control + F5 to clear cache and load again.
I am developing the website on python(Django). I am getting some difficulties to change the background color of the top menu on every page.
What I am doing is, I have an index.html page and templates which are aboutus, contactus and service. When I am on the home page then I am getting the gray background of the menu which is correct. Now I am on aboutus and I have to change the menu color from gray to black but I am getting the only gray.
So I want to know how do I change the class or override the CSS? Should I need to add the class to the body and then override the menu BG? How do I added the class to the body on each page dynamically?
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
<div class="Wrpper">
<header class="bg_gray"><!--top menu code--></header>
{% block content %}
<!-- template code -->
{% endblock %}
<footer><!--footer code--></footer>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
style.css
.bg_gray{background-color: #ccc;}
.bg_black{background-color: #000;}
aboutus.html (All template are same)
{% extends 'demo1/index.html' %}
{% load static %}
<title>{% block title %}About us{% endblock %}</title>
{% block content %}
<!--some code here-->
{% endblock %}
you can override the header's class using javascript
first give your header an id :
then include the javascript file:
in app.js
$(document).ready(function() {
$('#top-header').removeClass('bg_gray');
$('#top-header').addClass('bg_blak');
});
<link rel="stylesheet" href="{% static 'js/app.js' %}">
<header class="bg_gray" id="top-header"><!--top menu code--></header>
Give important to bg_black class it will override the css of bg_gray class property...
like this,
.bg_black{
background-color: #000!important;
}
html:
<header class="bg_gray bg_black"><!--top menu code--></header>
Need some help with django. Seems that somehow i can't change the css of my home page.
These are my static settings:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
#'/var/www/static/',
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
In my index_home.html page i want to put a background image e.g. marea.jpg which is in static/img/marea.jpg.
<!--DOCTYPE html -->
<html>
<head>
{% load static %}
<title>Romanii din Italia</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' href="static/css/custom.css" />
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<link rel='stylesheet' href="/static/css/custom.css" />
</head>
<body>
<div class='container'>
<ol class='breadcrumb'>
<li><a href='{% url "posts:home" %}'>Acasa</a></li>
<li><a href='{% url "posts:list" %}'>Stiri</a></li>
{% if not request.user.is_authenticated %}
<li class='pull-right'><a href='{% url "register" %}'>Register</a></li>
<li class='pull-right'><a href='{% url "login" %}'>Login</a></li>
{% else %}
<li class='pull-right'><a href='{% url "logout" %}'>Logout</a></li>
{% endif %}
</ol>
</div>
<div class="container" >
<h2>Bine ati venit pe site-ul romanilor din Italia!</h2>
<div class="row" id="primapoza" style="background-image: url('/static/img/roma.jpg');background-repeat: no-repeat;background-size: cover;height: calc(100vh - 71px);">
<div class="col-xs-12 offset-xs-0 col-sm-4 offset-sm-4 section-title" >
<br><br>
<p id="banner-text"> Romani in Italia! </p>
<!-- <p id="banner-text" style="text-align: center;font-size:40px;!important;font-color:white;!important;margin-left: 100px;"> Romani in Italia! </p> -->
</div>
</div>
</div>
</body>
</html>
And this is my custom.css which doesn't change my css code. Can someone pls advise? Thank you in advance!
h1 {
color: #777777;
}
.wmd-panel{
margin-right: 0px !important;
margin-left: 0px !important;
}
.comment-reply{
display:none;
}
#banner-text{
font-color:white;!important;
font-size:40px;
}
I can customize the CSS only with inline code e.g <p id="banner-text" style="margin-left: 400;font-color: black;font-size:30">Romani in Italia!</p
Use {% load static %} and {% load staticfiles %} under head tag in html
Based on my understand of how {% load static %} is used and what the Django documentation is saying, I don't think you're using {% load static %} correctly. I've always used it right above whatever my static link were to be.
For example, in your html doc head, it should be
{% load static %}
<link rel='stylesheet' href='{% static "css/base.css" %}'>
Otherwise, I don't think your stylesheet is linked to your html doc. Try that and also correct that mistake anywhere else you may have it, and it should be working.
You can't have {% load static %} at the top of your file and expect it to apply for the whole page. It needs to be right above whatever your static file is, as many times as you use it.
I'm learning django. I have a site with a data table that has the following html template:
{% load static %}
{% load table_tags %}
<link href="{% static 'table/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'table/js/jquery.min.js' %}"></script>
<script src="{% static 'table/js/bootstrap.min.js' %}"></script>
<link href="{% static 'table/css/datatable.bootstrap.css' %}" rel="stylesheet">
<script src="{% static 'table/js/jquery.browser.min.js' %}"></script>
<script src="{% static 'table/js/jquery.dataTables.min.js' %}"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Impala query metrics</title>
</head>
<body>
<div class="container" style="margin: 10px 10px 10px">
<h1>Impala Query metrics</h1>
<br />
{% render_table people %}
</div>
logout
{% block content %} {% endblock %}
</body>
When i try to inherit with another template by adding
{% extends "base.html" %}
to the first line, it inherits with base.html but my original data table disappears.
Any help on how to keep my original data table or pointing me to the right documentation would be appreciated.
I have a base.html file that have blovk content and extended by manage.html. and that manage.html has a block sub_manage which is extended by internet_market.html, so visually it looks like:
|- base.html (block content)
|--manage.html (extends base.html)
|---sub_manage.html (extends manage.html)
when I render_template mange.html everything works fine, but when I try to render_template sub_manage.html the css/javascript does not work. What can I do to overcome this issue?
here is my base.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
</head>
<body>
<div id="left_sidebar">
<ul>
<li class="main"> + Главная</li>
<li class="main">Заказы</li>
<li class="main"> - Управление сайтом</li>
</ul>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
here is my manage.html file:
{% extends "admin/base.html" %}
{% block content %}
<!-- Nav tabs -->
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown active"></li>
</ul>
</div>
<!-- Tab panes -->
<div class="manage_menu_settings">
{% include 'admin/manage/site_figuraiton.html' %}
</div>
{% block sub_manage%}
{% endblock %}
{% endblock %}
and here is internet_market.html
{% extends "admin/manage.html" %}
{% block sub_manage %}
<div class="tab-content">
<div class="tab-pane {% if current == 'delivery_settings' %} active{% endif %}" id="delivery_settings">
Настройки доставки, корзины и оплаты
</div>
<div class="tab-pane {% if current == 'delivery_type' %} active{% endif %}" id="delivery_type">
Добавить способы доставки
</div>
{% endblock%}
Solved the issue.
the problem was that I links that I used for css and js file where relative links, thus when trying to render the 2 level extend it did not find css/js. so it was like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
but then I changed these links to dynamic links with url_for and it worked like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for("static", filename = "css/bootstrap.min.css")}}">
<script type="text/javascript" src="{{url_for("static", filename = "js/bootstrap.min.js")}}"></script>
<style type="text/css">