Anyone know how this can be done? I'm trying to make it so the text inside my button is vertically alligned. Looks silly atm. Sorry if the code is messy I'm really new to all of this. If anyone can help I would greatly appreciate it, spent hours trying to do this!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>I'M JACOB</title>
<meta name="description" content="I'm Jacob">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Lobster" rel="stylesheet">
</head>
<body>
<nav class="fixed-nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="box"><h1>Hello World!</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui urna, pellentesque sed consectetur nec, maximus placerat mauris. Donec ultrices elementum augue, et rutrum est elementum sed. Duis sit amet varius eros. Sed nunc velit, congue a bibendum ac, cursus eget velit. Maecenas bibendum eleifend arcu. Morbi at neque at ex interdum tempus. In vitae mauris urna. Integer sit amet suscipit libero. Cras ultricies tincidunt commodo. Nam vel leo rhoncus, facilisis orci a, tempus nisi. Suspendisse porta est nunc, ut malesuada quam ultrices vitae. Aliquam diam ligula, auctor a elementum sit amet, convallis et nibh. In hac habitasse platea dictumst. Mauris semper vel ipsum eget convallis.</p></div><br>
Push Me
<div class="footer">Coded from scratch by Jacob in HTML & CSS.<br>All rights reserved ©</div>
</body>
CSS
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #FF8E8E;
box-shadow: 0px 2px 0px #FFC8C8;
}
li {
float: left;
list-style: none;
}
li a {
display: block;
color: white;
font-family: sans-serif;
font-size: 14px;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
.box {
position: absolute;
width: 800px;
height: 400px;
z-index: 15;
top: 30%;
left: 50%;
margin: -100px 0 0 -400px;
background: transparent;
text-align: center;
font-family: sans-serif;
font-size: 14px;
color: darkgray
}
.footer {
position: absolute;
height: 25px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
font-family: sans-serif;
font-size: 13px;
color: darkgrey
}
.button {
display: block;
margin:0 auto;
width: 150px;
height: 50px;
margin-top: 20%;
border: 1px solid;
border-color: darkturquoise;
border-radius: 5px;
text-align: center;
line-height: 22px;
font-size: 16px;
font-family: sans-serif;
background-color: darkturquoise;
color: white;
}
You can use display: flex; justify-content: center; align-item: center; to vertically and horizontally center something. This is a good reference https://www.w3.org/Style/Examples/007/center.en.html
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #FF8E8E;
box-shadow: 0px 2px 0px #FFC8C8;
}
li {
float: left;
list-style: none;
}
li a {
display: block;
color: white;
font-family: sans-serif;
font-size: 14px;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
.box {
position: absolute;
width: 800px;
height: 400px;
z-index: 15;
top: 30%;
left: 50%;
margin: -100px 0 0 -400px;
background: transparent;
text-align: center;
font-family: sans-serif;
font-size: 14px;
color: darkgray
}
.footer {
position: absolute;
height: 25px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
font-family: sans-serif;
font-size: 13px;
color: darkgrey
}
.button {
display: block;
margin: 0 auto;
width: 150px;
height: 50px;
margin-top: 20%;
border: 1px solid;
border-color: darkturquoise;
border-radius: 5px;
text-align: center;
line-height: 22px;
font-size: 16px;
font-family: sans-serif;
background-color: darkturquoise;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
<nav class="fixed-nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="box">
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui urna, pellentesque sed consectetur nec, maximus placerat mauris. Donec ultrices elementum augue, et rutrum est elementum sed. Duis sit amet varius eros. Sed nunc velit, congue a bibendum
ac, cursus eget velit. Maecenas bibendum eleifend arcu. Morbi at neque at ex interdum tempus. In vitae mauris urna. Integer sit amet suscipit libero. Cras ultricies tincidunt commodo. Nam vel leo rhoncus, facilisis orci a, tempus nisi. Suspendisse
porta est nunc, ut malesuada quam ultrices vitae. Aliquam diam ligula, auctor a elementum sit amet, convallis et nibh. In hac habitasse platea dictumst. Mauris semper vel ipsum eget convallis.</p>
</div><br>
Push Me
<div class="footer">Coded from scratch by Jacob in HTML & CSS.<br>All rights reserved ©</div>
One way to do this is to set the line-height equal to the height of the button.
.button {
display: block;
margin:0 auto;
width: 150px;
height: 50px;
line-height: 50px;
margin-top: 20%;
border: 1px solid;
border-color: darkturquoise;
border-radius: 5px;
text-align: center;
font-size: 16px;
font-family: sans-serif;
background-color: darkturquoise;
color: white;
}
Push Me
Related
This question already has answers here:
How to target a specific column or row in CSS Grid Layout?
(6 answers)
Closed 4 months ago.
I have created an adaptive card layout (check the Codepen link, the code below won't work here because I use SCSS)
The list of cards will be dynamic, they can be added and removed. How can I make it so that if there is only one card left, it will be centered horizontally instead of sticking to the left side of the screen?
//Root fonts and colors
$root-font-size: 16px;
html {
font-size: $root-font-size;
}
body {
background-color: #e5e5e5;
}
//breakpoints
$breakpoint-small: 576px;
$breakpoint-large: 992px;
$breakpoint-extralarge: 1200px;
.page-wrapper {
margin: 50px 250px;
}
#media only screen and (max-width: $breakpoint-extralarge) {
.page-wrapper {
margin: 50px 150px;
}
}
#media only screen and (max-width: $breakpoint-small) {
.page-wrapper {
margin: 50px 50px;
}
}
//Card
$card-title-fontsize: 2rem;
$card-subtitle-fontsize: 0.875rem;
$card-transition-speed: 0.3s;
$card-border-radius: 4px;
.cards-section {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 20px;
}
.card-main {
position: relative;
display: flex;
flex-direction: column;
flex-basis: calc(100% / 2 - 20px);
height: 200px;
border-radius: $card-border-radius;
background-color: white;
border: solid #e0e0e0 1px;
box-sizing: border-box;
overflow: hidden;
}
.card-main:hover {
transition: all $card-transition-speed;
box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
cursor: pointer;
.card-title {
opacity: 0;
transition: all $card-transition-speed;
}
.card-icon-1 {
width: 150px;
height: 150px;
opacity: 0;
transition: all $card-transition-speed;
}
.card-icon-2 {
width: 150px;
height: 150px;
opacity: 0.3;
transition: all $card-transition-speed;
}
.card-subtitle {
height: 50%;
opacity: 1;
transition: all $card-transition-speed;
}
}
.card-icon-1 {
width: 100px;
height: 100px;
background-color: darkgrey;
border-radius: 100%;
margin: 0 auto;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
opacity: 1;
transition: all $card-transition-speed;
}
.card-icon-2 {
width: 100px;
height: 100px;
background-color: #00ffb9;
border-radius: 100%;
margin: 0 auto;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: all $card-transition-speed;
}
.card-title {
font-size: $card-title-fontsize;
line-height: 2rem;
font-weight: 500;
letter-spacing: 0.0125em;
margin: 130px auto;
opacity: 1;
transition: all $card-transition-speed;
.text-container {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
//word-break: break-all;
overflow: hidden;
}
}
.card-subtitle {
position: absolute;
bottom: 0%;
//background-color: white;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(0, 255, 185, 0.3) 100%
);
height: 0%;
width: 100%;
font-size: $card-subtitle-fontsize;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.0178571429em;
box-sizing: border-box;
padding: 0px 20px;
opacity: 0;
transition: all $card-transition-speed;
.text-container {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
//word-break: break-all;
overflow: hidden;
}
}
#media only screen and (max-width: $breakpoint-extralarge) {
.card-main {
flex-basis: calc(100% / 1 - 20px);
}
}
<div class="page-wrapper">
<div class="cards-section">
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Nulla feugiat elit quis ante molestie fringilla. Donec vulputate lobortis convallis. Sed pellentesque massa nec ex semper blandit. Integer ornare dignissim velit, vel egestas nisl blandit at. Fusce eros lacus, auctor ac ligula vel, gravida pellentesque nibh. Morbi ut ante at elit pulvinar tempus. Ut dui est, aliquam ac lacus sed, pellentesque ultricies turpis. Donec non nisl volutpat, fringilla velit vel, accumsan mi. Phasellus vestibulum pulvinar facilisis. Nam auctor nisi lacus, id blandit lacus aliquet sit amet. </div>
</div>
</div>
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
</div>
</div>
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
</div>
</div>
<div class="card-main">
<div class="card-icon-1"></div>
<div class="card-icon-2"></div>
<div class="card-title">
<div class="text-container"> Card title </div>
</div>
<div class="card-subtitle">
<div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
</div>
</div>
</div>
</div>
You can add the following code :
.cards-section {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 20px;
justify-content: center; // Line to add if there is one element per line
}
.card-main:only-child {
margin: 0 auto;
}
To update only one child of a div, you can use the CSS property only-child.
See more in this doc : https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child
just add this in your class
.card-main{
margin: 0 auto;
}
I'm trying to create a DIV with a "2 columns" text.
So I'm using the column-xxx properties but the column-fill set with "auto" doesn't seem to behave as expected.
First column should be fullfilled before the second one instead of be equally balanced.
Even the example on w3schools doesn't behave as expected.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill
Here it is my html page :
<html>
<body>
<script src="js/scripts.js"></script>
<div class="livre">
<div class="cahier">
<div id="tranche_g">
</div>
<div id ="feuillet">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
</div>
<div id="tranche_d">
</div>
</div>
</div>
</body>
</html>
And here it is my CSS code :
/* CSS was previously reset with meyerweb code
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
body, html {height: 100%}
body{
background-color:Sienna;
}
.livre{
background-color: SaddleBrown;
max-width: 1000px;
margin: auto;
border-left: 2px solid black;
border-right: 2px solid black;
position:relative;
height: 100%;
}
.cahier{
background-color:NavajoWhite;
margin-left: 4%;
margin-right: 4%;
border-left: 1px solid grey;
border-right: 1px solid grey;
position: relative;
height: 100%;
width: 92%;
}
#tranche_g{
position:relative;
float:left;
width: 2%;
height: 100%;
}
#feuillet{
position:relative;
float: left;
width: 87%;
min-height: 100%;
border-left: 1px solid lightgrey;
border-right: 1px solid lightgrey;
background-color:Bisque;
padding-left: 1em;
padding-right: 1em;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 2em; /* Chrome, Safari, Opera */
-moz-column-gap: 2em; /* Firefox */
column-gap: 2em;
-webkit-column-rule: 1px solid; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid; /* Firefox */
column-rule: 1px solid;
-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
#tranche_d{
position:relative;
float: right;
width: 10%;
height: 100%;
}
Any idea why "auto" is not working properly with column-fill property ?
Set height:100% for #feuillet
body,
html {
height: 100%
}
body {
background-color: Sienna;
}
.livre {
background-color: SaddleBrown;
max-width: 1000px;
margin: auto;
border-left: 2px solid black;
border-right: 2px solid black;
position: relative;
height: 100%;
}
.cahier {
background-color: NavajoWhite;
margin-left: 4%;
margin-right: 4%;
border-left: 1px solid grey;
border-right: 1px solid grey;
position: relative;
height: 100%;
width: 92%;
}
#tranche_g {
position: relative;
float: left;
width: 2%;
height: 100%;
}
#feuillet {
position: relative;
float: left;
width: 87%;
min-height: 100%;
height: 100%;
border-left: 1px solid lightgrey;
border-right: 1px solid lightgrey;
background-color: Bisque;
padding-left: 1em;
padding-right: 1em;
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-gap: 2em;
/* Chrome, Safari, Opera */
-moz-column-gap: 2em;
/* Firefox */
column-gap: 2em;
-webkit-column-rule: 1px solid;
/* Chrome, Safari, Opera */
-moz-column-rule: 1px solid;
/* Firefox */
column-rule: 1px solid;
-webkit-column-fill: auto;
/* Chrome, Safari, Opera */
-moz-column-fill: auto;
/* Firefox */
column-fill: auto;
}
#tranche_d {
position: relative;
float: right;
width: 10%;
height: 100%;
}
<html>
<body>
<script src="js/scripts.js"></script>
<div class="livre">
<div class="cahier">
<div id="tranche_g">
</div>
<div id="feuillet">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec
metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. </p>
</div>
<div id="tranche_d">
</div>
</div>
</div>
</body>
</html>
Please can you try below code.
In below code i have just added this thing only
p{
-webkit-margin-after: 0em;
-webkit-margin-before: 0em;
}
Because this is default style of the browser so it's effecting the 1'st column.So that's why we setted 0em instead of 1em.
/* CSS was previously reset with meyerweb code
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
body, html {height: 100%}
body{
background-color:Sienna;
}
.livre{
background-color: SaddleBrown;
max-width: 1000px;
margin: auto;
border-left: 2px solid black;
border-right: 2px solid black;
position:relative;
height: 100%;
}
.cahier{
background-color:NavajoWhite;
margin-left: 4%;
margin-right: 4%;
border-left: 1px solid grey;
border-right: 1px solid grey;
position: relative;
height: 100%;
width: 92%;
}
#tranche_g{
position:relative;
float:left;
width: 2%;
height: 100%;
}
#feuillet{
position:relative;
float: left;
width: 87%;
min-height: 100%;
border-left: 1px solid lightgrey;
border-right: 1px solid lightgrey;
background-color:Bisque;
padding-left: 1em;
padding-right: 1em;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 2em; /* Chrome, Safari, Opera */
-moz-column-gap: 2em; /* Firefox */
column-gap: 2em;
-webkit-column-rule: 1px solid; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid; /* Firefox */
column-rule: 1px solid;
-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
#tranche_d{
position:relative;
float: right;
width: 10%;
height: 100%;
}
p{
-webkit-margin-after: 0em;
-webkit-margin-before: 0em;
}
<div class="livre">
<div class="cahier">
<div id="tranche_g">
</div>
<div id ="feuillet">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
</div>
<div id="tranche_d">
</div>
</div>
</div>
The z-index on .mainContentRightForm is not working. It should be floating above the orange bar, but it sitting behind it. I just can't figure out why, could use some expertise.
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
margin: auto;
max-width: 1040px;
overflow: hidden;
padding: 38px 50px 50px;
position: relative;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRightForm {
background: white;
padding: 24px;
position: absolute;
width: 340px;
z-index: 9999;
border: thin solid #F00;
right: 50px;
top: -154px;
}
<div id="container">
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapper">
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<div id="mainContent">
<div class="content-wrapper">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body
Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="mainContentRightForm">Please fill in the form below.Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia,
turpis ac hendrerit dictum, erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.
</p>
</div>
</div>
</div>
Setting z-index on a child element (#mainContentRightForm) won't layer it on top of its parents (#mainContent) sibling (#mastheadBar), for that to work the #mainContent need a z-index.
In this case, you don't need a z-index as it is the overflow: hidden on .content-wrapper and #mainContent that prevents the #mainContentRightForm to display uncut.
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
margin: auto;
max-width: 1040px;
overflow: hidden;
padding: 38px 50px 50px;
position: relative;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRightForm {
background: white;
padding: 24px;
position: absolute;
width: 340px;
z-index: 9999;
border: thin solid #F00;
right: 50px;
top: -154px;
}
<div id="container">
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapper">
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<div id="mainContent">
<div class="content-wrapper">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body
Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="mainContentRightForm">Please fill in the form below.Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia,
turpis ac hendrerit dictum, erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.
</p>
</div>
</div>
</div>
How can I make an easy popup on Wordpress without any plugins? This popup should be shown only for the first site visit. Any ideas, mates?
Maybe this:
codepen example
Html part in footer.php, css part in style.css and js part in main.js and that's it.
First download popup from here http://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html
Now paste this code where you want to show popup into your template
<style>
html {
font-family: "roboto", helvetica;
position: relative;
height: 100%;
font-size: 100%;
line-height: 1.5;
color: #444;
}
h2 {
margin: 1.75em 0 0;
font-size: 5vw;
}
h3 { font-size: 1.3em; }
.v-center {
height: 100vh;
width: 100%;
display: table;
position: relative;
text-align: center;
}
.v-center > div {
display: table-cell;
vertical-align: middle;
position: relative;
top: -10%;
}
.btn {
font-size: 3vmin;
padding: 0.75em 1.5em;
background-color: #fff;
border: 1px solid #bbb;
color: #333;
text-decoration: none;
display: inline;
border-radius: 4px;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.btn:hover {
background-color: #ddd;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.btn-small {
padding: .75em 1em;
font-size: 0.8em;
}
.modal-box {
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 4px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em) {
.modal-box { width: 70%; }
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }
.modal-box .modal-body { padding: 2em 1.5em; }
.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}
.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) !important;
}
a.close {
line-height: 1;
font-size: 1.5em;
position: absolute;
top: 5%;
right: 2%;
text-decoration: none;
color: #bbb;
}
a.close:hover {
color: #222;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
</style>
<section class="v-center">
<div>
<a class="js-open-modal btn" href="#" data-modal-id="popup1"> Pop Up One</a> </div>
</section>
<div id="popup1" class="modal-box">
<header>
<h3>Pop Up One</h3>
</header>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare mollis. Ut tempor augue mi, sed luctus neque luctus non. Vestibulum mollis tristique blandit. Aenean condimentum in leo ac feugiat. Sed posuere, est at eleifend suscipit, erat ante pretium turpis, eget semper ex risus nec dolor. Etiam pellentesque nulla neque, ut ullamcorper purus facilisis at. Nam imperdiet arcu felis, eu placerat risus dapibus sit amet. Praesent at justo at lectus scelerisque mollis. Mauris molestie mattis tellus ut facilisis. Sed vel ligula ornare, posuere velit ornare, consectetur erat.</p>
</div>
<footer> Close </footer>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var appendthis = ("<div class='modal-overlay js-modal-close'></div>");
$('a[data-modal-id]').click(function(e) {
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
//$(".js-modalbox").fadeIn(500);
var modalBox = $(this).attr('data-modal-id');
$('#'+modalBox).fadeIn($(this).data());
});
$(".js-modal-close, .modal-overlay").click(function() {
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
$(window).resize(function() {
$(".modal-box").css({
top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
left: ($(window).width() - $(".modal-box").outerWidth()) / 2
});
});
$(window).resize();
});
</script>
I am wondering how it is possible to place a div box (that I want to place an image in) so it appears over the top of another div in the center bottom.
I am trying the following code:
<html>
<body>
<style type="text/css">
.outer {
width: 350px;
height: 350px;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="outer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque, neque ut ultrices posuere, velit arcu aliquam dui, id rutrum justo leo nec purus. Donec aliquet justo a est iaculis id porta nulla pulvinar. Proin quis turpis vitae augue volutpat volutpat. Donec volutpat accumsan urna, id vulputate augue euismod eu. In vitae libero tortor. Integer lacinia, turpis vel egestas ornare, nisi libero tempus orci, non imperdiet erat nulla malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<div class="inner"></div>
</div>
</body>
</html>
A combination of absolute positioning and auto margins on the inner div will work. You also need to set position to relative for the outer div
.outer {
width: 350px;
height: 350px;
position: relative;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
right: 0; /* both left AND right must be set to 0 */
margin: 0 auto;
}
jsFiddle DEMO
.outer {
width: 350px;
height: 350px;
position:relative;
border: 1px #bbb solid;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left: 130px;
bottom:0;
}
DEMO
Try something like that: jsfiddle
It will help put you divs as you want.
.outer {
width: 350px;
height: 350px;
position: relative;
background-color: yellow;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
}
For clarity, I added a background to the outer div.
It's really easy if you have the exact coordinates of both divs.
In your exemple simply put
position: relative;
top: 250px;
left: 125px;
Or something like that and it'll do the trick.
#outer {
width: 350px;
height: 350px;
position: relative;
z-index: 1;
}
#inner {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
bottom: 0px;
left: 110px;
z-index: 2;
}