Develop Reference

How to place two smaller buttons beneath a bigger button - html, css

I have been trying to make a website from scratch using the django framework in Python. I am trying to make a split screen landing page and on each side, I want three buttons: Read More, Sign up, Log in.
I want the "sign up" button and "log in" button to be underneath the bigger "read more" button, but I have been unsuccessful for many hours. I am very much a beginner in web development so please forgive me for any silly errors.
Code for buttons "Read more" and "Sign up"(so far):
.button {
display: block;
position: relative;
left: 50%;
top: 40%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
<div class="container">
<div class="split left d-flex justify-content-center align-items-center">
<h1> The Business </h1>
Read More
<div class="Buttons">
<div class="SignUp">
Sign up
</div>
</div>
</div>
<div class="split right d-flex justify-content-center align-items-center">
<h1> The Artist </h1>
Read More
</div>
</div>
This is the way the sign up and read more buttons are currently showing on one side of my split screen (I have not done the other side yet
EDIT: This is the way I want my buttons to look

Well I edited a bit on your CSS for the buttons and your HTML structure for <div class="Buttons">. That way all 3 buttons are inside the same wrapper and will be displayed like your image suggest.
I changed the block type to inline-block. Certainly there are other ways, but this works without to much switching on your code.
I also deleted your positioning and transform as they are not needed.
Next I swapped your link class buttons to an unique class name for the different buttons. I adress the styling through its parent and use the class name to style the width.
Last but not least, I added margins to get some spacings between the buttons.
h1 {
text-align: center;
}
.Buttons {
text-align: center;
}
.Buttons a {
display: inline-block;
height: 2.5rem;
padding-top: 1.3rem;
text-align: center;
color: black;
border: black solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
.readMore {
width: 30rem;
margin-bottom: 10px;
}
.signUp,
.logIn {
width: calc(15rem - 10px);
}
.signUp {
margin-right: 10px;
}
<div class="container">
<div class="split left d-flex justify-content-center align-items-center">
<h1> The Business </h1>
<div class="Buttons">
Read More
Sign up
Log in
</div>
</div>
<div class="split right d-flex justify-content-center align-items-center">
<h1> The Artist </h1>
<div class="Buttons">
Read More
</div>
</div>
</div>

I dont think that you need all that positions. The only thing you need is sizes of the buttons. The Read More button should be given a bigger size and the other buttons should be given smaller sizes. Then you can apply margin-left: auto and margin-right: auto to place the buttons in center.

Corey Schafer Django (Part 3): HTML not formatting right

So I'm going through Corey Schafer's Django series, and I'm at the part where he is building the HTML template for the website and for some reason it isn't formatting correctly. I downloaded his repository and re-ran his code and still got the same error? The only difference that I can think of is that he is using Django 2.1 and I'm using Django 3.0 but that shouldn't be it.
Here is how it looks:
Here is how it should look:
And lastly this is his Github for the link: https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog/03-Templates
Edit: Got it working. You have to do four steps:
(1) Delete integrity and crossorigin from this line in the base.html (line 11)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
To get this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
(2) Update your static/blog/main.css with this code:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
ul {
margin: 0;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
(3) Update your templates/blog/home.html with this code:
{% extends "blog/base.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content %}
(4) Close your server, and clear your browser from everything (cookies included)

Solution: A small change in your "main.css" file, add !important at the
end of color hash as:
.bg-steel {
background-color: #5f788a!important;
}
=========================================================
Explanation:
You will have to understand the concept of overriding of CSS.
If a component is loading with "!important" in the parent CSS such as:
background-color: #5f788a!important;
instead of just:
background-color: #5f788a;
In such cases, you will not be able to override it in your custom/child CSS because !important declares it important and can't be overridden directly.
However, you can still override it in the custom CSS by applying !important at the end of the value of the component just the way I did above.
====================================================
You may be confused about Why did it work in Corey's CSS ?
Answer: The version of bootstrap Corey used in the tutorial was not rendering the background-color with the term !important at the end and hence he was able to override it directly. But nowadays, bootstrap color classes render with background-color: #5f788a!important; and hence can't be overridden directly.
Hope I could help you out.
Thanks
akaroshaa#gmail.com

Right now I'm fully suspecting something is wrong with your custom css.
First reason: bg-steel is not a default color, so you need to write it somewhere else. However, even with the line below, the navbar didn't show up.
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
Second reason: for a division to have a border, header, and content with margins applied, you either use a default card class or you implement one on your own -- found in this line, which also didn't work.
<article class="media content-section">
Third reason: obvious enough, the background colors are different. In your code, it's pure white, which is what bootstrap's default comes with. If the custom sheet is applied, the background color will then look darker.
Here's what I'll suggest you do:
Go to your HTML or settings.py (if you used {% load static %}) file and check whether your static or import paths are correct
Go through the video one more time and make sure you have no typos.
As a matter of fact, the javascript files ARE necessary. If you don't include them, things like dropdowns and modals won't work properly.

Python terminal in html?

You can downvote this before you read (Edit:Thank you for understanding) because of the title but other questions just answers how to run python programs in html but what I want to do is use python terminal in html.
So guys there is actually big big question in my head. How exactly can I use python program in html like it is a terminal.
Here is my project, it will be an interactive dictionary that you can study on vocabulary.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial
}
* {
box-sizing: border-box;
}
/* The browser window */
.container {
border: 3px solid #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Container for columns and the top "toolbar" */
.row {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.scriptcontainer {
padding: 10px;
background: #ffffff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.row2 {
padding: 5px;
background: #cc0000;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle {
width: 75%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Three dots */
.dot {
margin-top: 4px;
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
/* Style the input field */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: #666;
padding: 5px;
}
.bar {
width: 17px;
height: 3px;
background-color: #aaa;
margin: 3px 0;
display: block;
}
/* Page content */
.content {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="column middle">
<h4><font size="6" type="Times">VocaDict</font></h4>
</div>
</div>
<div class="content">
<h3>=>Your dictionary:</h3>
<div class="row2"><div class="content"><div class="scriptcontainer"> <script>//This is where your dictionary will go!</script></div></div></div>
</div>
<div class="content">
<h3>=>Study lists:</h3>
<div class="row2"><div class="content"><div class="scriptcontainer"> <script>//This is where your dictionary will go!</script></div></div></div>
</div><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
What I'm asking is about this places:
<div class="content"><div class="scriptcontainer"> <script>//This is the place I want python terminal to be!</script>
I want this places act like a python terminal. When the page loads it will run the program, it will not affect any other thing and act like an independent thing but it will stay on the page and will be interactive.
Is that possible and If it is, how?
Thank you!

What are you trying to do here exactly? If you really want to run python script with HTML then go for CGI. As you can't run python directly you may have to use the below,
http://karrigell.sourceforge.net/en/pythoninsidehtml.html
or
http://www.skulpt.org/
But best way would be to use python-cgi programming https://www.tutorialspoint.com/python/python_cgi_programming.htm

It is impossible.
I had this question myself before. Clearly the intention was make room for other scripts, at least I think this way:
<script type="text/javascript">
<script type="text/python">
It would require a browser that implements this. Maybe this engine: https://www.gnu.org/software/pythonwebkit/

How to Use Splash (JS Rendering Service) with a Proxy

It's configured automatically in Scrapy, but not in Curl or normal request.
In curl, we can do this without any proxy:
http://<server_ip>:8050/render.html?url=http://www.example.com/?timeout=10&wait=0.5
How to do it with proxy?
I tried this:
http://<server_ip>:8050/render.html?url=http://www.example.com/?timeout=10&wait=0.5 --proxy myproxy:port
But I got:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lightspeed Systems - Web Access</title>
<style type="text/css">
html {
background: #13396b; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzMzk2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTY1OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #13396b 0%, #3e6599 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#13396b), color-stop(100%,#3e6599)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #13396b 0%,#3e6599 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #13396b 0%,#3e6599 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #13396b 0%,#3e6599 100%); /* IE10+ */
background: linear-gradient(to bottom, #13396b 0%,#3e6599 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13396b', endColorstr='#3e6599',GradientType=0 ); /* IE6-8 */
height: 100%;
}
body {
width: 960px;
overflow: hidden;
margin: 50px auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
color: #a2c3ef;
}
h1,h2 {
color: #fff;
}
h1 {
font-size: 32px;
font-weight: normal;
}
h2 {
font-size: 24px;
font-weight: lighter;
}
a {
color: #fff;
font-weight: bold;
}
#content {
margin: 20px 0 20px 30px;
}
blockquote#error, blockquote#data {
color: #fff;
font-size: 16px;
}
#footer p {
font-size: 12px;
padding: 7px 12px;
margin-top: 10px;
color: #fff;
text-align: right;
}
</style>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body id=ERR_ACCESS_DENIED>
<div id="titles">
<h1>ERROR</h1>
<h2>Unable to complete URL request</h2>
</div>
<hr>
<div id="content">
<p>An error has occurred while trying to access http://<server_ip>:8050/render.html?.</p>
<blockquote id="error">
<p><b>Access denied.</b></p>
</blockquote>
<p>Security permissions are not allowing the request attempt. Please contact your service provider if you feel this is incorrect.</p>
</div>
<hr>
<div id="footer">
</div>
</body>
</html>
C:\Users\Dr. Printer>curl "http://<server_ip>:8050/render.html?url=http://www.example.com/?timeout=30&wait=0.5"
{"description": "Timeout exceeded rendering page", "type": "GlobalTimeoutError", "info": {"timeout": 30.0}, "error": 504}

If we want to use Crawlera as the proxy, we can do it using this lua script
function use_crawlera(splash)
-- Make sure you pass your Crawlera API key in the 'crawlera_user' arg.
-- Have a look at the file spiders/quotes-js.py to see how to do it.
-- Find your Crawlera credentials in https://app.scrapinghub.com/
local user = splash.args.crawlera_user
local host = 'proxy.crawlera.com'
local port = 8010
local session_header = 'X-Crawlera-Session'
local session_id = 'create'
splash:on_request(function (request)
-- The commented code below can be used to speed up the crawling
-- process. They filter requests to undesired domains and useless
-- resources. Uncomment the ones that make sense to your use case
-- and add your own rules.
-- Discard requests to advertising and tracking domains.
if string.find(request.url, 'doubleclick%.net') or
string.find(request.url, 'analytics%.google%.com') then
request.abort()
return
end
-- Avoid using Crawlera for subresources fetching to increase crawling
-- speed. The example below avoids using Crawlera for URLS starting
-- with 'static.' and the ones ending with '.png'.
if string.find(request.url, '://static%.') ~= nil or
string.find(request.url, '%.png$') ~= nil then
return
end
request:set_header('X-Crawlera-Cookies', 'disable')
request:set_header(session_header, session_id)
request:set_proxy{{host, port, username=user, password=''}}
end)
splash:on_response_headers(function (response)
if type(response.headers[session_header]) ~= nil then
session_id = response.headers[session_header]
end
end)
end
function main(splash)
use_crawlera(splash)
splash:init_cookies(splash.args.cookies)
assert(splash:go{{
splash.args.url,
headers=splash.args.headers,
http_method=splash.args.http_method,
}})
assert(splash:wait({0}))
return {{
html = splash:html(),
cookies = splash:get_cookies(),
}}
end
Don't forget to install scrapy-crawlera and activate it in the settings. For more information please refer https://support.scrapinghub.com/support/solutions/articles/22000188428-using-crawlera-with-splash-scrapy

xhtml2pdf child elements show border of parent elements

Hoping someone may have solved this problem. Haven't seen anyone with it on Google.
I'm using xhtml2pdf in Python, trying to generate a simple document with a header, footer and my content is blocks of text with titles. I'd like to have a border around each piece of content but instead I get borders around each child element instead.
Here's my HTML
#page {
size: letter;
border: 0;
#frame header_frame {
-pdf-frame-content: header;
border: 0pt solid white;
left: .75in;
width: 7in;
top: .5in;
height: 1.5in;
}
#frame content_frame {
border: 0pt solid white;
left: .75in;
width: 7in;
top: 1.5in;
height: 7.5in;
}
#frame footer_frame {
-pdf-frame-content: footer;
border: 0pt solid white;
left: .75in;
width: 7in;
top: 9.5in;
height: 1in;
}
}
h1 {
padding-top: 5pt;
}
.desc {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
border: 1px solid blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TEST TEST TEST</title>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="footer">
FOOTER
</div>
<div class="desc">
<div class="title">TITLE OF ARTICLE</div>
<span>TEST 2</span>
<div>TEST 3</div>
<table>
<tr>
<td>Test4</td>
<td>Test 5</td>
</tr>
</table>
</div>
</body>
</html>
I'm just running the xhtml2pdf command line tool at the moment so there's no python to show. One thing I did notice when I run it in debug mode it shows "xhtml = false" even though I have an XHTML DTD. I'm not sure if this would make a difference.
Here's what I see in the browser and roughly what I expect the pdf to look like (ignoring the footer location of course):
Instead I get:
EDIT: I figured out that xhtml is an option to pass but passing it fails unless one has an old version of html5lib installed. Looks like the answer to my question is this library is not being actively maintained and I need to find a new solution :-/