Is there a way to make these images smaller? and fit into a box? I followed according to a tutorial and images are bigger.This is zoomed out to 25% view. I'm looking for a way to resize the images to fit into the gallery like view, in the tutorial, the person ended up with a perfect gallery type output unlike me xd .This is for a django project and thanks in advance :)
This is normal zoomed out view:
html code:
{% extends 'portofolio/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<link rel="stylesheet" href="{% static "portofolio/css/photogallery.css" %}">
<body>
<h1 style="margin-top: 70px;">Image Gallery</h1>
<div id="jLightroom" class="jlr">
<a href="{% static "portofolio/images/1.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/1.jpg" %}">
</a>
<a href="{% static "portofolio/images/2.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/2.jpg" %}">
</a>
<a href="{% static "portofolio/images/3.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/3.jpg" %}">
</a>
<a href="{% static "portofolio/images/4.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/4.jpg" %}">
</a>
<a href="{% static "portofolio/images/5.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/5.jpg" %}">
</a>
<a href="{% static "portofolio/images/6.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/6.jpg" %}">
</a>
<a href="{% static "portofolio/images/7.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/7.jpg" %}">
</a>
</div>
</div>
</body>
<script src="{% static 'portofolio/js/jquery.min.js' %}"></script>
<script src="{% static 'portofolio/js/imagesloaded.pkgd.min.js' %}"></script>
<script src="{% static 'portofolio/js/lightbox.min.js' %}"></script>
<script src="{% static 'portofolio/js/jquery.lightroom.js' %}"></script>
<script type="text/javascript">
$("#jLightroom").lightroom({
image_container_selector: ".jlr_item",
img_selector: "img.jlr_img",
img_class_loaded: "jlr_loaded",
img_space: 5,
img_mode: 'min',
init_callback: function (elem) {
$(elem).removeClass("gray_out")
}
}).init();
</script>
{% endblock %}
css code:
.jlr {
font-size: 0;
}
.jlr div {
font-size: 1rem;
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
.jlr div img {
height: 100px;
opacity: 0;
}
.jlr img.jlr_loaded {
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 1;
}
Luckly i was doing something like this and i used grid , it actually helped me to put the images beside each other in one line in a specific box just like in the photo below, you can open the link below the code and see the output.
Grid box for images
HTML:
<div class='l-grid'>
<div class='c-project'>
<img src='./images/fulls/01.jpg'>
<div>
<h4>Tower</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/02.jpg'>
<div>
<h4>Water fall</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/03.jpg'>
<div>
<h4>River</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/04.jpg'>
<div>
<h4>Sea</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/06.jpg'>
<div>
<h4>Beautiful face</h4>
</div>
</div>
</div>
CSS:
.l-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 0.5rem; /*Here you can control the spacing between the images*/
}
.c-project img {
width: 100%;
}
You can use the width and height attribute to resize your image.
<img src="{% static "portofolio/images/7.jpg" %}" width="Your preferred width" height="Your preferred height">
To position images, you can use margin attributes:
<html>
<head>
<title>Test website </title>
</head>
<style>
#test {margin-left: 70px;
margin-top: 80px}
</style>
<body>
<img id="test" src="test image.png"/>
</body>
</html>
Related
i have this html
<html lang="en">
<head>
<style>.wf-force-outline-none[tabindex="-1"]:focus{
outline:none;
}
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SUSBOOKS</title>
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='mdb.dark.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='all.min.css') }}" />
<link href="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/css/das-dynamite-site-5ede7b.webflow.54c285831.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic,900,900italic" media="all">
<script type="text/javascript">WebFont.load({
google: {
families: ["Merriweather:300,300italic,400,400italic,700,700italic,900,900italic"] }
}
);
</script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">!function(o,c){
var n=c.documentElement,t=" w-mod-";
n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}
(window,document);
</script>
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<style>
#font-face{
font-family: 'Circular';
font-weight: 400;
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot);
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot?#iefix) format('embedded-opentype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff2) format('woff2'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff) format('woff'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.ttf) format('truetype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.svg) format('svg');
}
#font-face{
font-family: 'Circular';
font-weight: 700;
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot);
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot?#iefix) format('embedded-opentype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff2) format('woff2'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff) format('woff'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.ttf) format('truetype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.svg) format('svg');
}
body {
background-color:#000000 ;
}
.tab {
display: inline-block;
margin-left: 40px;
}
.wrapper {
width: 100%;
max-width: 31.25rem;
margin: 6rem auto;
padding: 15px;
}
.label {
font-size: .625rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: +1.3px;
margin-bottom: 1rem;
}
.btn-primary {
color: var(--button-color);
background-color: var(--button-background-color);
border-radius: var(--border-radius);
}
.btn-primary:hover {
box-shadow: inset 0 0 0 20rem var(--darken-1);
}
.btn-primary:active {
box-shadow: inset 0 0 0 20rem var(--darken-2),
inset 0 3px 4px 0 var(--darken-3),
0 0 1px var(--darken-2);
}
.btn-primary:disabled,
.btn-primary.is-disabled {
opacity: .5;
}
</style>
</head>
<body class="body">
<div class="navbar-logo-left wf-section">
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar-logo-left-container shadow-three w-nav">
<div class="container">
<div id="Navbar" class="navbar-wrapper">
<a href="#" class="navbar-brand w-nav-brand">
<img src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png" loading="lazy" sizes="(max-width: 479px) 63vw, 225px" width="225" srcset="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-500.png 500w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-800.png 800w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png 1085w" alt="">
</a>
<nav role="navigation" class="nav-menu-wrapper w-nav-menu">
<ul role="list" class="nav-menu-two w-list-unstyled">
<li>
<a href="/" aria-current="page" class="nav-link w--current">
<span class="text-span">Home
</span>
</a>
</li>
<li class="list-item">
<div data-hover="true" data-delay="0" class="nav-dropdown w-dropdown">
<div class="nav-dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0">
<div class="nav-dropdown-icon w-icon-dropdown-toggle" aria-hidden="true">
</div>
<div class="text-block">
<span class="text-span-2">Genres
</span>
</div>
</div>
<nav class="nav-dropdown-list shadow-three mobile-shadow-hide w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0">
<a href="/drama" class="w-dropdown-link" tabindex="0">
<span class="text-span-3">Drama
</span>
</a>
<a href="/fantasy" class="dropdown-link w-dropdown-link" tabindex="0">
<span class="text-span-3">Fantasy
</span>
</a>
<a href="/mystery" class="dropdown-link-2 w-dropdown-link" tabindex="0">
<span class="text-span-3">Mystery
</span>
</a>
<a href="/comedy" class="dropdown-link-3 w-dropdown-link" tabindex="0">
<span class="text-span-3">Comedy
</span>
</a>
<a href="/adventure" class="dropdown-link-4 w-dropdown-link" tabindex="0">
<span class="text-span-3">Adventure
</span>
</a>
<a href="/action" class="dropdown-link-5 w-dropdown-link" tabindex="0">
<span class="text-span-3">Action
</span>
</a>
<a href="/teen" class="dropdown-link-6 w-dropdown-link" tabindex="0">
<span class="text-span-3">Teen
</span>
</a>
<a href="/romance" class="dropdown-link-7 w-dropdown-link" tabindex="0">
<span class="text-span-3">Romance
</span>
</a>
</nav>
</div>
</li>
<li>
<div class="nav-divider">
</div>
</li>
<li class="mobile-margin-top-10">
<a href="/search" class="btn btn-primary mb1 black bg-white"><span class="text-span-2">Search
</span>
</a>
</li>
</ul>
</nav>
<div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
<div class="w-icon-nav-menu">
</div>
</div>
</div>
</div>
<div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-0">
</div>
</div>
</div>
<div style="text-align: center;">
<h2 style="text-align: center;">
<span style="color: #ffffff;">Popular Books
</span>
</h2>
</div>
<div class="container"style="text-align: center;">
<div class="row">
{% for item in data %}
<div class="col-lg-2 col-md-3 col-sm-5">
<div style="border-radius:20px;" class="card h-1 mb-2">
<a href="api/default?query={{item.name}}" names="{{ item.name }}" class="ripple">
<img style="border-radius:20px;" class="card-img-top img-fluid" names="{{ name }}" src={{item.cover}} alt="{{ name }}" width="1500px" height="2250px" onerror="this.onerror=null; this.src='../static/default.png'" />
</a>
</div>
</div>
{% endfor %}
</div>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812513324418518"
crossorigin="anonymous">
</script>
<!-- lower banner -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5812513324418518"
data-ad-slot="1770889507"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
}
);
</script>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="SUSTEAM" data-description="Support me on Buy me a coffee!" data-message="Thanks for all the support !!" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18">
</script>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63b8e36b0f5b782ef248d8ab" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>
<script src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/js/webflow.efb10e0b9.js" type="text/javascript">
</script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
<footer style="margin-top: 200px;" class="bg-dark text-center">
<div class="text-center p-3" style="background-color:#000000">
<p style="color: white">SusBooks.com
</p>
<p style="color: white">Powered by
<img class="px-2" src="{{ url_for('static', filename='vexer.png') }}" style="width: 150px">
</p>
</div>
</footer>
<div id="ed73d0f4-3465-4dc6-87a9-e49c622764bb" style="display: block !important; z-index: 2147483647 !important;">
</div>
</html>
and my nav bar is correct in browser, white text and black background, but on mobile the navbar background goes to white and the text stays white. How would i go about changing the mobile nav bar background to match the desktop nav bar. I have tried for hours and still cant figure out how to change the background for mobile nav bar.
I can't see why you are getting this error. As you have no #media screen and (min-width) and only one main color changed
body {
background-color:#000000 ;
}
So the only thing I can offer (As I have run this code and it stays black) if that's what you want then it's working.
Add:
body {
color: #fff;
}
Color is for the Text, it will only work for text :).
If you are testing on your own phone, You may want to test in Incognito OR delete your history for the website (Only) keep your passwords etc and try again. Dossn't always update.
You can also try this for when it's messing up:
#media screen and (min-width 1000px)
change the 1000px to the point where it's not working and change the color to the one you want. Or anything for that matter.
Hope this helps! :)
A lot of information seems to be missing from your question.
Where are the CSS variables defined?
Are some of the scripts (javascripts) interfering with style?
This does not seem to be HTML, but some templating language (maybe Handlebars) since is contains a for-loop {% for items in data %} and also a {{name}} refrence?
Have you checked if your browsers has the same color scheme setting? I suspect one is in dark-mode and one is in light-mode.
To color an element in CSS you simply select the element either by className or by id, then you apply background-color: black.
in your case I believe you can use
.navbar-logo-left-container.shadow-three {
background-color: black;
}
Else you can use
.navbar-logo-left-container {
background-color: black !important;
}
You need to include the !important since a lot of styling made for that element are overwritten later.
I cannot help you more without further information.
Note: I tried to run in browser (chrome-based) and the navbar was black.
solved it by adding
.nav-menu-two {
background-color: black !important;
}
with help from cosby
I'm not sure how best to ask this question. I'm a novice, so apologies in advance if anything is clumsily put or painfully obvious, please be patient. I'll try to be as clear as possible. I'm developing a simple website with Bootstrap 4.3.1, Django 4.0.1, Python 3.9.5. I actually don't think any of that is relevant to this question, however, which is focused on my own stylesheet. On this site I have a logo that slowly changes color using the following css, which I adapted from 'Hue Loaders' (a loader UI I found on codepen.io - Thank you to Shivam Thaplival):
.loader {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
#keyframes hue{
0%{filter: hue-rotate(0deg);}
10%{filter: hue-rotate(30deg);}
90%{filter: hue-rotate(330deg);}
100%{filter: hue-rotate(360deg);}
}
Now I want the on-hover color for the other links on the navbar to be the same as the logo color, whatever it happens to be at that point. I tried applying the same code like so:
.font-nav:hover{
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
The color change works, but the issue is that the animation starts whenever I start to hover, so the color's out of sync with the logo.
I'm wondering if I can somehow tie the timing of the hover animation to the logo animation. Any suggestions?
UPDATE: Figured out where I went wrong. Instead of adding the same class call for the animation that was already applied to my logo I copied the css to a different class. When I did that, it started the animation from the beginning when I hovered over links, but when the class call is the same, the animation is synched up across logo and hovered-over links. Here's the css I ended up with:
.font-nav{
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
color: #333333;
}
.font-nav:hover{
color: #ff9933;
}
#right-nb{
text-align: right;
}
/* COLOR CHANGER BELOW */
.loader {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
#keyframes hue{
0%{filter: hue-rotate(0deg);}
10%{filter: hue-rotate(30deg);}
90%{filter: hue-rotate(330deg);}
100%{filter: hue-rotate(360deg);}
}
and the html:
<!DOCTYPE html>
{% load static %}
<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.0">
<title>Document</title>
{% comment %} Bootstrap {% endcomment %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% comment %} Medium {% endcomment %}
<script src="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
{% comment %} FontAwesome {% endcomment %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
{% comment %} Fonts {% endcomment %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
{% comment %} Custom CSS {% endcomment %}
<link rel="stylesheet" href="{% static 'css/blogstyle.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<ul class="nav navbar-nav" style="width: 40%;">
<li></li>
<li><a class="nav-link font-nav loader" href="{% url 'about' %}">About</a></li>
<li><a class="nav-link font-nav loader" href="https://www.github.com">Github</a></li>
<li><a class="nav-link font-nav loader" href="https://www.linkedin.com">LinkedIn</a></li>
</ul>
<div id="logo" >
<a class="navbar navbar-nav justify-content-center loader" style="width: 20%;" href="{% url 'post_list' %}"><img src="../../static/images/LASP_Logo_suppeq.png" alt="LASP Logo"></a>
</div>
<ul id="right-nb" class="nav navbar-nav justify-content-end" style="width: 40%;">
{% if user.is_authenticated %}
<li><a class="nav-link font-nav loader" href="{% url 'post_new' %}">New Post</a></li>
<li><a class="nav-link font-nav loader" href="{% url 'post_draft_list' %}">Drafts</a></li>
<li><a class="nav-link font-nav loader"a href="{% url 'logout' %}">Logout</a></li>
<li class="font-nav" style="font-size: 1em; color: #d3d3d3"><a>Logged in as: {{user.username }}</a></li>
{% else %}
<li><a class="nav justify-content-end" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i></a></li>
{% endif %}
</ul>
</div>
</nav>
</body>
</html>
The concept:
Use JavaScript to find the logo element.
Add an event listener for "animationstart"
Supply a handler function that will:
Find all the other elements that you want to animate
Add a class to these other elements that you want to animate
Provide the animation styling based on this class.
<style>
.loader {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
#keyframes hue{
0% {filter: hue-rotate(0deg);}
10% {filter: hue-rotate(30deg);}
90% {filter: hue-rotate(330deg);}
100% {filter: hue-rotate(360deg);}
}
.font-nav.anime {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
</style>
<script>
let logo = document.getElementById('logo');
logo.addEventListener("animationstart", function() {
let links = document.querySelectorAll('.font-nav');
let link;
for (var i=0; i<links.length; i++) {
link = links[i];
link.classList.add('anime');
}
}, false);
</script>
<body>
<div id="logo"><img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27"</div>
<a class="font-nav" href="#">A link</a>
<a class="font-nav" href="#">Another link</a>
</body>
I am trying to convert an HTML file to PDF for download purpose in Django using xhtml2pdf library. But after converting to PDF, the CSS is not working.
Here is my HTML code snippet:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Certificate</title>
{% load static %}
<link href="{% static 'koss/css/bootstrap.min.css' %}" rel="stylesheet">
<style>
.test {
position: relative;
bottom: -309px;
left: 331px;
color: #151313;
padding-left: 25px;
padding-right: 20px;
}
#profile_image1{
margin-top: -147px;
margin-left: 171px;
}
#profile_image2{
margin-left: 156px;
}
</style>
</head>
<body>
<div class="test">
<h3>name 1</h3>
</div>
<div class="test">
<h3> name2 </h3>
</div>
<div class="test">
<h3>name3 </h3>
</div>
<img id="profile_image1" alt="image" class="img-fluid m-3" src="{% static 'koss/img/memcirti1.png'%}"
onerror="imgError(this);">
<br>
<img id="profile_image2" alt="image" class="img-fluid m-3" src="{% static 'koss/img/memcirti2.jpg'%}"
onerror="imgError(this);">
</body>
</html>
How can I solve the problem?
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.
I couldn't get my image reflected using StaticFile process. Here are my global settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
('assets', 'C:/Users/dhopkins/PycharmProjects/django_test/static'),
My base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}My base template.{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/default.css" %}">
</head>
<body>
<div id="page">
</div>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Articles</li>
<li>Admin</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}Content goes here!{% endblock %}
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
</div>
</body>
</html>
My image folder is located in C:\Users\dhopkins\PycharmProjects\django_test\static\images.
Please help.
Your problem lies in this line
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
it should be
<img src="{% static "images/python-logo.jpg" %}" width="200"/>
This is not a problem with your static files. You've simply misspelled the <img src> attribute :-)