as you can see my list aligns some kind randomly and i dnot know why. Any ideas?
html:
{% if shop_name %}
<ol>
{% for library in shop_name %}
<li>Video Library Info</li>
<ul>
<li>Name : {{library.shop_name}}</li>
<li>Adress : {{library.adress}}</li>
{% comment %} <button id="btn_goto" onclick="">Select</button> {% endcomment %}
</ul>
{% endfor %}
</ol>
{% else %}
<p>ERROR</p>
{% endif %}
css code:
body {
text-align: center;
color: #FFA000;
background-color: #911E42;
}
ol {
display: table;
text-align: left;
margin: 0 auto;
margin-bottom: 20px;
}
ul {
display: table;
margin: 0 auto;
vertical-align: baseline;
text-align: left;
}
so at css i typed that text in list should be aligned on left side but still it does'nt help and it aligns randomly as i think. The thing i need to perfom is to align every li from ul on left side
Deleting display: table; might make your life easier and if that does not work. Try using display: flex on the parent and using justify-content: center; and align-items: center; to have it in the middle
Delete the display: table from the ul selector and everything should be properly aligned.
Related
I have Html local site which includes two DataFrame, I need both to look different. I could use CSS or classes to format only one table but I don't know how to use it on a DataFrame object.
Right now my code looks something like this:
html = f'''
<!DOCTYPE html>
<html lang ="pl">
<head>
<title>some title</title>
</head>
<style>
table {{
width: 30%;
text-align: center;
border-collapse: collapse;
margin-left: 30px;
}}
table td, table th {{
border: 1px solid #EEEEEE;
padding: 5px 15px;
}}
tablek tbody td {{
font-size: 13px;
}}
table thead th {{
font-size: 15px;
font-weight: bold;
text-align: left;
}}
table tfoot td {{
font-size: 14px;
}}
</style>
<body>
some text.......
{DF.to_html()}
some text.......
{DF2.to_html()}
</body>
</html>
'''
This formatting for a table using styles works fine but formats all tables. I need the other one to look different. How to do this? Thanks for all your help
use
<div id="div1">{df.to_html}</div>
<div id="div2">{df2.to_html}</div>
and use these selectors
#div1 table
#div2 table
I am working on a web app and I am using Bulma for first-time, I don't know why but I am getting a very unexpected bugs, that is, my background color i.e black doesn't seem to be appear onto the page.
here is my CSS code:
{% extends 'base.html' %}
{% block title %}
Home Page
{% endblock title %}
<style>
body{
background-color: black;
}
</style>
{% block content %}
{% endblock content %}
in base.html from which I have extended this page, there too I have wrote this following css:
<style>
body{
background-color: black;
color: white;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
</style>
Please help me with this, Thanks in advance~
EDIT:
I found out that whenever I put any kind of content in the block content section the background color gets painted. I mean let's say I put <h1> Hi </h1> inside the block content, then the background would get painted behind it.
I found out the answer
Just put this in your css (over the whole body)
width: 100vw;
min-height: 100vh;
I have a loop that fills the page with pictures but they do so vertically.
{% for i in range(amount) %}
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img src="/static/assets/img/uploaded/coro.png" />
</div>
</div>
</div>
{% endfor %}
</div>
How do i make it so that the pictures fill the entire page in a grid?
Your images are lining up in a column because all your <img> tags are under a parent column. And the reason why the right side part is empty and the single image is not covering the entire width is due to the size of the image.
To answer your question on how to make an image grid covering the entire width, my idea will be to contain all the images inside a div and use n columns
<div class="images">
{% for i in range(amount) %}
<img src="/static/assets/img/uploaded/coro.png" />
{% endfor %}
</div>
and the CSS will be
.images {
/* Prevent vertical gaps */
line-height: 0;
column-count: 5; /* this depends on size, no.of images and viewport(for making it responsive) */
column-gap: 0px;
}
.images img {
width: 100% !important;
height: auto !important;
padding: 3px;
}
the cards goes horizontally i want it to go down vertically when the card goes off screen.
This is a project of django so im looping over a div but the card is going off the screen horizontally i want it to go vertically when the card goes off the screen.
PYTHON CODE [HTML]
`
<div class="container">
{% for project in projects %}
<div class="items">
<h2>{{project}}</h2>
<div class="purl">
<p>{{project.description}}</p>
</div>
<div class="purl1">
<a href='{{project.url}}'>{{project.url}}</a>
</div>
<div class='buttons'>
<a class='btn' href='{% url "update" project.id %}'>Edit</a>
<a style='background-color:#f25042' class='btn' href='{% url "delete" project.id %}'>Delete</a>
</div>
</div>
{% endfor %}
</div>
`
CSS
`
.container{
display:flex;
}
.purl{
text-overflow: hidden;
padding-right:.1em;
}
.purl1{
max-width:20em;
margin-right:14px;
}
.items{
border-radius: 8px;
padding:1em 1.5em .5em 1.4em;
box-shadow: 0px 0px 17px 0px black;
margin:5% 1em 2em .5em;
width:100%;
}
.items h2{
color:#fffffe;
}
.items p{
color:#94a1b2;
}
a{
text-decoration: none;
color:#7f5af0;
}
a:hover{
text-decoration: none;
color:#fffffe;
}
.buttons{
display:flex;
}
.btn{
float:left;
text-align: center;
font-size:17px;
font-weight:bold;
padding:.5em;
margin:2em 1em .5em 1em ;
width:3.5em;
border:none;
border-radius: 8px;
background-color: #2cb67d;
color:#fffffe;
font-family: 'Noto Sans', sans-serif;
}
.btn:hover{
background-color: #3dd696;
cursor: pointer;
}
#media only screen and (max-width: 800px) {
.container{
margin-left:10%;
display:block;
}
.items{
width:60%;
}
}
`
this is the html and css of the code.
I'm looping over html by python [ django ]
so i want to make cards responsive
It is very simple, just use flex-wrap: wrap; to make the flexible items wrap if necessary:
Please add flex-wrap style to your container element in your CSS:
.container{
display:flex;
flex-wrap: wrap;
}
This has nothing to do with Django or Python, you will be able to achieve that only in CSS, whatever the backend is.
You should use CSS flexbox layout, even in your CSS media queries, by keeping your display:flex whatever the media query.
Then use different flex-direction property in CSS depending on your media query / device, in order to order the inside elements horizontally or vertically.
More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have code like this.
...
<p style="font-size: 1.3rem; margin-top: 1.5rem; border: solid 1px #eaeaea; padding: 2rem; background-color: #efefff;">
{{ object.content|safe}}
</p>
...
I expected it would set style on object.content. But what I got is the content went below styled tag <p> not inside it. Because object.content also has its tag <p>.
So how do I set style using safe filter?
Wrap the paragraph tag with 'div' tag. Provide the font changes on that 'div' tag.
<div class="safe" style="font-size: 1.3rem; margin-top: 1.5rem; border: solid 1px #eaeaea; padding: 2rem; background-color: #efefff;">
<p>
{{ object.content|safe}}
</p>
</div>
This Will Work