I have problem with right link in my bottom navigation.
This link is a little bit lower.
I am not css specialist, please for help.
My html code:
<div class="header container">
{% if is_paginated %}
{% if page_obj.has_previous %}
<h4>Previous</h4>
{% endif %}
<span class="header-label"><h4>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</h4></span>
{% if page_obj.has_next %}
<h4>Next</h4>
{% endif %}
{% endif %}
</div>
My css code:
.arrow {
position: absolute;
}
.right {
right: 0;
}
.left {
left: 0;
}
.container {
margin: 0 auto;
}
.header {
text-align: center;
}
Related
I am working on a shopify page and customized the video section template to post dual videos. So I was able to create the two videos side by side but when I display them on my phone it displays the video side by side instead of being stacked. below is a snipet of the code. If yall need the all the text I can send it. I made it short for space. I would like to thank you for y'alls help in advance.
I am assuming that the changes will need to be done in css, but I not sure how to format the #media tag.
<!-- Beginning first video -->
<div class="mvideo-layout">
<div class="video-container">
<div id="multiple-left" class="video-item--multiple" data-action="play-video">
<div class="video-wrapper">
<div class="video-wrapper__image-wrapper">
{%- if section.settings.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes:
'300,400,500,600,700,800,900,1000,1200', image:
section.settings.image -%}{%- endcapture -%}
{%- assign image_url = section.settings.image | img_url: '1x1' |
replace: '_1x1.', '_{width}x.' -%}
This begins the next video on the side
<!-- Beginning second video -->
<div id="multiple-right" class="video-item" data-action="play-video">
<div class="video-wrapper">
<div class="video-wrapper__image-wrapper">
{%- if section.settings.image2 -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes:
'300,400,500,600,700,800,900,1000,1200', image:
section.settings.image2 -%}{%- endcapture -%}
{%- assign image_url = section.settings.image2 | img_url: '1x1' |
replace: '_1x1.', '_{width}x.' -%}
Here is the CSS code
.mvideo-layout{
max-width: auto;
}
.video-container{
position: relative;
padding-bottom: auto;
}
#multiple-left{
float: left;
padding: 5px;
width: 47.5%;
box-sizing: border-box;
}
#multiple-right{
float: left;
padding: 10px;
width: 47.5%;
box-sizing: border-box;
Everyone after a little more research I found my answer. I add the following to my CSS file.
#media (max-width:767px) {
.video-container {
width: 100%;
height: auto;
}
#multiple-left {
width: 100%;
height: auto;
float: none;
}
#multiple-right {
width: 100%;
height: auto;
float: none;
}
}
I encountered a problem while I tried to add an image to my blog. I was trying to put my image as a background and it did not work. How do I solve this.I also want it to cover the entirety of my blog's body.
{% extends 'base.html' %}
{% block content %}
<style>
body {
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
<h1>Posts</h1>
<ul>
{% for post in object_list %}
<li>{{post.title}} - {{post.author.first_name}} {{post.author.last_name}} -
{{ post.post_date }} <small>
{% if user.is_authenticated %}
- (Edit)
(Delete)
{% endif %}
</small><br/>
{{post.body|slice:":200" }}</li>
{% endfor %}
</ul>
{% endblock %}
In your background image url you mistakenly pasted the img tag url alongside the class and alt attribute just replace
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg" alt="A blog" class="main-img');
with this
background-image: url('https://media.vanguardcommunications.net/blog-e1505840253663.jpg');
You can use these styles
body {
background-image: url('https://media.vanguardcommunications.net/bloge1505840253663.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
width: 100%;
}
I´m trying to add a kind of animation to some images in my Django app, what I want to do is that when the user moves the mouse around the image it gets bigger.
I tried adding some code in my CSS but the image won't change
Thank you for your help.
My index.html
{%block contenido %}
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 1 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 2 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
<div id="container" class="foto_pelicula">
{% for p in peliculas %}
{% if p.genero.id == 3 %}
<img src={{p.urlPortada}} width="289" height="289"/></li>
{% endif %}
{% endfor %}
</div>
{% endblock %}
The Images SRCs are urls that I take from the internet, I guess it does not really matter whether they are taken from the internet or stored in your proyect.
my CSS
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
I added this new lines to my CSS but the image won't change.
.foto_pelicula > img:hover {
transform: scale(1.1);
}
Maybe I'm not using the proper lines in the CSS as I'm a junior programmer.
Help is much appreciated
This question has no connection to Django. In future try to create working html template for your purposes and then add it to django template.
You setup .foto_pelicula > img:hover to transform image. But > selector finds only direct child. See documentation on selectors.
And in your code direct child is a, but not img. Therefore you don't see result. You can change your css rule to .foto_pelicula > a > img:hover
See demo:
#container{
width: 290px;
overflow: hidden;
margin: 5px 4px 0 auto;
padding: 0;
background: #222; /* FONDO DEL RECTANGULO CONTENEDOR */
border: 3px solid #8E1600;
float: left;
}
.foto_pelicula > a > img:hover {
transform: scale(1.1);
}
<div id="container" class="foto_pelicula">
<img src="https://via.placeholder.com/289" width="289" height="289"/>
</div>
IMPORTANT
In your html code I see several divs with id="container". You can setup only one id with certain name to each page. That's why it called identifier.
So change your ids to classes or give different id names for this divs.
I'm creating a django form and I can't seem to access each field's widget to style it differently when there's an error or when the field is required (eg: highlight the field's box).
HTML:
{% block content %}
<form action="" method="POST" class="form"> {% csrf_token %}
{% for field in form %}
<div class="fields-container">
<p class="label">{{ field.label }}</p>
{{ field }}
</div>
{{ field.errors }}
{% endfor %}
<button type="submit" id="form-button">Submit</button>
</form>
{% endblock %}
CSS:
.label {
margin: 0 5px 0 0;
width: 20%;
text-align: left;
}
#id_full_name, #id_email, #id_message {
margin: 0;
flex: 1 1;
}
#id_message {
resize: none;
overflow: auto;
}
.errorlist { /*default css class for form errors*/
color: 999999;
font-size: 75%;
font-weight: bold;
list-style: none;
margin-bottom: 5px;
align-self: flex-start;
}
I've been accessing and styling the widgets using #id_fieldname, but I've tried the following and it didn't work:
#id_fieldname.required, id_fieldname.error { border: 2px solid red; }
Thanks in advance!
You could add a class 'required' in your container <div>:
<div class="fields-container {% if field.field.required %}required{% endif %}">
Using django form methods form.as_p, form.as_ul, form.as_table, this would be done automatically if you declare a specific css class for required fields in your Form, for example:
class myForm(forms.Form):
required_css_class = 'required'
...
More in documentation
how do you add :target {opacity: 1} onto the href"#pop{{user.user_id}}" below?
the user_id is unknown until the page generates
The for loop as follows;
{% for user in pull %}
Link: {{user.user_name}} {{ user.user_id }}
<div style="opacity:0" id="pop{{user.user_id}}">
{{ user.info }}
</div>
{% endfor %}
Which looks like this after its translated onto a web page from Django.
Link: tom 10
<div style="opacity:0" id="pop10">
this is my info
</div>
Link: ann 8
<div style="opacity:0" id="pop8">
i am an apple
</div>
Link: mike 3
<div style="opacity:0" id="pop3">
i like pears
</div>
if the styles for all of them are same then you can add a class in the loop for each div and anchor and then add style to these anchors and divs which have this added class. If you want different styles for these divs and anchors then you need to have the id's .Hope it helps
{% for user in pull %}
<a class="styled_class" href="#pop{{user.user_id}}">Link: {{user.user_name}} {{ user.user_id }}</a>
<div class="styled_div" style="opacity:0" id="pop{{user.user_id}}">
{{ user.info }}
</div>
{% endfor %}
Okay, after a lot of thinking i figured it out by myself, all you need to do is make a style tag in the same template which is encased in the same for loop to generate the individual unique css Ids pointing to each div
<style type="text/css">
{% for i in pull %}
#pop{{i.user_id}}:target {
opacity: 1;
z-index: 1;
}
#pop{{i.user_id}} {
width: 58.8em;
min-height: 10em;
background: none repeat scroll 0% 0% #FFA500;
top: 9em;
border-radius: 16px;
opacity: 0;
position: absolute;
z-index: -1;
transition: opacity 1s ease 0s, z-index 1s cubic-bezier(0, 1, 1, 0) 0s;
max-height: 34em;
padding: 1em;
margin-left: 1em;
}
#pop_close{{i.user_id}}:target {
opacity: 0;
z-index: -1;
}
{% endfor %}
</style>