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>
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;
}
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>
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
I'm trying to create a box with a left arrow/triangle which has a opaque border surrounding it. I'm using CSS3 in order to avoid using images. The box will contain dynamic content so the height will likely vary. In the image attached you can see my progress on the left and what I am trying to achieve on the right.
Here is a JSFiddle of what I have so far.
As you can see there are 2 problems:
1) Due to the opacity you can see the border surrounding the triangle overlaps the border surrounding the box. This needs to be avoided.
2) I need the arrow/triangle to be rather large, which means the right side of the arrow/triangle is equally as large and overlaps the box thus obscuring content, you can see this in the JSFiddle link and image attached.
Need some help and pointers! Thanks in advance.
.map_infobox {
margin: 30px 0 0 30px;
position: relative;
background: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 250px;
border-opacity: 0.3;
border: 5px solid rgba(0, 0, 0, .3);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.map_infobox:before{
content: "";
position: absolute;
top: 50%;
left:-21px;
z-index: 1;
height:30px;
width:30px;
margin-top: -15px;
background:#FFF;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-opacity: 0.3;
border-left: 5px solid rgba(0, 0, 0, .3);
border-bottom: 5px solid rgba(0, 0, 0, .3);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
<div class="map_infobox">
<div class="title">
Title goes here
</div>
<div class="copy">
Nam nibh dolor, luctus eget lorem tincidunt, egestas scelerisque erat? Morbi consequat auctor ipsum, eu ultricies nisl aliquam venenatis. Fusce feugiat posuere lectus at dictum. Integer sagittis massa justo, sed pretium ante hendrerit eget.
</div>
</div>
Here is my best try:
CSS
.map_infobox {
margin: 30px 0 0 30px;
position: relative;
background: #FFF;
border-radius: 10px;
width: 250px;
height: 250px;
border-opacity: 0.3;
border: 5px solid rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.map_infobox:before{
content: "";
position: absolute;
top: 50%;
left: -35px;
z-index: 1;
height:60px;
width:30px;
margin-top: -15px;
background: linear-gradient(-45deg, white 17px, rgba(0,0,0,0.2) 17px, rgba(0,0,0,0.2) 21px, transparent 21px), linear-gradient(225deg, white 17px, rgba(0,0,0,0.2) 17px, rgba(0,0,0,0.2) 21px, transparent 21px);
background-position: left 0px, right bottom;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.map_infobox:after{
content: "";
position: absolute;
top: 50%;
left: -35px;
z-index: 1;
height: 48px;
width:30px;
margin-top: -14px;
border-right: solid 5px white;
border-top: solid 5px transparent;
border-bottom: solid 5px transparent;
}
fiddle
You could just adjust the z-index on the parent and in the :before.
It overlaps the borders but not the content.
http://jsfiddle.net/wFU3W/2/
.map_infobox {z-index:1;}
.map_infobox:before {z-index:-1;}
I know this question is old but I felt I should add my method which includes the use of fontAwesome.
body {
background: #ccc;
}
.box {
width: 50%;
height: auto;
border: solid 2px white; /* Change the border-color to what you want */
border-radius: 10px;
margin: 20px 0 0 100px;
position: relative;
padding: 20px;
background: green;
color: white;
}
.box:after,
.box:before {
content: "\f0d9";
font-family: fontAwesome;
width: 60px;
height: 60px;
font-size: 72px;
color: owhite;
position: absolute;
top: 35%;
left: -24px; /* Projects the arrow tot he direction that we want */
}
.box:after {
left: -21px; /* Helps create the border of the arrow */
color: green; /* Same Background as the parent */
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<h2>Your title goes here</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim libero ac rutrum ultricies. Aliquam fermentum vestibulum lacus et interdum. Donec luctus libero vitae lacinia sagittis. Sed sit amet elementum nisi. Etiam mauris velit, imperdiet
nec ex a, ullamcorper lobortis dui. Donec ut est augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur suscipit ipsum quis est commodo congue. Sed fermentum ligula leo, eu iaculis dui tristique
in. Aenean id felis et ligula semper faucibus. Curabitur at lacinia quam, id porta enim.
</div>
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;
}