How can I push the button down just after the text, as it stands now, it is stuck at the top before the text. It should go after the text:
Current result:
Desired result:
Here is the HTML/CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox_container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #808080;
position: relative;
color: rgb(11,63,113);
}
#alertBox {
height: 100px;
width: 400px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
}
#alertBox_titlebar {
line-height:24px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
font-weight: bold;
}
.alertBox_Button {
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 8pt;
font-weight: bold;
margin-top: 2px;
margin-right: 2px;
padding-left: 2px;
padding-top: 2px;
position:absolute;
top:0;
right:0;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
#alertBox_div_btn_OK {
position: absolute;
width: 100%;
height: auto;
text-align: center;
}
#alertBox_btn_OK {
height: 20px;
width: 50px;
font-size: 9pt;
}
</style>
</head>
<body>
<!-- Start of custom alertbox -->
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">Searching the database...</div>
<div id="alertBox_div_btn_OK"><input class="alertBox_Button" id="alertBox_btn_OK" type="button" value="OK" onclick="alertBox_hide()"></div>
</div>
</div>
</div>
<!-- End of custom alertbox -->
</body>
</html>
I don't see any reason why you are positioning the elements absolutely within the box. Get rid of that:
http://jsfiddle.net/qysTW/1
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
}
#alertBox_div_btn_OK {
width: 100%;
height: auto;
text-align: center;
}
You can then use margin to space them out properly. Even the width and height shouldn't be needed unless there's something else on your greater page which this is overriding.
Related
I am building a calculator on HTML/CSS. I have some buttons. Two of them are slightly different- I only want to change the color of those 2 buttons (into blue).
But I am a beginner in HTML and I don`t want to duplicate my code.
So I asking you:
How do I create those two buttons which are similar to any other button, with different background color instead only?
My calculator is: https://pasteboard.co/I8iFbTB.jpg .
For example, in OOP I create a class of button (father) and a son who heritage it. The only difference between them is that the son has one more line in its code: a background color.
No need to do copy-paste (exactly what I want to do in HTML),
"Dbutton" will inherit "button" (there is an HTML code here).
I wrote a code that works. I just need to get rid of some lines on Dbutton.
Any help will be appreciated!
Haim
My code:
<!DOCTYPE html>
<html>
<head>
<title>Lab 1 example</title>
<meta charset="utf-8" />
<style>
body {
font-family: Verdana, Ariel;
margin: 140px;
}
p1 {
color: white;
font-size: 30px;
position: relative;
left: 15px;
top: 00px;
padding-left: 2%;
margin-top: 1%;
}
p2 {
color: black;
font-size: 30px;
padding-right: 1%;
padding-bottom: 2%;
position: relative;
top: 60px;
}
#monitor {
background-color: lightgreen;
color: black;
font-size: 30px;
border: 3px solid red;
width: 90%;
height: 20%;
padding-right: 3%;
margin: auto;
position: relative;
left: 01px;
top: 10px;
text-align: right;
}
.button {
float: left;
width: 12%;
height: 8%;
border: 2px solid silver;
cursor: pointer;
text-align: center;
padding: 10px;
color: white;
padding-left: 5%;
position: relative;
left: 35px;
top: 30px;
}
.Dbutton { //$=this is duplication (I don`t need it)
float: left; //$
width: 12%; //$
height: 8%; //$
border: 2px solid silver; //$
cursor: pointer; //$
text-align: center; //$
padding: 10px; //$
color: white; //$
padding-left: 5%; //$
position: relative; //$
left: 35px; //$
top: 30px; //$
background-color: blue; //onle need this line
}
.button:hover {
background-color: darkkhaki;
}
</style>
</head>
<body>
<div style=" width: 380px; height:530px; margin: 10px auto; border: 05px solid blue; background-color: black;">
<p1 align="right"><strong>Casio</strong></p1>
<!--monitor-->
<div id="monitor"><p2>0</p2></div>
<!--buttons-->
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">+</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">-</div>
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">X</div>
<div class="button">.</div>
<div class="button">0</div>
<div class="button">=</div>
<div class="button">%</div>
<div class="Dbutton">DEL</div>
<div class="Dbutton">CLR</div>
<div style="clear:both"></div>
</div>
</body>
</html>
You can join common settings in css:
.button,
.Dbutton {
float: left;
width: 12%;
height: 8%;
border: 2px solid silver;
cursor: pointer;
text-align: center;
padding: 10px;
color: white;
padding-left: 5%;
position: relative;
left: 35px;
top: 30px;
}
.Dbutton {
background-color: blue; //onle need this line
}
You can use it like this...
<div class="button Dbutton">DEL</div>
<div class="button Dbutton">CLR</div>
And Dbutton will becomes...
.Dbutton {
background-color: blue; //onle need this line
}
Please Read the comments in css. I hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Lab 1 example</title>
<meta charset="utf-8" />
<style>
body {
font-family: Verdana, Ariel;
margin: 140px;
}
p1 {
color: white;
font-size: 30px;
position: relative;
left: 15px;
top: 00px;
padding-left: 2%;
margin-top: 1%;
}
p2 {
color: black;
font-size: 30px;
padding-right: 1%;
padding-bottom: 2%;
position: relative;
top: 60px;
}
#monitor {
background-color: lightgreen;
color: black;
font-size: 30px;
border: 3px solid red;
width: 90%;
height: 20%;
padding-right: 3%;
margin: auto;
position: relative;
left: 01px;
top: 10px;
text-align: right;
}
.button {
float: left;
width: 12%;
height: 8%;
border: 2px solid silver;
cursor: pointer;
text-align: center;
padding: 10px;
color: white;
padding-left: 5%;
position: relative;
left: 35px;
top: 30px;
}
.button:nth-child(n+19){
background-color: blue;
}
/*Just use this selector which selects a specific range of childs
OR
.button:nth-last-child(-n+3){
background-color: blue;
}
*/
.button:hover {
background-color: darkkhaki;
}
</style>
</head>
<body>
<div style=" width: 380px; height:530px; margin: 10px auto; border: 05px solid blue; background-color: black;">
<p1 align="right"><strong>Casio</strong></p1>
<!--monitor-->
<div id="monitor"><p2>0</p2></div>
<!--buttons-->
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">+</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">-</div>
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">X</div>
<div class="button">.</div>
<div class="button">0</div>
<div class="button">=</div>
<div class="button">%</div>
<div class="button">DEL</div>
<div class="button">CLR</div>
<div style="clear:both"></div>
</div>
</body>
</html>`enter code here`
a {
text-decoration: none;
}
.header {
position: relative;
top: 1px;
left: 589px;
padding-top: 20px;
padding-bottom: 10px;
}
.subtitle {
position: relative;
right: 26px;
letter-spacing: 2px;
padding-top: 5px;
font-size: 21px;
font-family: arial;
font-weight: bold;
color: #6b6b6b;
text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}
/* Menu*/
nav {
position: relative;
left: 210px;
height: 70px;
border-radius: 60px;
background: #dc67e9;
width: 1000px;
}
ul {
margin-left: 17%;
}
ul li {
display: inline-block;
line-height: 80px
}
ul li a {
text-decoration: none;
font-family: 'Coiny', cursive;
font-size: 19px;
color: white;
padding: 0 20px
}
ul li a:hover {
color: black;
}
.bannerimage {
margin-left: 5px;
margin-top: 4px;
}
.banner {
margin-top: 4px;
background-color: #dc67e9;
width: 100%;
height: 589px;
}
.bannerpromo1 {
position: relative;
bottom: 500px;
margin-left: 60px;
font-family: 'Lobster', cursive;
color: black;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 70px;
}
.bannerpromo2 {
position: relative;
bottom: 470px;
margin-left: -780px;
font-family: 'Lobster', cursive;
color: #585656;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 50px;
text-align: center;
}
.subscribebanner {
width: 250px;
height: 50px;
background-color: #dc67e9;
position: relative;
left: 190px;
bottom: 430px;
border: 4px solid white;
}
.subscribebannertext {
margin-left: 30px;
margin-top: 15px;
font-family: 'Coiny', cursive;
word-spacing: 2px;
font-size: 30px;
}
.howitworks {
font-size: 60px;
font-family: 'Lobster', cursive;
text-shadow: #a8a8a8 4px 6px;
margin-top: 50px;
position: relative;
left: 555px;
}
.subheaderbox1 {
position: relative;
margin-top: 20px;
right: 315px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox2 {
position: relative;
bottom: 100px;
left: 65px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox3 {
position: relative;
bottom: 200px;
left: 450px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaders {
position: relative;
bottom: 275px;
font-size: 40px;
margin-left: -265px;
word-spacing: 250px;
letter-spacing: 3px;
color: white;
}
.box1 {
position: relative;
right: 370px;
bottom: 225px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box2 {
position: relative;
right: -15px;
bottom: 500px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box3 {
position: relative;
right: -405px;
bottom: 780px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.step1 {
position: relative;
right: 932px;
bottom: 219px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step2 {
position: relative;
right: 546px;
bottom: 493px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step3 {
position: relative;
right: 153px;
bottom: 766px;
color: #666666;
font-size: 30px;
text-align: center;
}
.section1 {
position: relative;
margin-top: 20px;
bottom: 660px;
background-color: #adcae1;
margin-left: -570px;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section2 {
position: relative;
left: 149px;
bottom: 660px;
background-color: #adcae1;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section1title {
padding-top: 80px;
font-size: 70px;
}
.section1text {
font-size: 40px;
text-shadow: none;
color: #f0f0f0;
}
.section2title {
padding-top: 100px;
font-size: 70px;
}
.section2text {
font-size: 35px;
text-shadow: none;
color: #f0f0f0;
padding-left: 1px;
}
.imgsect1 {
margin-left: 148px;
position: relative;
bottom: 1660px
}
.imgsect2 {
position: relative;
bottom: 1668px;
right: 571px;
}
<!DOCTYPE html>
<html>
<head>
<title>SweetVie-Home-Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="indexstyle.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link rel="stylesheet" href="indexstyle.css">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="topfiller"></div>
<div class="header">
<img src="images/logo.jpg" height="90" alt="SweetVieLogo">
<h2 class="subtitle">Vegan Baking Made Easy</h2>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COMMUNITY</li>
<li>FAQ</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
<div class="banner">
<img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
<h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
<h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
<div class="subscribebanner">
<h3 class="subscribebannertext"> SUBSCRIBE</h3>
</div>
</div>
<div class="howitworks">
<h1>How It Works</h1>
<div class="subheaderbox1"></div>
<div class="subheaderbox2"></div>
<div class="subheaderbox3"></div>
<div class="subheaders">
<h2>Click Prepare Enjoy</h2>
</div>
<div>
<img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
</div>
<h3 class="step1">Select one of the three<br>subscription options</h3>
<div>
<img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
</div>
<h3 class="step2">Get involved and play<br>with your food</h3>
<div>
<img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
</div>
<h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>
<div class="section1">
<h2 class="section1title">Food Time<br> Family Time</h2>
<br>
<p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
</div>
<div class="section2">
<h2 class="section2title">The Next Step</h2>
<br>
<p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
</div>
<div class="imgsect1">
<img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
</div>
<div class="imgsect2">
<img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
</div>
</body>
</html>
I'm currently making a website for a school project that requires a menu bar. The menu bar changed to black whenever the cursor hovered over it previously, but recently stopped and now only changes color when it is selected/clicked.
I'm very new to html and css so I know my syntax or method of positioning my elements/divs may be poor.
But if there are any tips or guidance on what I should do to fix this problem, that would be great.
As pointed out in the comments, the div with class bannerpromo2 is getting in front of the menu, blocking hover and clicks.
As for the strange behavior you are getting when "inspecting", there is no magic there. Since bannerpromo2 is positioned relative to the bottom (it has bottom: 470px;), the position could be changing when you "inspect" it, because the developer panel opens from the bottom of your browser window, thus changing the bottom property of bannerpromo2.
If you want to see all of that in play, give bannerpromo2 a background color:
.bannerpromo2 {
background-color: green;
/* ...other props */
}
I want my text in the three link boxes to be vertically aligned in the middle - but they won't for some reason?
I also want the entire div each of the three sport options sit in, to be a clickable box. I have made "marathon" div clickable, but it messes up the alignment
What are these 2 problems ocurring?
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
flex-direction: column;
align-items: center;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
margin-top: auto;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
border: 2px solid #39ff14 ;
width: 50%;
height: 10%;
top: 45%;margin-top: auto;
}
.Cycling {
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
top: 72.5%;
margin-top:auto;
margin-bottom:auto;
}
h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
Also, I want my web app to show up nicely on my mobile. Currently, my web app shows nicely on my PC, but when I open on mobile, the title "My Map App" is tiny! How can I resolve this?
Thanks in advance
PS, very new to this!
You should remove all those individual styles for Hockey, Cycling, and Marathon. And add this to your .child-container style:
flex-direction: column;
align-items: center;
Though I wouldn't recommend something so general, a more global style for your links could look something like this:
.child-container > * {
padding: 12px 10%;
border: solid 2px #39ff14;
min-width: 150px;
margin-bottom: 20px;
}
Lastly, add this to the head of your document so mobile isn't so zoomed out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your Code has a minor syntax error. Make sure to keep track of tags. In this case, the div tag was accidentally placed after the anchor tag in the marathon section of the html. If you have a bug with an html element- go to that class to see why it is different from the others.
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
padding: 0;
position: absolute;
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
padding: 0;
position: absolute;
top: 45%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Cycling {
padding: 0;
position: absolute;
top: 72.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.parent-container h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
You probably want to change the box styles so that they look nicer.
As for the mobile vs desktop problem look into this:
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
How about something super simple as this?
<a> //This will act as your button container
<p>Cycling</p> // Here goes the name
</a>
Give style of Button to your <a>, hence it will function as a button.
Keep CSS as simple as you could.
* {
background: black;
}
.parent-container {
margin: 40px;
}
.parent-container h1 {
font-size: 30px;
color: #39ff14;
}
.child-container {
display: flex;
flex-direction: column;
border: 2px solid #39ff14;
padding-top: 20px;
}
.child-container a {
flex: 1;
border: 2px solid #39ff14;
margin: 0px auto 20px auto;
width: 30%;
text-decoration: none;
}
.Marathon {
text-align: center;
color: #39ff14;
margin: 0;
height: 40px;
line-height: 40px;
}
.Hockey {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
.Cycling {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<a href="marathon.php">
<p class="Marathon">Marathon</p>
</a>
<a href="hockey.php">
<p class="Hockey">Hockey</p>
</a>
<a href="cycling.php">
<p class="Cycling">Cycling</p>
</a>
</div>
</div>
Here is my HTML and CSS file: I am trying to figure out how to move all my headers including the form and button towards more to the middle of the page. Right now they're all at the bottom. I have posted it on codepen (https://codepen.io/tuhmatyow/pen/xLjEqv) but it looks weird because I am using material.io. Here is the screenshot of how it actually looks.
<title="Action Auctions"></title>
<body>
<center>
<h1 class="title">Action Auctions</h1>
<div class="triangle1"></div>
<div class="triangle2"></div>
<h1 class="congratulations">Congrats! You won!</h1>
<h1 class="but">BUT...</h1>
<h2 class="donateEarnings">You can still donate your earnings!</h2>
<form action="/winner/" method="POST">
{% csrf_token %}
{{ donate_form }}
<!-- <input type="submit" value="DONATE!"> -->
<button button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Donate</button>
</form>
<br><br>
<h3 class="transfer">...or have them transferred to your card</h3>
<form action="/winner/" method="POST">
{% csrf_token %}
{{ reimburse_form }}
<!-- <input type="submit" value="Receive Earnings"> -->
<button button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Receive Earnings</button>
</form>
<nav class="fixed-nav-bar-bottom">
<h3 class="copyright">Copyright 2017 ©</h3>
</nav>
</center>
</body>
body {
background-color: #1F2831;
position: fixed;
}
.title {
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
border-bottom: 1px solid;
padding-top: 30px;
width: 10em;
/*overflow: hidden;*/
letter-spacing: .15em;
/*text-align: center;*/
/*white-space: nowrap;*/
/*margin: 0 auto;*/
}
.triangle1 {
width: 0;
/*height: 0;*/
top: -80px;
right: 145px;
border-style: solid;
border-width: 100px 50px 0 50px;
border-color: #8aa0b8 transparent transparent transparent;
position: relative;
z-index: -1;
}
.triangle2 {
width: 0;
/*height: 0;*/
top: -150px;
left: 130px;
border-style: solid;
border-width: 50px 0 50px 100px;
border-color: transparent transparent transparent #f59d3f;
position: relative;
z-index: -1;
}
.congratulations {
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin: auto;
}
.but {
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin: auto;
}
.form-control {
height: 30px;
padding-left: 10px;
margin: auto;
background-color: #1F2831;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
}
.donateEarnings {
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin: auto;
}
.transfer {
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin: 0 auto;
}
.copyright {
color: #FFFFFF;
font-size: 10px;
font-family: 'Raleway', sans-serif;
}
.fixed-nav-bar-bottom {
/*top: 0;*/
/*left: 0;*/
bottom: 0;
height: 10%;
width: 100%;
z-index: -1;
position: fixed;
background-color: #39678E;
}
your triangle classes are set to "display:relative" which means they are stacking... You corrected for that by giving negative values to each triangle's "top" positions. This basically made the body element stretch for each triangle and for each you simply positioned each triangle vertically out and above the element container they were within.
Make each triangle's class "position:fixed" and adjust your top/left/right to put your triangles where you want.
Maybe something like this:
.triangle1 {
width: 0;
/*height: 0;*/
top: 25px;
left: 90px;
border-style: solid;
border-width: 100px 50px 0 50px;
border-color: #8aa0b8 transparent transparent transparent;
position: absolute;
z-index: -1;
}
.triangle2 {
width: 0;
/*height: 0;*/
top: 50px;
left: 130px;
border-style: solid;
border-width: 50px 0 50px 100px;
border-color: transparent transparent transparent #f59d3f;
position: absolute;
z-index: -1;
}
.center{
position:relative;
display: block;
}
And add class "center" to your center element:
<center class="center">
This is where #i-haz-kode was going in his/her comment above.
I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>