<div class="container-fluid">
<div class="row">
<img class="graph" src="{% static 'images/graph.png' %}"/>
</div>
</div>
Hi. I need to resize the graph.png static image to full width of the screen. But it leaves a blank white space to the left and right margins of the screen. I have used the following CSS for it. The image is resizing to the width of the screen if used in a raw HTML but not in Django. In short, the container-fluid is not doing its job. But other bootstrap classes like grid, buttons and other classes are working very perfectly.
.graph{
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
Try without define height
.graph{
padding: 0;
display: block;
margin: 0 auto;
max-width: 100%;}
Related
my previous code looks like this, but I cannot upload an image. The script breaks off at this point, I already have several options and try unfortunately without success
I work with VS Code on Ubuntu
myvariable1 = browser.find_element_by_xpath("/html/body/div[1]/div[5]/div/div[2]/div/form/ul[9]/div/li[2]/div/div[1]/div/div[2]")
myvariable1.send_keys("/home/username/Schreibtisch/myfolder/1.png")
The html code looks like this ----
<div class="fileuploader fileuploader-theme-dragdrop">
<input
class="gallery_media"
type="file"
name="files[]"
tabindex="-1"
accept="image/*"
multiple="multiple"
style="position: absolute; z-index: -9999; height: 0px; width: 0px; padding: 0px; margin: 0px; line-height: 0; outline: 0px; border: 0px; opacity: 0;"
/>
<div class="fileuploader-input-inner">
<div class="fileuploader-main-icon"></div>
<h3 class="fileuploader-input-caption onDesktop"><span class="onDesktop">Bilder hierher ziehen und ablegen</span></h3>
<p class="onDesktop">oder</p>
<div class="fileuploader-input-button"><span>Datei auswählen</span></div>
</div>
</div>
<div class="fileuploader-items"><ul class="fileuploader-items-list"></ul></div>
myvariable1 = browser.find_element_by_xpath("/html/body/div[1]/div[5]/div/div[2]/div/form/ul[9]/div/li[2]/div/div[1]/div/div[2]/input")
myvariable1.send_keys("C:/home/username/Schreibtisch/myfolder/1.png")
Go down into input otherwise you'll get a Noninteractable exception and then send the absolute file path to your file.
I've been using Python and Flask to host a webpage, which renders data from HTML. The Python code runs well, and is able to load the routes/webpages I'm targeting. However, my HTML page only seems to partially apply the Stylesheet.
However, when I render the page, it only seems to render the styling for the Nav Bar (TopNav class).
I've tried a few things, such as using IDs, creating new classes and adding to a div, using code from W3 to prevent typos, and even creating a new test html document with the same stylesheet. However, I still seem to be having the same issue.
What I'd like the stylesheet to do is provide a background color for the button, display it (along with ~20 total buttons) in a grid-like manner, and use a different background image for each button. I also played with the idea of adding the images using in-line styles, but that didn't help either.
Here's a snippet of the code:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='Styles.css') }}">
</head>
<body>
<div class="topnav">
Home
Standings
Results
<a class="active" href="/teams">Teams</a>
Contact
</div>
<div class="team-buttons">
<button type="button" class="team-button">Text</button>
<button type="button" class="team-button" id='Wolves' >Text</button>
</div>
</body>
</html>
And the CSS
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.team-buttons button {
background-color: #4CAF50;
border: 1px solid green;
color: white;
padding: 10px 24px;
cursor: pointer;
width: 50%;
display: block;
}
.team-buttons button:not(:last-child) {
border-bottom: none;
}
.team-buttons button:hover {
background-color: #3e8e41;
}
.team-button {
background-color: #ef4242;
overflow: hidden;
border: 0;
background-size: 100%;
}
.team-button a {
float: left;
color: #070000;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 15px;
}
#wolves{
background-color: #4CAF50;
background-image: url('https://images.racingpost.com/football/teambadges/2848.png');
cursor:pointer;
border:none;
width:100px;
height:100px;
}
Apologies if I've missed something obvious, but I've been looking through this for a few hours now and still not found what the issue might be. Insight into this would be helpful.
Resolved this.
I think the issue I was running into was that the webpage was pulling data from the cache. As the .topnav had been added earlier, that was loaded into the style sheet, however, the newer classes weren't being added.
Found this by right-clicking and going to View Page Source.
Simple fix for this would be clearing cache, or Ctrl + Shift + R (to force a reload)
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´ve been looking for answers and just lost the sight in all the different ones here.
I am bulding a tool, where you can enter a funding ID (included in papers) and a python code collects different papers from different websites and gives them a score in relevance.
My problem: I built a website with html/css and now I want to use the entered funding ID in one of the forms to pass it on to my python program. I know that i can use action in the form in my html to connect my html file with a different file. I read a lot of things about CGI and servers and Apache, etc. others talked about flask. I just want to find a simple way to exchange information from my html file and my python code and how can I display the information I got from my code in an HTML website?
Thank you!
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Verdana", sans-serif;
}
.header {
padding: 60px;
text-align: center;
background: #0C0040;
color: white;
font-size: 30px;
}
.text_header {
margin-left: 160px;
letter-spacing: 6px;
}
.sub_header {
color: #00BFFF;
letter-spacing: 4px;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #474e5d;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #00BFFF;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
text-align: center;
}
.title{
color: #0C0040
text-align: center;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="header">
<div class="text_header">
<h1>Looking for more?</h1>
<div class="sub_header">
<p>find equally relevant papers from the same funder</p>
</div>
</div>
</div>
<!--- so far only the About Us page is linked --->
<div class="sidenav">
About Us
Services
Contact
</div>
<div class="main">
<div class="title"> <h2>Insert your funding ID here:</h2></div>
<!--- this is the form where the input is put in--->
<div class="input">
<form name="search" action="../Python/example.py" method="post">
<label for="input">enter in correct format:</label>
<input type="text" name="input" id="input">
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
WARNING: This is only for amusement purposes--do not use in production.
Sticking to the Python standard library, here's an example to get you started.
from http.server import BaseHTTPRequestHandler, HTTPServer
class WebServer(BaseHTTPRequestHandler):
def do_POST(self):
content_length = int(self.headers['Content-Length'])
funding_id = bytes.decode(self.rfile.read(content_length)).split('input=')[1]
self.send_response(200)
self.send_header("Content-type", "text/html")
self.end_headers()
self.wfile.write(bytes(f'<html><head><title>Funding ID Form Submit</title></head><body><p><b>Funding ID:</b> {funding_id}</p></body></html>', "utf-8"))
ws = HTTPServer(('localhost', 8080), WebServer)
ws.serve_forever()
You will need to change the action attribute of your HTML <form> to action="http://localhost:8080/" to see this in action.
Similarly, you can serve normal page requests by implementing the do_GET method for the WebServer class.
As already stated, this is for amusement/learning purposes. If you're putting something into production, look into learning something like Flask or Django
I've the following code in my webpage (Python/Django framework) to enable a video to play in the background.
HTML
<div class="video-container">
<div class="video-container-bg">
<video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">
<source src="{{page.video.url}}" type="video/mp4">
<source src="{{page.mac_video.url}}" type="video/webm">
</video>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="animation-element bounce-up">
<h1 class="page-title">{{page.page_title}}</h1>
<p class="strapeline">{{page.strapline}}</p>
<a class="butt" href="#about-us">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
video#bgvid {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height:100%;
overflow: hidden !important;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url() no-repeat;
background-size: 100%;
}
.video-container {
min-height: calc(100vh - 75px);
overflow: hidden !important;
position: relative;
}
.video-container-bg {
padding-top: 25vh;
color: #fff;
}
It works fine on everything except Safari where nothing plays. Why not? Is it something Apple have set to prevent? In fact, when I run Safari on Windows it's telling me it cannot play HTML5 video. Is that right?
I've solved this by saving the mp4 files in a lossless state. It now seems to work. I have no idea why