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.
Related
I'm trying to create my own website on Django, but some problems stop me and I can't solve them myself.
I want to create a sidebar. I found a website with css and HTML code for it.
style.css:
#import url('https://fonts.googleapis.com/css?family=Montserrat:600|Open+Sans:600&display=swap');
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar{
position: fixed;
width: 240px;
left: -240px;
height: 100%;
background: #1e1e1e;
transition: all .5s ease;
}
.sidebar header{
font-size: 28px;
color: white;
line-height: 70px;
text-align: center;
background: #1b1b1b;
user-select: none;
font-family: 'Montserrat', sans-serif;
}
.sidebar a{
display: block;
height: 65px;
width: 100%;
color: white;
line-height: 65px;
padding-left: 30px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
border-left: 5px solid transparent;
font-family: 'Open Sans', sans-serif;
transition: all .5s ease;
}
a.active,a:hover{
border-left: 5px solid #b93632;
color: #b93632;
}
.sidebar a i{
font-size: 23px;
margin-right: 16px;
}
.sidebar a span{
letter-spacing: 1px;
text-transform: uppercase;
}
#check{
display: none;
}
label #btn,label #cancel{
position: absolute;
cursor: pointer;
color: white;
border-radius: 5px;
border: 1px solid #262626;
margin: 15px 30px;
font-size: 29px;
background: #262626;
height: 45px;
width: 45px;
text-align: center;
line-height: 45px;
transition: all .5s ease;
}
label #cancel{
opacity: 0;
visibility: hidden;
}
#check:checked ~ .sidebar{
left: 0;
}
#check:checked ~ label #btn{
margin-left: 245px;
opacity: 0;
visibility: hidden;
}
#check:checked ~ label #cancel{
margin-left: 245px;
opacity: 1;
visibility: visible;
}
#media(max-width : 860px){
.sidebar{
height: auto;
width: 70px;
left: 0;
margin: 100px 0;
}
header,#btn,#cancel{
display: none;
}
span{
position: absolute;
margin-left: 23px;
opacity: 0;
visibility: hidden;
}
.sidebar a{
height: 60px;
}
.sidebar a i{
margin-left: -10px;
}
a:hover {
width: 200px;
background: inherit;
}
.sidebar a:hover span{
opacity: 1;
visibility: visible;
}
}
sidebar.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Sidebar Menu</title>
<link rel="stylesheet" href='style.css'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Menu</header>
<a href="#" class="active">
<i class="fas fa-qrcode"></i>
<span>Dashboard</span>
</a>
<a href="#">
<i class="fas fa-link"></i>
<span>Shortcuts</span>
</a>
<a href="#">
<i class="fas fa-stream"></i>
<span>Overview</span>
</a>
<a href="#">
<i class="fas fa-calendar"></i>
<span>Events</span>
</a>
<a href="#">
<i class="far fa-question-circle"></i>
<span>About</span>
</a>
<a href="#">
<i class="fas fa-sliders-h"></i>
<span>Services</span>
</a>
<a href="#">
<i class="far fa-envelope"></i>
<span>Contact</span>
</a>
</div>
</body>
</html>
All of these works if I start it in any snippet, or if I just run sidebar.html from pycharm in google, but when I start my site it doesn't work and gives an error: Not Found: /style.css/
Both files are on the same directory.
Easy fix, but you will need to dig into Django a bit more.
First, this tag <link rel="stylesheet" href=style.css/> will never work. The tag is written wrong on a few levels. The big problem is that the location is relative, the use of style.css is assumed to be on the same directory level as what ever page/script/etc is being called. The problem is that wsgi.py or similar file is actually the "root" that is "running" the site and has no idea where "style.css" exists and also deos not care.
Styles, image, js, etc are all stored as static assets in Django. This folder is "served" using a static tag that will transform to the correct path per your configuration for local dev and production. Take a look here: https://docs.djangoproject.com/en/3.1/howto/static-files/
I will not explain all the nuance, the Django site does a better job. Instead I will point out how Django is different from static sites or something like PHP. Django is an application running in the CGI (WSGI), there is only one "route" on the server so to speak, all data is served from this one file. PHP can and typically does serve data in a file+directory manner. In PHP/static scenario the location of files is stable compared to Django. In Django the page, url, and the way data is served all come from one point. That means the relationship to static files will be different and not something you can or should control.
Django does not want you to ever serve static files through the CGI (WSGI), that is a waste of CPU and resources and is slow for static. So they have a static system. When running locally with the configuration set up correctly and DEBUG=True then the static keyword will transform to the necessary local path in conjunction with your configuration.
When in production it is assumed that a CDN is used, in that case the static keyword is replaced with the path (URL) to the CDN static files.
The approach Django uses is much more mature than say, Wordpress where use of a CDN can be tricky (I have written custom CDNs for WP many times, not fun).
Walk through the link above, set up your configuration correctly and follow the rules. Django is very interested in your following of the rules, Deviation will only cause pain. I have been primarily a Django dev for almost 10 years now. The problem you ran into got me real good in the beginning, but now CDN and static file management is second nature and definitely more productive than other less mature systems.
Set static root on your 'settings.py'.
You're gonna want to change <link rel="stylesheet" href=style.css/> to <link rel="stylesheet" href="style.css"/>. Also, the path it is trying to find your style.css file in is like this: (whatever path to your sidebar.html)/sidebar.html/style.css. I doubt that it is located there. If it is located in the same directory as your sidebar.html file, try <link rel="stylesheet" href="./style.css"/>
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.
I am developing an application with a few components that are scrollable horizontally. I've come across some unwanted behaviour where the horizontal scrollbar does not disappear leaving an ugly long white scrollbar.
My 'show scroll bars' setting on MacOS is set to 'Automatically based on mouse or trackpad'. My chrome is Version 72.0.3626.121 (Official Build) (64-bit).
The issue can be reproduced in the snippet below.
#horizontal {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
border: 2px solid purple;
display: flex;
}
#vertical {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
flex-direction: column;
border: 2px solid purple;
display: flex;
}
.horizontal-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: pink;
display: flex;
}
.vertical-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: red;
display: flex;
}
<div id="horizontal">
<div class="horizontal-item">1</div>
<div class="horizontal-item">2</div>
<div class="horizontal-item">3</div>
<div class="horizontal-item">4</div>
<div class="horizontal-item">5</div>
<div class="horizontal-item">6</div>
<div class="horizontal-item">7</div>
<div class="horizontal-item">8</div>
<div class="horizontal-item">9</div>
<div class="horizontal-item">10</div>
<div class="horizontal-item">11</div>
<div class="horizontal-item">12</div>
<div class="horizontal-item">13</div>
<div class="horizontal-item">14</div>
<div class="horizontal-item">15</div>
<div class="horizontal-item">16</div>
<div class="horizontal-item">17</div>
<div class="horizontal-item">18</div>
<div class="horizontal-item">19</div>
<div class="horizontal-item">20</div>
</div>
<div id="vertical">
<div class="vertical-item">1</div>
<div class="vertical-item">2</div>
<div class="vertical-item">3</div>
<div class="vertical-item">4</div>
<div class="vertical-item">5</div>
<div class="vertical-item">6</div>
<div class="vertical-item">7</div>
<div class="vertical-item">8</div>
<div class="vertical-item">9</div>
<div class="vertical-item">10</div>
<div class="vertical-item">11</div>
<div class="vertical-item">12</div>
<div class="vertical-item">13</div>
<div class="vertical-item">14</div>
<div class="vertical-item">15</div>
<div class="vertical-item">16</div>
<div class="vertical-item">17</div>
<div class="vertical-item">18</div>
<div class="vertical-item">19</div>
<div class="vertical-item">20</div>
</div>
The problem occurs when you hover over the bottom of the horizontal scrollable area (so where the scrollbar will appear, the purple bottom of the container with pink squares). The scrollbar will appear and never leave again. The same does not happen with the vertical scrollable area, where the scrollbar also appears but does disappear. If you scroll the scrollbar before hovering over the bottom then afterwards said problem won't occur if you hover over where the scrollbar would appear.
In the image below I hovered over the bottom of the horizontal scrollable area and it shows the scrollbar is there (and it does not leave afterwards!).
This problem infact also occurs when I hover over the horizontal scrollbar from a stackoverflow code block, making text hardly readable.
Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text
It will look like this and the scrollbar wont disappear anymore much like in my own case:
I'm assuming this is a bug in Chrome with MacOS but I was hoping there may be some CSS tricks I can do to solve this problem.
This is Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36
Many people are adding white space of scrollbar size (25px) to prevent scrollbar from obscuring content.
It is workaround and can be considered only as a temporary solution though.
From the ticket, they give a workaround until the issue is fixed:
Go into your System Preferences > General
Select Always:
We have been having this issue in our Macs with same OS version, same chrome versions. The final conclusions we got are the following:
the ones using the Apple Original mouse and trackpad are able to see all normal.
When we connect to the same computer one standard USB mouse, after reload the web we suddenly got the annoying scrollbars.
It was tested and same happened in 3 different MacBook Pro.
I upload a video here what happens when I plug out and in: https://youtu.be/AGTF2Ltuxnk
EDIT
Our custom solution was prevent default scroll bars and set up our own scroll bars that will only be displayed when neededneeded.
::-webkit-scrollbar-track {
display: none;
border-color: transparent;
background-color:transparent;
}
::-webkit-scrollbar * {
background:transparent;
}
::-webkit-scrollbar {
width:rem(7);
min-width:rem(7);
height:rem(7);
min-height:rem(7);
}
::-webkit-scrollbar-corner {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
border-radius:rem(10);
background-color:#666;
-webkit-box-shadow: inset 0 0 0 ;
}
I am able to click on the drop down heading but not able to click on the options. Also I am not able to identify the 'id' or xpath for options which is visible after clicking the dropdown option.
Find the HTML below:
<div id="object260310" style="position: absolute; overflow: hidden; background: transparent; z-index: 50; left: 154px; top: 5px; width: 74px; height: 20px;">
<div id="object351" style="position: absolute; z-index: 11; left: 0px; top: 0px; width: 74px; height: 20px; background-color: rgb(255, 255, 255);">
<div style="position: absolute; width: 42px;">
<div role="menu" aria-label="1" class="font89" style="padding-left: 0px; cursor: pointer; position: absolute; left: 0px; color: rgb(126, 126, 126); width: 43px; height: 20px; line-height: 20px; background: transparent;" onclick="plw.menu.click(this,351,0,"1",true);" onmouseenter="plw.menu.over(event,this,351,0,"1");this.style.color="rgb(174,174,174)";this.style.backgroundColor="rgb(255,255,255)"" onmouseleave="plw.menu.out(351);this.style.background="transparent";this.style.color="rgb(126,126,126)";">
<div style="position:absolute;left:0px;top:2px" class="image347 "></div>
<span style="position:relative;left:21px;top:0px">New</span>
</div>
</div>
</div>
</div>
Below is my selenium code:
new_create = WebDriverWait(driver, 40).until( EC.presence_of_all_elements_located((By.XPATH, '/html/body/div[2]/div[2]/div[5]/div/div/div/div')))
driver.find_element_by_id("object260310").click()
#its working fine till here
driver.find_element_by_xpath(".//*[contains(#onclick, '231')]").click()
#This line doesnt seems to work.
And here is a screenshot of the site.
Clicking drop down options have been iffy for me before. This is a thing I do when there aren't any other solutions:
Click the drop down then you can send keys depending on the letter of the option you need. so if an option is "action" then you press "a".
This highly depends on what you have in the drop down though.
EDIT: I would highly look at all the related questions there... They have some stuff you might be able to use. As I said this is only if those don't work!
You can try to click on the drop-down first(New in your case)
If the dropdown is not select , then use the below code select the value.
driver.find_element_by_xpath("//div[text(),'Product Variation']").click();
driver.find_element_by_xpath("//div[contains(text(), 'Product Variation']").click();
Think the xpath should be written that way. Will you send me the URL and I'll make sure I can click before I make another edit on this post?
Thank you all for your help. I was able to find the xpath using chrome XPATH Helper extension.Extension gave below xpath :
/html/body/div[#id='m235e0-SUB-1']/table[#class='oldmenu']/tbody/tr[#id='235-0-SUB-1-1']/td[#class='oldmenu']
Using this I was able to identify the id for sub menu i.e. '235-0-SUB-1-1'
So I modified the code accordingly as below :
driver.find_element_by_xpath('//*[#id="235-0-SUB-1-1"]').click()
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 :-/