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
Related
Is it possible to extract the embedded css properties from an html tag? For instance, suppose I want to find out what the vertical-align attribute for "s5" is.
I'm currently using beautifulsoup and have retrieved the span-tag with tag=soup.find(class_="s5"). I've tried tag.attrs["class"] but that just gives me s5, with no way to link it to the embedded style. Is it possible to do this in python? Every question of this sort that I've found involves parsing inline css styles.
<html>
<head>
<style type="text/css">
* {margin:0; padding:0; text-indent:0; }
.s5 {color: #000; font-family:Verdana, sans-serif;
font-style: normal; font-weight: normal;
text-decoration: none; font-size: 17.5pt;
vertical-align: 10pt;}
</style>
</head>
<body>
<p class="s1" style="padding-left: 7pt; text-indent: 0pt; text-align:left;">
This is a sample sentence. <span class="s5"> 1</span>
</p>
</body>
</html>
You can use a css parser like [cssutils][1]. I don't know if there is a function in the package itself to do something like this (can someone comment regarding this?), but i made a custom function to get it.
from bs4 import BeautifulSoup
import cssutils
html='''
<html>
<head>
<style type="text/css">
* {margin:0; padding:0; text-indent:0; }
.s5 {color: #000; font-family:Verdana, sans-serif;
font-style: normal; font-weight: normal;
text-decoration: none; font-size: 17.5pt;
vertical-align: 10pt;}
</style>
</head>
<body>
<p class="s1" style="padding-left: 7pt; text-indent: 0pt; text-align:left;">
This is a sample sentence. <span class="s5"> 1</span>
</p>
</body>
</html>
'''
def get_property(class_name,property_name):
for rule in sheet:
if rule.selectorText=='.'+class_name:
for property in rule.style:
if property.name==property_name:
return property.value
soup=BeautifulSoup(html,'html.parser')
sheet=cssutils.parseString(soup.find('style').text)
vl=get_property('s5','vertical-align')
print(vl)
Output
10pt
This is not perfect but maybe you can improve upon it.
[1]: https://pypi.org/project/cssutils/
To improve upon the cssutils answer:
For an inline style="..." tag:
import cssutils
# get the style from beautiful soup, like:
# style = tag['style']
style = "color: hotpink; background-color:#ff0000; visibility:hidden"
parsed_style = cssutils.parseStyle(style)
Now use parsed_style like you would an dict:
print(parsed_style['color']) # hotpink
print(parsed_style['background-color']) # f00
print(parsed_style['visibility']) # hidden
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 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
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"}))