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.
Related
working on this all night still no fix...
I have a link and when user hover mouse over it, it should display a box (div) under the link. The box should overlay whatever is under it. How can I do it using the most easyest way in pure-CSS way.
Thx Yummi
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... emojis ...............*/
.emojis {
position: absolute;
padding: 25px 15px 10px 20px;
border-radius: 20px 0px 20px 20px;
background-color:rgba(0, 0, 0, .3);
}
.emojis2>img{
position:absolute;
left:100%;
top:0;
}
.smiley {
position: absolute;
top: 25px;
left: 430px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 50px;
border: none;
outline: none;
padding-left: 37px;
font-family: Arial;
color: white;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.5px;
background-color:rgba(0, 0, 0, .3);
}
<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><img src="http://wizzfree.com/pix/smiley2.png" width="40">
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>
<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
<div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
<br>😃😁😅🤣😉😊😇😲😳😥<p>
<br>🥰😍😘😜🤫🤤😈😻🙈🙊<p>
<br>💘💕💞💌💑 💐🌹🎀🍨🍭<p>
<br>💃🏄🛀🏩👑🦁🦄 🎠🧸💍
</div>
With pure CSS, ugly hack is to hide the div first, show it later if mouse-over. Since the only link in your code is href="emojis.html", below example show moverover div with 'emojis.html' text:
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... emojis ...............*/
.emojis {
position: absolute;
padding: 25px 15px 10px 20px;
border-radius: 20px 0px 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.emojis2>img {
position: absolute;
left: 100%;
top: 0;
}
.smiley {
position: absolute;
top: 25px;
left: 430px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 50px;
border: none;
outline: none;
padding-left: 37px;
font-family: Arial;
color: white;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.5px;
background-color: rgba(0, 0, 0, .3);
}
a.special {
position: relative;
}
a.special div.hidediv {
background-color: white;
display: none;
position: absolute;
z-index: 100;
width: auto;
padding: 10 10 10 10;
}
a.special:hover div.hidediv {
display: block;
}
<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><a href="emojis.html" class="special"><img
src="http://wizzfree.com/pix/smiley2.png" width="40">
<div class="hidediv">emojis.html</div>
</a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>
<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
<div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
<br>😃😁😅🤣😉😊😇😲😳😥<p>
<br>🥰😍😘😜🤫🤤😈😻🙈🙊
<p>
<br>💘💕💞💌💑 💐🌹🎀🍨🍭
<p>
<br>💃🏄🛀🏩👑🦁🦄 🎠🧸💍
</div>
I made this website with html the other day: https://ghiblimovs.herokuapp.com/
The thing is, that even though the header image is centered on my screen, when my friend opened the website in her computer, the image was way more to the left and top side of the website instead. I have tried changing things and I played around with media queries since that's what everyone keeps mentioning around the web but something isn’t working… I am new to html and css so any help would be very appreciated!
This is my html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Ghibli Studio | Movies</title>
<link rel="stylesheet" href="{% static 'core/main.css' %}">
</head>
<body>
<div class=" header">
</div>
<div class="wrap">
<form action='/' method="POST">
{% csrf_token %}
<div class="search">
<input type="text" name="search" class="searchTerm" placeholder="Type movie name">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="submit" class="searchButton">
<i class="fa fa-search" style="font-size:24px"></i>
</button>
</div>
</form>
</div>
{% if movies %}
{% for movie in movies %}
<div>
<ul class="result">
<style>
#import url('https://fonts.googleapis.com/css2?family=Dosis:wght#300&display=swap');
</style>
<h4>{{movie.Title}}</h4>
<h5 style= "color:lightslategray;">
Release date: {{movie.Release_date}} <br>
Director: {{movie.Director}}
<br>Producer: {{movie.Producer}}
<br>
<br>{{movie.Description}}
</h5>
</ul>
{% endfor %}
{% endif %}
</div>
</body>
</html>
This is my css:
body {
background: #D4E6F1;
font-family: 'Open Sans', sans-serif;
}
.header {
background: url(https://upload.wikimedia.org/wikipedia/sco/thumb/c/ca/Studio_Ghibli_logo.svg/640px-Studio_Ghibli_logo.svg.png) no-repeat;
font-size: 14px;
width: 640px;
height: 307px;
background-size: 70%;
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: 340px;
}
.search {
width: 100%;
margin-bottom: 150px;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #AEB6BF ;
border-right: none;
padding: 5px;
height: 20px;
margin-top: 110px;
border-radius: 5px 0 0 5px;
outline: none;
color: #AEB6BF ;
}
.searchTerm:focus {
color: #808B96;
}
.searchButton {
width: 40px;
height: 36px;
border: 2px solid #AEB6BF;
background: #D4E6F1;
text-align: center;
color: #AEB6BF;
margin-top: 110px;
border-radius: 0 2px 2px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
html {
font-family: 'Dosis', sans-serif;
line-height: 1.6;
color: #666;
}
h4 {
margin-bottom: 500px;
margin-top: -50px;
width: 20%;
height: 5px;
text-align: center;
font-family: 'Dosis', sans-serif;
padding: 1.5rem 2rem;
background: url(https://cdna.artstation.com/p/assets/images/images/017/168/420/large/emrullah-cita-ghibli-clouds.jpg?1554902207);
background-position: center;
font-size: 1.3rem;
color: #ffffff;
text-shadow: #000000;
position: absolute;
top: 63%;
border-radius: 12px 12px 0 0;
left: 38%;
}
h5 {
margin-top: -50px;
background: #F2F4F4;
width: 20%;
height: 290px;
text-align: justify;
font-family: 'Dosis', sans-serif;
padding: 1.5rem 2rem;
font-size: 1rem;
position: absolute;
top: 70%;
left: 38%;
overflow: hidden;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
border-radius: 0 0 12px 12px;
}
Doing margin auto on both right and left should always center it
.header {
background: url(https://upload.wikimedia.org/wikipedia/sco/thumb/c/ca/Studio_Ghibli_logo.svg/640px-Studio_Ghibli_logo.svg.png) no-repeat;
font-size: 14px;
width: 640px;
height: 307px;
background-size: 70%;
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
However the image is a bit off centered as in there's a bunch of white space so it will still be a bit to the left.
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'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>
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.