Related
I have a question about SCSS in this GitHub. I learn this and find one thing confusing.
The repo is showing different filetypes like jpg, docx or pdf.
I created a Codesandbox of this repo to ask questions about it.
Opening that Codesandbox you see the file-viewer.jsx in the viewer and it loads import '../styles/main.scss'; that contains;
.pg-viewer-wrapper {
height: 100%;
display: flex;
flex-direction: row;
.pg-viewer {
height: 100%;
position: relative;
flex-grow: 2;
.pg-driver-view {
margin: auto;
width: 100%;
height: 100%;
.loading {
position: relative;
}
I can see in the file-viewer.jsx render() that it uses the SCSS .pg-viewer-wrapper and children.
When I select in the App.js to show a docx file like this;
import React, { Component } from "react";
import FileViewer from "./components/file-viewer";
import docx from "../example_files/SampleSpec.docx";
class App extends Component {
render() {
return (
<div>
<FileViewer fileType="docx" filePath={docx} />,
</div>
);
}
}
export default App;
Then it loads the docx-viewer.jsx that have the import '../../styles/docx.scss'; SCSS. Viewing this SCSS it looks like this;
.pg-viewer-wrapper {
overflow-y: scroll;
#docx {
width: 100%;
height: 100%;
}
.document-container {
padding: 30px;
width: 700px;
background: white;
margin: auto;
}
html,
bodyaddress,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
frame,
frameset,
h1,
h2,
h3,
h4,
h5,
h6,
noframes,
ol,
p,
ul,
center,
dir,
hr,
menu,
pre {
display: block;
unicode-bidi: embed;
}
li {
display: list-item;
list-style-type: disc;
}
head {
display: none
}
table {
display: table
}
img {
width: 100%
}
tr {
display: table-row
}
thead {
display: table-header-group
}
tbody {
display: table-row-group
}
tfoot {
display: table-footer-group
}
col {
display: table-column
}
colgroup {
display: table-column-group
}
th {
display: table-cell
}
td {
display: table-cell;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 0.2em 0.5em;
}
caption {
display: table-caption
}
th {
font-weight: bolder;
text-align: center;
}
caption {
text-align: center
}
body {
margin: 8px
}
h1 {
font-size: 2em;
margin: .67em 0;
}
h2 {
font-size: 1.5em;
margin: .75em 0;
}
h3 {
font-size: 1.17em;
margin: .83em 0;
}
h4,
p,
blockquote,
ul,
fieldset,
form,
ol,
dl,
dir,
menu {
margin: 1.12em 0
}
h5 {
font-size: .83em;
margin: 1.5em 0;
}
h6 {
font-size: .75em;
margin: 1.67em 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
font-weight: bolder
}
blockquote {
margin-left: 40px;
margin-right: 40px;
}
i,
cite,
em,
var,
address {
font-style: italic
}
pre,
tt,
code,
kbd,
samp {
font-family: monospace
}
pre {
white-space: pre
}
button,
textarea,
input,
select {
display: inline-block
}
big {
font-size: 1.17em
}
small,
sub,
sup {
font-size: .83em
}
sub {
vertical-align: sub
}
sup {
vertical-align: super
}
table {
border-spacing: 2px
}
thead,
tbody,
tfoot {
vertical-align: middle
}
td,
th,
tr {
vertical-align: inherit
}
s,
strike,
del {
text-decoration: line-through
}
hr {
border: 1px inset
}
ol,
ul,
dir,
menu,
dd {
margin-left: 40px
}
ol {
list-style-type: decimal
}
ol ul, ol ul,
ul ol, ul ol,
ul ul, ul ul,
ol ol, ol ol {
margin-top: 0;
margin-bottom: 0;
}
u,
ins {
text-decoration: underline
}
br:before {
content: "\A";
white-space: pre-line;
}
center {
text-align: center
}
:link,
:visited {
text-decoration: underline
}
:focus {
outline: thin dotted invert
}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
BDO[DIR="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}
*[DIR="ltr"] {
direction: ltr;
unicode-bidi: embed;
}
*[DIR="rtl"] {
direction: rtl;
unicode-bidi: embed;
}
#media print {
h1 {
page-break-before: always
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid
}
ul,
ol,
dl {
page-break-before: avoid
}
}
}
As you see it also have the .pg-viewer-wrapper {...
My question is since docx-viewer.jsx don't have in its render().. any references to the .pg-viewer-wrapper {.. so how can it still be used in the docx-viewer.jsx? I just learn this so probably its basic stuff :)
The .pg-viewer-wrapper is applied in the <FileViewer ... >, which is the file file-viewer.jsx, and which imports and wraps the file docx-viewer.jsx.
file-viewer.jsx renders:
render() {
const Driver = this.getDriver(this.props);
return (
<div className="pg-viewer-wrapper">
<div className="pg-viewer" id="pg-viewer">
<Driver ... />
</div>
</div>
);
}
The resulting HTML including the Driver would be like:
<div className="pg-viewer-wrapper">
<div className="pg-viewer" id="pg-viewer">
<div id="docx">
<div class="document-container">
... the generated HTML ...
</div>
</div>
</div>
</div>
the input box is using focus already,input and label tags are not using the css style provided earlier in style tag?
transform not working :(
i have bold where i am not getting,
i have provided my css and html
i used input and label> then style them in css but it doesnot work then I created transition and it does not work more over it took it as default in page
Code I tried:
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus,
.search:valid {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus~label,
#searchbar:valid~label {
transform: translatey(-10px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search"><label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
I hope I understood correctly what you want to do
Option 1 - CSS
The changes made are in .search:focus and #searchbar:focus+label
But after the input field is out of focus the inscription "Search" will return to its original place.
If you want the change to happen once view Option 2 below
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus + label {
transform: translatey(-20px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search">
<label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
Option 2 - JS and CSS
If you want the transition to be one-time after clicking the in input element you must use JS. This script will add style to the label element with id searchbarLabel when clicked into the input element with id searchbar.
document.getElementById("searchbar").addEventListener("click", function () {
var y = document.getElementById("searchbarLabel");
y.setAttribute('style', 'transform: translatey(-20px);')
});
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
/*
#searchbar:focus+label {
transform: translatey(-20px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search">
<label for="searchbar" id="searchbarLabel">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
Something that is better practice is too not put label inside input and also in the css try making it more specific like :
.main . searchdiv input /* for example */
other than that I can't really help if you repost with cleaner code and better code maybe we can help.
As far as I can see, the transform works. If you think its your browser settings, try adding a reset.css similar to this:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
I am trying to slide a "toggle button" to the left after the navigation bar hides and slides left and then slide it back to the original position when showing navigation bar. Here's what I'm trying currently.
This does not work:
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
if ($toolbar.is(":visible")) {
$toolbar.toggle(500);
$toggle.animate({
left: 0
}, 500);
} else if ($toolbar.is(":hidden")) {
$toolbar.toggle(500);
$toggle.animate({
left: 20.5%
}, 500);
}
});
});
When I remove the animate method on the else block everything seems to work, when I add it back to reverse the "$toggle" button to the original position none of the code works.... any help is much much appreciated!!
EDIT: added snippet below
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
if ($toolbar.is(":visible")) {
$toolbar.toggle(500);
$toggle.animate({
left: 0
}, 500);
} else if ($toolbar.is(":hidden")) {
$toolbar.toggle(500);
}
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================*/
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url(../images/boatsunset.jpg);
background-size: 100% 100%;
}
#shoppingCart {
background-color: #00000000;
float: right;
margin-right: 1rem;
position: relative;
top: 50%;
transform: translateY(-50%);
border: none;
}
#shoppingCart img {
height: 3rem;
width: 3rem;
}
#toolbar {
color: #000000;
font-family: 'Playfair Display', serif;
font-size: 3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25%;
display: inline-block;
}
#toolbar ul {
position: relative;
display: inline-block;
width: 85%;
}
#toolbar li {
margin: 2rem auto;
cursor: pointer;
}
#toolbar li:hover {
color: #aaaaaa88;
}
#toggle {
background-color: #00000000;
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20.5%;
display: inline-block;
color: #000000;
font-size: 3rem;
cursor: pointer;
}
#toggle:hover {
color: #aaaaaa88;
}
#listborder {
width: 80%;
border-right: .2rem solid #aaaaaa55;
height: 26rem;
position: absolute;
top: 51%;
transform: translateY(-50%);
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link rel="stylesheet" href= "assets/stylesheets/style.css">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Artwork by Gia dalPozzo">
<meta name="keywords" content="Gia dalPozzo, Gia, dalPozzo, artwork, fine art, paintings, oil painting">
<meta name="author" content="Marlin dalPozzo">
<title>Gia dalPozzo | Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/script1.js" async></script>
</head>
<body>
<header>
<button id="shoppingCart"><img src="assets/images/cart2.png"></button>
</header>
<div id="toolbar">
<ul>
<li>Florals</li>
<li>Landscapes</li>
<li>Portraits</li>
<li>My Story</li>
<li>Events</li>
<li>Contact Me</li>
</ul>
<div id="listborder"></div>
</div>
<div id="toggle">
<p><</p>
</div>
<footer>
<!--social media links/icons-->
<!--copyright etc-->
<!--date updated-->
</footer>
</body>
</html>
You have to set the left property of the button as a string. Using the "%" symbol like you did is not allowed in JavaScript. The correction looks like this:
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
if ($toolbar.is(":visible")) {
$toolbar.toggle(500);
$toggle.animate({
left: "0"
}, 500);
} else if ($toolbar.is(":hidden")) {
$toolbar.toggle(500);
$toggle.animate({
left: "20.5%"
});
}
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================*/
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url(../images/boatsunset.jpg);
background-size: 100% 100%;
}
#shoppingCart {
background-color: #00000000;
float: right;
margin-right: 1rem;
position: relative;
top: 50%;
transform: translateY(-50%);
border: none;
}
#shoppingCart img {
height: 3rem;
width: 3rem;
}
#toolbar {
color: #000000;
font-family: 'Playfair Display', serif;
font-size: 3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25%;
display: inline-block;
}
#toolbar ul {
position: relative;
display: inline-block;
width: 85%;
}
#toolbar li {
margin: 2rem auto;
cursor: pointer;
}
#toolbar li:hover {
color: #aaaaaa88;
}
#toggle {
background-color: #00000000;
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20.5%;
display: inline-block;
color: #000000;
font-size: 3rem;
cursor: pointer;
}
#toggle:hover {
color: #aaaaaa88;
}
#listborder {
width: 80%;
border-right: .2rem solid #aaaaaa55;
height: 26rem;
position: absolute;
top: 51%;
transform: translateY(-50%);
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link rel="stylesheet" href= "assets/stylesheets/style.css">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Artwork by Gia dalPozzo">
<meta name="keywords" content="Gia dalPozzo, Gia, dalPozzo, artwork, fine art, paintings, oil painting">
<meta name="author" content="Marlin dalPozzo">
<title>Gia dalPozzo | Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/script1.js" async></script>
</head>
<body>
<header>
<button id="shoppingCart"><img src="assets/images/cart2.png"></button>
</header>
<div id="toolbar">
<ul>
<li>Florals</li>
<li>Landscapes</li>
<li>Portraits</li>
<li>My Story</li>
<li>Events</li>
<li>Contact Me</li>
</ul>
<div id="listborder"></div>
</div>
<div id="toggle">
<p><</p>
</div>
<footer>
<!--social media links/icons-->
<!--copyright etc-->
<!--date updated-->
</footer>
</body>
</html>
JQuery can handle that as you see.
Without seeing your markup it is kind of difficult as the other posters have mentioned, but I'll yolo it without seeing your source.
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
$toolbar.animate({
width:'toggle'
}, 750);
});
});
fiddle:
https://jsfiddle.net/3rbj19n9/
I'm not too fluent in javascript, so I can't really find any solutions that work for me. I'm trying to align these two elements/divs: the image and the "everything" div to have equal heights, so that my footer fits in. None of the solutions seem to be working. You don't need to pay attention to much of the text or anything. All I need is a solution in how to keep the height of the image the same as the "everything" div. In doing so, I would want the "everything" div not to be sstatic, so it can change according to browser size using the em font values and percentage width/height values. So, basically, the image height should be equal to the "everything" div height without changing the hight of the "everything" div as it would be without the added code. Here is the code :
html {
margin: 0 0;
}
.kewlimage {
z-index: 1;
float: left;
width: 50%;
height: 45.4em;
}
.everything {
width: 50%;
float: left;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: "comic sans ms";
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}
<div>
<img class="kewlimage" src="https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg">
</div>
<div class="everything">
<div class="navbar">
Home
News
Join the Team
Archives
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
Coding
Science
Math
History
About
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
Since you have tagged javascript, here is one js solution:
<script>
img=document.getElementsByClassName('kewlimage')[0];
every=document.getElementsByClassName('everything')[0];
img.style.height=every.offsetHeight+'px';
window.addEventListener('resize', function(event){
img.style.height=every.offsetHeight+'px';
});
</script>
Place this code at the bottom of your page, before closing of body tag. Script simple calculates height of everything div, and apply it to image.
However, nowadays, you can easily get equal blocks/columns heights, using only CSS methods, and by slightly changing your html structure. However, this should work, without modifying anything in your current html/css.
First of all, check out this very helpful website to avoid giving other people eye cancer when they visit your website :-)
Then wrap your content in a holder div, I gave it the class .fullbackground. This class receives a background image with the background-size: 50% cover, which means it will always be 50% of the div's with and will resize to cover the full height. As you don't have a DOM element for the image anymore, you don't need floating, so you can just give .everything a width and margin of 50%.
Here's the same thing in a minimal version:
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
background: #f0f0f0;
}
<div class="fullbackground">
<div class="everything">
<p>start of content</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>end of content</p>
</div>
</div>
<footer>Footer</footer>
And here is your adapted code:
html {
margin: 0 0;
}
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: Verdana;
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}
<div class="fullbackground">
<div class="everything">
<div class="navbar">
Home
News
Join the Team
Archives
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
Coding
Science
Math
History
About
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
<p></p><p></p><p></p><p></p><p></p><p></p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
I want to center a div inside of <body>, but I just can't figure out how. I have tried flexboxes and the old margin: 0 auto; trick. Here is my code:
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Cutive+Mono|Oswald" rel="stylesheet">
<link href="../css/ham.css" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
//Unselctable Function
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
//NAVBAR HIDE
$('nav').hide();
//UNSELECTABLE
$('.unselectable').disableSelection();
//HAMBURGERS
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
$('nav').slideToggle();
});
});
</script>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>work</li>
<li>contact</li>
</ul>
</nav>
<button class="hamburger hamburger--spin" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div>center this</div>
It's literally just </body> after and my closing html - no scripts after that.
Here is my CSS:
/* FONTS
font-family: 'Comfortaa', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Cutive Mono', monospace;
*/
/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: white;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*STYLES*/
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background-color: black;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: inherit;
background-color: #212121;
}
li {
float: left;
color: #fff;
cursor: pointer;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Comfortaa', cursive;
/*transition*/
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
li a:hover {
color: #BDBDBD;
}
.hamburger {
position: absolute;
}
button:focus {
outline: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
* {
width: 100%;
}
li a {
padding: 0;
padding-top: 14px;
text-align: center;
}
li:last-child {
padding-bottom: 14px;
}
}
.content {
margin: 0 auto;
width: 100px;
}
^ .content is what I would like to Center Both Vertically and Horizontally in the page.
I should say, I am also using https://jonsuh.com/hamburgers/ - which is an excellent library by the way.
Sorry if this Question has been answered before, but I just couldn't find it anywhere.
Thanks
Alistair
you can center any div by css giving it a fixed width and margin(Standard way).
.any{
width:300px;/* use your required wid and height */
height:300px;
background:red; /* Just for example */
margin :0px auto;
}
you can even have a look at this bin:
https://jsbin.com/rewayuwoso/edit?html,css,output
You have omitted to put the content class in your div html.
It should read <div class="content">center this</div>
then it will be centered. Hope this helps.
However, using margin:0 auto only centers it horizontally.