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;
}
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 have to make such contruction like this one on the picture. There is a bubble with some fancy ending and I don't know, how to make this half transparent circle inside it.
How can I do that?
I have some image as a background.
.bubble {
background-color: #34bc74;
border-top-right-radius: 0;
border-radius: 10px;
line-height: 18px;
margin: 100px 0 0 0;
padding: 15px 65px 25px 15px;
position: relative;
width: 200px;
}
.circle {
background-color: #34bc74;
border-bottom-right-radius: 140px;
border-top-right-radius: 140px;
border-left-color: transparent;
width: 70px;
height: 140px;
position: absolute;
z-index: 1;
top: -70px;
right: -70px;
overflow: hidden;
}
.circle:after {
height: 70px;
width: 35px;
left: -35px;
z-index: 2;
content: '';
border-radius: 70px;
position: absolute;
// border: 35px solid $green;
// box-shadow: 0px 300px 0px 300px #448CCB;
}
<div class="bubble">
Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
<div class="circle"></div>
</div>
You could try create the shape using svg masking.
Here's some more info from MDN
(poor) example...
body {
background: url(https://unsplash.it/1000x1000);
}
.bubble {
background-color: #34bc74;
border-top-right-radius: 0;
border-radius: 10px;
line-height: 18px;
margin: 100px 0 0 0;
padding: 15px 65px 25px 15px;
position: relative;
width: 200px;
}
.bubble svg {
position: absolute;
right: -4em;
top: -1em;
}
<div class="bubble">
Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
<svg width="100" height="100">
<defs>
<mask id="inner-circle">
<rect width="100%" height="100%" fill="white"/>
<circle r="28" cx="40" cy="20" fill="black"/>
</mask>
</defs>
<circle id="curve" r="50" cx="50" cy="50" fill="#34bc74" mask="url(#inner-circle)" />
</svg>
</div>
Using a combination of pseudo-elements and box-shadow properties you can get close to the intended result.
Experiment and adjust height, width, and box-shadow values as required.
.bubble {
background-color: #34bc74;
border-top-right-radius: 0;
border-radius: 10px;
line-height: 18px;
margin: 100px 0 0 0;
padding: 15px 65px 25px 15px;
position: relative;
width: 200px;
}
.circle {
width: 155px;
height: 140px;
border-radius: 100%;
position: absolute;
top: -70px;
right: -45px;
overflow: hidden;
z-index: -1;
}
.circle:after {
content: "";
width: 112px;
height: 87px;
border-radius: 100%;
box-shadow: 55px -15px 0 0 #34bc74;
position: absolute;
z-index: 9;
overflow: hidden;
}
.circle:before {
content: "";
width: 112px;
height: 88px;
border-radius: 100%;
box-shadow: 72px 52px 0 0 #34bc74;
position: absolute;
z-index: 9;
overflow: hidden;
}
<div class="bubble">
Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
<div class="circle"></div>
</div>
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>
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>