On my image I have a progress bar in svg that wraps around image. How ever when I try and center the image it does not go into the middle. The svg does but not the image.
Question: How is it possible to make the img and svg be in middle of column.
Codepen Example Here
HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="column-module">
<div class="profile-module-info">
<div class="row">
<div class="col-lg-3">
<div class="profile-avatar">
<div class="image">
<img data-src="holder.js/154x154" width="154" height="154" class="img-circle img-thumbnail" />
</div>
<svg class="mi-progressbar">
<circle id="circle" r="25%" cx="50%" cy="50%" stroke-width="10"></circle>
</svg>
</div>
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-3">
<div class="profile-statistics">
<ul class="list-unstyled">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #F0F0F0;
}
.container {
margin-top: 40px;
}
.column-module {
background: #fff none repeat scroll 0 0;
border-radius: 4px;
min-height: 100px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
margin-bottom: 20px;
}
.column-module .column-module-heading {
border-bottom: 1px solid #dedede;
padding: 20px;
}
.column-module .column-module-heading {
border-bottom: 1px solid #dedede;
padding: 20px;
}
.column-module .column-module-heading .column-module-title {
color: #1f2836;
font-size: 18px;
font-weight: bold;
}
.btn-group{
display: flex;
}
.profile-avatar {
border: 1px solid #bec0c2;
position: relative;
text-align: center;
margin-left: 2rem;
margin-top: -2rem;
margin-bottom: 2rem;
}
.profile-avatar svg {
position: relative;
transform: rotate(-90deg);
fill: none;
stroke: #337ab7;
stroke-dasharray: 0 0;
}
.profile-avatar img {
position: absolute;
top: 0;
left: 0;
text-align: center;
z-index: 1;
}
svg circle.progress-bar-success{
stroke:#5cb85c;
}
svg circle.progress-bar-info{
stroke:#5bc0de
}
svg circle.progress-bar-warning{
stroke:#f0ad4e;
}
svg circle.progress-bar-danger{
stroke:#d9534f;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
a {
cursor: pointer;
}
Try this:
.profile-avatar img {
position: absolute;
margin: auto;
left: 0;
right: 0;
text-align: center;
z-index: 1;
}
Codepen Fork
Related
I tried searching the web for various answers and tried everything that solved other people problem, but my CSS just doesn't want to cooperate.
Here you can find a JSFiddle where I recreated the issue: I would like the side navigation to be visible on the black sections too.
HTML
<div class="sidenav">
Section 1
Section 2
Section 3
</div>
<div class="content">
<div>
<p>Some text<p>
</div>
<div class="blk">
<p>Some text<p>
</div>
<div>
<p>Some text<p>
</div>
</div>
CSS
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #0D0D0D;
border-radius: 0 5px 5px 0;
color: #0D0D0D;
mix-blend-mode: difference;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
did you want something like this?
html {
scroll-behavior: smooth;
background: #fff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
background-color: #ffffff;
color: #0d0d0d;
}
/**********************************************/
.section {
width: 100vw;
max-width: 100%;
background-color: #ffffff;
text-align: center;
margin: 0;
padding: 15vh 0;
position: relative;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
/**********************************************/
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
mix-blend-mode: difference;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 0 5px 5px 0;
color: #fff;
background-color: #000;
}
.sidenav a:hover {
left: -2px;
}
.sidenav a.selected {
left: -2px;
color: #000;
background-color: #fff;
cursor: default;
}
<!doctype html>
<html>
<head></head>
<body>
<div class="sidenav">
Section 1
Another Section
Last One
</div>
<div class="content" onclick="closeMenu()">
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
</div>
</body>
</html>
you need it add mix-blend-mode to parent element like sidenav, than change backround, color and border-color in a
when opening a modal form with round corners I wish to remove the white background
This is my css for the modal form
.modal-msg {
.modal-dialog {
width: 25vw !important;
max-width: 35vw !important;
}
.form-msg {
box-shadow: -20px 20px 30px 0 rgba(0, 0, 0, 0.16);
background-image: linear-gradient(41deg, #40d2ea, #964ada 54%, #7d2abd 77%, #7c29bb 77%, #541b7e 91%);
color: #fff;
overflow: hidden;
border-radius: 120px;
background-radius: 120px;
.modal-header {
border: none;
padding-bottom: 0 !important;
justify-content: space-around;
.close-icon {
background-image: url('close.svg');
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
margin-left: 10px;
z-index: 100;
&:focus {
outline: none;
}
}
.header {
font-size: 33px;
font-weight: 600;
}
}
.modal-body {
padding: 1rem 12%;
.header {
font-size: 33px;
font-weight: 600;
direction: rtl;
margin-bottom: 1rem;
}
.form-control {
color: #112d60;
font-weight: 600;
&:focus {
border-color: #112d60 !important;
}
}
}
.background {
width: 100%;
position: relative;
.circle {
position: absolute;
}
}
}
}
I've tried setting the background to transparent and playing with background-clip I guess I'm using it wrong or in not in the right order
please advice,
cheers.
the html code using this is:
<div class="form-msg">
<div class="background">
<div class="circle left-circle"></div>
<div class="circle right-circle"></div>
</div>
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 text-center header">
<span class="inspire-text">Inspiration Msg</span>
</div>
</div>
</div>
</div>
I finally figured it out and overloaded modal-content like this
.modal-content{
background-color: transparent;
border:none !important;
}
How to make child element inherit parent's width using Bootstrap 4.
I need to fix download_resume block's width.
I'm using two primary js script's.
1.First function change img like hover effect
2.Second function adding sticky class to our empty_row block make it position fixed
Please look this code in wide screen devices or in codepen for understand the problem and what I want to realize
// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
avatarQuantumBreak.style.opacity = "0";
let hover = () => {
avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
let w = document.documentElement.clientWidth;
if (w > 940) {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
}
}
.other_block {
background-color:lightblue;
}
.main_wrap {
margin-top:15px;
background-color:pink;
height:600px;
}
.home_link , .main_text {
color: #fff;
font-size: 1.5em;
}
.left_block {
/*height: 60%;*/
padding: 30px 20px 20px;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
}
.info {
margin-top: 33px;
}
.text_uppercase {
text-transform: uppercase;
color: #fff;
font-size: 1.4em;
text-align: center;
margin-bottom: 15px;
}
.text_muted {
text-align: center;
opacity: 0.65;
}
.social_links {
display: flex;
justify-content: center;
}
.social_links li {
list-style-type: none;
margin: 5px 12px;
vertical-align: middle;
}
.social_links li a {
color: #fff;
cursor: pointer;
transition: all .2s ease-out;
background-color: transparent;
}
.social_links li a i {
font-size: 1.25em;
transition: all .2s ease-out;
}
.social_links li a i:hover {
opacity: 0.65;
}
.download_resume {
position:absolute;
width: 100%;
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.text_widget {
vertical-align: middle;
}
.text_widget a {
background-color: #DEC746 !important;
border-color: #DEC746 !important;
color: #000 !important;
font-size: 15px !important;
padding: 12px 30px !important;
border-radius: 35px !important;
}
center {
display: block;
text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
font-weight: 700 !important;
}
.sticky {
position: fixed !important;
top: 2%;
width: 285px;
}
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
<div class="avatar" onmouseover="hover();" onmouseout="normal();">
<span class="avatar_simple">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
</span>
<span class="avatar_quantum_break">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
</span>
</div>
<div class="info">
<h2 class="text_uppercase">Sergio Ramos</h2>
<p class="text_muted">Front End Developer</p>
<ul class="social_links">
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<div class="download_resume">
<div class="text_widget">
<center>
Download CV
</center>
</div>
</div>
</div></div>
<div class="col-lg-8 col-xl-8 other_block">
<div class="main_wrap">text</div>
</div>
</div>
</div>
Setting the width to inherit isn't the best solution. When you don't have "sticky" on it does things you don't expect.
I've added an extra div to wrap your top section in question. You're really only concerned about the padding staying for that top section with your picture when you move from sticky to non-sticky. This separates it from the resume download button. Then you don't need to specify any width on that div, as it will work like it is supposed to.
HTML (I've added the "left-block-padding" div)
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
<div class="left-block-padding">
<div class="avatar" onmouseover="hover();" onmouseout="normal();">
<span class="avatar_simple">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
</span>
<span class="avatar_quantum_break">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
</span>
</div>
<div class="info">
<h2 class="text_uppercase">Sergio Ramos</h2>
<p class="text_muted">Front End Developer</p>
<ul class="social_links">
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="download_resume">
<div class="text_widget">
<center>
Download CV
</center>
</div>
</div>
</div></div>
<div class="col-lg-8 col-xl-8 other_block">
<div class="main_wrap">text</div>
</div>
</div>
</div>
CSS (added .left-block-padding and removed position:absolute; and width: 100%; from .download_resume
.other_block {
background-color:lightblue;
}
.main_wrap {
margin-top:15px;
background-color:pink;
height:600px;
}
.home_link , .main_text {
color: #fff;
font-size: 1.5em;
}
.left_block {
/*height: 60%;*/
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
}
.info {
margin-top: 33px;
}
.text_uppercase {
text-transform: uppercase;
color: #fff;
font-size: 1.4em;
text-align: center;
margin-bottom: 15px;
}
.text_muted {
text-align: center;
opacity: 0.65;
}
.social_links {
display: flex;
justify-content: center;
}
.social_links li {
list-style-type: none;
margin: 5px 12px;
vertical-align: middle;
}
.social_links li a {
color: #fff;
cursor: pointer;
transition: all .2s ease-out;
background-color: transparent;
}
.social_links li a i {
font-size: 1.25em;
transition: all .2s ease-out;
}
.social_links li a i:hover {
opacity: 0.65;
}
.download_resume {
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.text_widget {
vertical-align: middle;
}
.text_widget a {
background-color: #DEC746 !important;
border-color: #DEC746 !important;
color: #000 !important;
font-size: 15px !important;
padding: 12px 30px !important;
border-radius: 35px !important;
}
center {
display: block;
text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
font-weight: 700 !important;
}
.sticky {
position: fixed !important;
top: 2%;
width: 285px;
}
.left-block-padding {
padding: 30px 20px 20px;
}
JS (unchanged)
// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
avatarQuantumBreak.style.opacity = "0";
let hover = () => {
avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
let w = document.documentElement.clientWidth;
if (w > 940) {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
}
}
https://codepen.io/adprocas/pen/QmLjJM
Use width:inherit to inherit parent element's width
.download_resume {
position:absolute;
width: inherit;
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
Code sample - https://codepen.io/nagasai/pen/xWKGvW
How do I add a square onto a border between a div and an image? The square will be position on the left or the right depending on the position of the text (if the text is aligned right, the square will be bottom left; if the text is aligned left, the square will be top right).
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder {
border-bottom: 5px solid #000;
}
.topborder {
border-top: 5px solid #000;
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
You can achieve this using pseudoelements.
You can adjust the position as you need. I've used calc() here to take into account the width of the border.
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder:after,
.topborder:before {
content: '';
width: 3em;
height: 3em;
background: black;
transform: rotate(45deg);
position: absolute;
}
.bottomborder {
border-bottom: 5px solid #000;
position: relative;
}
.bottomborder:after {
left: 3em;
bottom: calc(-1.5em - 3px);
}
.topborder {
border-top: 5px solid #000;
position: relative;
}
.topborder:before {
right: 3em;
top: calc(-1.5em - 3px);
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
I am using the flexbox to center align the items inside (as nothing else seems to work). Although the bootstrap responsive-embed seems to completely disappear and i have no idea why. I can't not use position: relative on the embed as this stop it being responsive. Here is the code for it...
.embed-responsive {
/*position: initial;*/ /* if set to initial or anything other than relative is re-appears but is no longer responsive */
}
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small{
color: white;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="title-area">
<div class="col-md-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
JSFiddle
Taking a look to Grid system you may insert your "col-md-6" inside two rows like in the following snipppet:
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small{
color: gray;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="title-area">
<div class="row">
<div class="col-xs-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-xs-6">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
</div>
Add a div around the embed-responsive div so that the former can flow in the flex div and the latter can have position relative needed by the embed-responsive-item. Give the new div a flex-grow style of 1 so it sizes.
HTML:
<div class="title-area">
<div class="col-md-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-md-6">
<div style="flex-grow: 1;">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
</div>
Styles:
.embed-responsive {
// position: initial;
/* if set to initial or anything other than relative is re-appears but is no longer responsive */
}
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small {
color: white;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
https://jsfiddle.net/rz5cmpz3/2/