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)
Related
I am trying to build a web-app which extracts and inputs information about different city buildings using Python, Flask and HTML. At the moment I want to create a button which after clicking it will give me a list of all the buildings available on the database. The database is populated and stored in PostgreSQL. The problem is that the button is created and displayed but the list is not. I used the second answer on this link as a reference.
My Python code looks like as follows :
app = flask.Flask(__name__)
#app.route('/')
def home():
return flask.render_template('interface.html')
#app.route('/GetBuildingsLists', methods = ['GET','POST'])
def GetBuildingsLists():
print('Connecting to the PostgreSQL database...')
db = pg.connect(
host="****",
database="****",
user ="****",
password="*****")
db_cursor = db.cursor()
print('PostgreSQL database version:')
db_cursor.execute('SELECT version()')
q = ("SELECT building_id FROM table1")
db_cursor.execute(q)
buildings = db_cursor.fetchall()
unique_buildings = list(dict.fromkeys(buildings))
db_cursor.close()
#print(unique_buildings)
return flask.render_template('interfaceLists.html', unique_buildings = unique_buildings)
if __name__ == '__main__':
app.run()
Meanwhile, on a template folder I have interfaceLists.html as below :
<html>
<head>
<title>Results</title>
<style>
.links-unordered {
display: inline-block;
position: relative;
}
.links-unordered {
margin-top: 20px;
min-height: 30px;
}
.links-unordered .toggle-button {
text-decoration: none;
padding: 12px 16px 12px 16px;
transition: 0.2s;
border: 1px solid black;
}
.links-unordered .toggle-button:hover,
.links-unordered .toggle-button:active,
.links-unordered .toggle-button:focus,
.links-unordered .toggle-button:visited {
text-decoration: none;
color: black;
}
.links-unordered .toggle-button:hover {
border-width: 2px;
}
.links-unordered ul {
position: absolute;
top: 10px;
margin-top: 25px;
padding-inline-start: 20px;
}
.links-unordered ul li {
line-height: 25px;
padding-left: 15px;
}
.links-unordered a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="demo_script_src.js"></script>
<div class="links-unordered">
<a class="toggle-button" href="#">Buildings</a>
{% for building in unique_buildings %}
<ul style="display:none;">
<li>building[0]</li>
</ul>
{% endfor %}
</div>
</body>
</html>
I take the results from the PostgreSQL using a query in the python code and store them in the list called unique_buildings. I have tried to display afterwards the results as an unordered list but the list is not displayed.
The .js file mention in the HTML file performs the animation while using the button and it looks like this :
$(document).ready(function() {
$(".toggle-button").click(function() {
$(this).parent().find("ul").slideToggle(function() {
// Animation complete.
});
});
})
Can someone please help me by telling what might be wrong with my script and why what I want is not working? Thank you!!
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
Essentially, my style.css file is only partially rendering on the live server, despite working properly in my local development environment. Prior to this update I just pushed, things were working fine - I changed some content in the .css file, but not the content that is being affected by this issue.
The parts of the CSS file that seem to be affected:
table.student {
width: 75%;
border: 3px inset;
margin-left: auto;
margin-right: auto;
}
table.admin {
width: 50%;
border: 3px inset;
margin-left: auto;
margin-right: auto;
}
h1{
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 30px;
padding: 1%;
text-align: center;
}
The rest of the .css file is being applied just fine.
I didn't change the file location (myapp/static/css/style.css), or how/where the file is called (in my base.html file with the line <link rel="stylesheet" href="{% static 'css/style.css' %}">).
I have run collectstatic with no discernible effect. The python version I am using is 3.7.2
It seems to have righted itself with no further editing/investigation - possibly a caching issue.
I want to dynamically create an html code block but I'm not sure how to assign this into a variable:
<head>
<style>
body {
border-style: solid;
border-width: 5px;
border-color: green;
border-radius: 5px;
border-spacing: 30px;
background-color: #FFFFC2;
padding-bottom: 5px;
font-size: 25px;
}
li {
color: #F7270F;
font-weight: bold;
}
</style>
</head>
<body>
<div style="margin-bottom: 5px; margin-top: 5px; margin-left: 10px; margin-right: 10px;">
<h1 align="center">Auctions for Week of 08-01-2018</h1>
<p>You are bidding on the following item:</p>
<ul><li>This is the item for sale</li></ul>
<p>Condition is pack fresh unless otherwise indicated. Please review the pictures carefully and if you have any questions about something specific, ask.</p>
<p><b>Shipping:</b> Shipping will be calculated based on buyer location. No premiums are charged. Cards are mailed in an 8x5 bubble mailer and shipped First Class mail unless the price exceeds $50, at which point they will be shipped Priority at no additional cost to the buyer. If you win multiple auctions, please wait for an invoice to be sent.</p>
</div>
</body>
I've tried executing:
html_desc="<code_block>"
but it doesn't like the way that works... so I'm a bit stumped. The reason I'm trying to put this into a variable is because I need to make this a key value for a JSON statement.
You can put that code block inside triple quotes """ (I put the variable inside json.dumps, just for example):
from pprint import pprint
import json
html_desc = """<head>
<style>
body {
border-style: solid;
border-width: 5px;
border-color: green;
border-radius: 5px;
border-spacing: 30px;
background-color: #FFFFC2;
padding-bottom: 5px;
font-size: 25px;
}
li {
color: #F7270F;
font-weight: bold;
}
</style>
</head>
<body>
<div style="margin-bottom: 5px; margin-top: 5px; margin-left: 10px; margin-right: 10px;">
<h1 align="center">Auctions for Week of 08-01-2018</h1>
<p>You are bidding on the following item:</p>
<ul><li>This is the item for sale</li></ul>
<p>Condition is pack fresh unless otherwise indicated. Please review the pictures carefully and if you have any questions about something specific, ask.</p>
<p><b>Shipping:</b> Shipping will be calculated based on buyer location. No premiums are charged. Cards are mailed in an 8x5 bubble mailer and shipped First Class mail unless the price exceeds $50, at which point they will be shipped Priority at no additional cost to the buyer. If you win multiple auctions, please wait for an invoice to be sent.</p>
</div>
</body>"""
pprint(json.dumps({html_desc: "Some Value"}))