I have the following snippet
.striped {
height : 30px;
margin-right: 1px !important;
background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important;
}
.content{
height : 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color:#363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
}
.rightpadding{
margin-right: 1px !important;
}
.top-buffer {
margin-top:13px;
overflow: hidden;
}
.bottom {
vertical-align: bottom;
bottom: 0 !important;
}
.nolrpadding{
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box{
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5">
<!-- <div class="row rightpadding"> -->
<div class="row striped"></div>
<div class="row rightpadding">
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
</div>
<div class="row striped bottom"></div>
<!-- </div> -->
</div>
<div class="col-xs-7">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
the problem that I have is the bottom alignments in the two columns, as shown in the image
I have seen fixes for column vertical alignments but it seems that they do not work here, so how can I align the bottom of the three rows within the first column with the next column?
thanks in advance,
es.
UPDATE
I would like it to look something like this with the bottom strip row being vertically aligned with the bottom of the red box.
managed to do what you wanted with just a little jq . hope you don't mind
check here jsfiddle
css code added : .mymedia { height:100%;}
jq code added :
var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)
result = height of the right col - the heights of both striped rows ( which are equal i presume )
then add that height to the middle row ( .row.rightpadding )
let me know if it helps.
You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are "snapped" to the height of the row.
Try the snippet below.
.striped {
height: 30px;
background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important;
position: absolute;
left: 0;
right: 15px;
}
.content {
height: 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color: #363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
top: 30px;
bottom: 30px;
left: 0;
right: 15px;
position: absolute;
margin-top: 0 !important;
}
.top-buffer {
margin-top: 13px;
overflow: hidden;
}
.bottom {
bottom: 0 !important;
}
.nolrpadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box {
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row {
overflow: hidden;
position: relative;
}
.myLeftCol {
bottom: 0;
padding-left: 0 !important;
position: absolute !important;
top: 0;
}
.myRightCol {
margin-left: 41.6667%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5 myLeftCol">
<div class="striped"></div>
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
<div class="striped bottom"></div>
</div>
<div class="col-xs-7 myRightCol">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
Wrap everything in a <div>, and set the childs to have min-height: 100%
Related
I am working on app, which used to create some reports.
App allows user to choose Page size from A3, A4 and letter.
I'm Using #media query for Printing. I found the mysterious whitespace at bottom of the page. I want to get ride of that.
Here is my Snippets.
Index.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>report</title>
<link rel="stylesheet" type="text/css" href="/js/bootstrap.min.css">
<script src="/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/js/style.css">
<style>
#media print {
#page {
margin: 0 !important;
size: A3 portrait;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.page {
margin: 0 !important;
margin-bottom: 0 !important;
page-break-after: always !important;
}
}
</style>
</head>
<body>
<div class="report">
<div class="page cover A3 portrait">
<div>
<div class="coverpage">
<div class="artA">
<div class="logo"></div>
</div>
<div class="infoBox">
<div class="artB"></div>
<div class="elements">
<div class="title">
<span>Report Name</span>
</div>
<div class="createdBy">
<span>John Doe</span>
</div>
<div class="createdDate">
<span>26-08-19 22.16.55.348 IST</span>
</div>
<div class="dateRange">
<p>Date Range: <span>now-2y</span> <span>now</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="page A3 potrait ">
<div class="pageHeader">
<div class="headerContent"><span>Page Header</span></div>
</div>
<div style="height: 100%;">
<div cdkdroplist="" class="col-md-12 layout gridster cdk-drop-list fit" id="cdk-drop-list-16"
style="padding: 10px 20px;">
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(0px, 0px, 0px); width: 536px; height: 490.667px;"
id="BarChart_0_0">
<div class="chartHeading" style="cursor:pointer;" id="BarChart_0_0_title"> BarChart_0_0
</div>
<div class="svg-container" id="BarChart_0_0_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(546px, 0px, 0px); width: 536px; height: 490.667px; margin-right: 20px;"
id="HorizontalBarChart_0_1">
<div class="chartHeading" style="cursor:pointer;" id="HorizontalBarChart_0_1_title">
HorizontalBarChart_0_1 </div>
<div class="svg-container" id="HorizontalBarChart_0_1_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(0px, 1001px, 0px); width: 536px; height: 490.667px; margin-bottom: 10px;"
id="PieChart_0_2">
<div class="chartHeading" style="cursor:pointer;" id="PieChart_0_2_title"> PieChart_0_2
</div>
<div class="svg-container" id="PieChart_0_2_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(546px, 501px, 0px); width: 536px; height: 490.667px; margin-right: 20px;"
id="RingChart_0_3">
<div class="chartHeading" style="cursor:pointer;" id="RingChart_0_3_title"> RingChart_0_3
</div>
<div class="svg-container" id="RingChart_0_3_cc"></div>
</div>
<div class=""
style="transform: translate3d(0px, 1001px, 0px); width: 536px; height: 490.667px; margin-bottom: 10px;">
</div>
</div>
</div>
<div class="pageFooter">
<div class="footerContent"><span></span> <span> Page Footer</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.A4 {
width: 210mm !important;
height: 297mm !important;
}
.A4.landscape {
width: 297mm !important;
height: 210mm !important;
}
.A3 {
width: 297mm !important;
height: 420mm !important;
}
.A3.landscape {
width: 420mm !important;
height: 297mm !important;
}
.letter {
width: 216mm !important;
height: 279mm !important;
}
.letter.landscape {
width: 279mm !important;
height: 216mm !important;
}
.bodyCanvas{
height: 100%;
}
.page{
margin:20px auto;
position: relative;
width:fit-content;
display:flex;
flex-direction: column;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
.pageHeader{
background: #324156;
margin-top: 0px !important;
height: 40px;
top: 0;
width: 100%;
}
.pageFooter{
height:40px;
background: #324156;
bottom: 0;
}
.headerContent {
padding:10px;
}
.footerContent {
padding: 5px;
}
Whitespace after the footer div with Print as shown in attached image.
You can emulate print mode by clicking opening DevTools main menu, picking More Tools > Rendering, and then setting it to "print". Then you'll be able to use the regular element inspector to click on that padding (see this answer for visual guide).
[testing the provided HTML+CSS alone, I do not get the demonstrated padding]
I am working with bootstrap 4. I have added a row with the class name sponsor-slider-row, also giving bootstrap call called container-fluid but nothing happen to like my row did not take the full width.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="sponsor-slider-row container-fluid">
<div class="row">
<div class="col-sm-12">
<section class="section-sponsor-slider">
<h2 class="section-header">Sponsor Slider</h2>
<div class="autoplay slider">
<div>
<img src="https://via.placeholder.com/150">
</div>
<div>
<img src="https://via.placeholder.com/150">
</div>
<div>
<img src="https://via.placeholder.com/150">
</div>
<div>
<img src="https://via.placeholder.com/150">
</div>
<div>
<img src="https://via.placeholder.com/150">
</div>
<div>
<img src="https://via.placeholder.com/150">
</div>
</div>
</section>
</div>
</div>
</div>
You do indeed have full width but your image is not sized to that, it is 150X150. I added some garish borders to show this.
Note here I force a width on the images in the second group.
.testme {
border: solid 4px lime;
}
.myimgc,
.myimgc2 {
border: solid 4px red;
}
.myimgc img,
.myimgc2 img {
border: solid 4px cyan;
}
.myimgc img {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-sm-12 sponsor-slider-row container-fluid">
<div class="row">
<div class="col-sm-12 testme">
<section class="section-sponsor-slider">
<h2 class="section-header">Sponsor Slider</h2>
<div class="autoplay slider">
<div class="myimgc2">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc2">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc2">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc2">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc2">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc2">
<img src="https://via.placeholder.com/150">
</div>
</div>
</section>
</div>
</div>
</div>
<div class="col-sm-12 sponsor-slider-row container-fluid">
<div class="row">
<div class="col-sm-12 testme">
<section class="section-sponsor-slider">
<h2 class="section-header">Sponsor Slider</h2>
<div class="autoplay slider">
<div class="myimgc">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc">
<img src="https://via.placeholder.com/150">
</div>
<div class="myimgc">
<img src="https://via.placeholder.com/150">
</div>
</div>
</section>
</div>
</div>
</div>
HTML:
body {
max-width: 1200px;
margin: 0 auto;
background: url(../images/bg-pattern.png) repeat 50% 0
}
.section-header {
position: absolute;
left: -999.9rem
}
.site-header {
position: relative;
z-index: 3;
text-align: center
}
.site-header>div {
position: relative;
max-width: 1200px;
margin: 0 auto
}
.site-header .site-title {
margin: 0;
padding: 0.5rem 0;
text-transform: uppercase
}
.site-header .site-title a {
display: block;
width: 30.6rem;
height: 6rem;
text-indent: -999.9rem;
background: url(../images/advico-logo.png) no-repeat 0 0
}
.site-header .social-links {
position: absolute;
right: 1rem;
top: 2.5rem
}
.site-header .social-links a {
display: inline-block;
width: 2rem;
font-size: 20px;
padding: 7px;
line-height: 1;
text-decoration: none;
color: #000;
transition: 0.3s
}
.site-header .social-links a:hover {
color: #fff;
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
.site-header .fa-facebook {
border-radius: 100%;
color: #fff
}
.site-header .fa-facebook:hover {
background: #3b5998
}
.site-header .fa-twitter {
border-radius: 100%;
color: #fff
}
.site-header .fa-twitter:hover {
background: #55acee
}
.dropnav {
font-family: "montserrat", arial
}
.dropnav .navbar:before {
content: '';
position: absolute;
left: -9999px;
right: -9999px;
top: 0;
bottom: 0;
display: block;
background: #1a3364
}
.dropnav .navbar-brand {
display: none
}
.dropnav .navbar-nav .nav-item a {
position: relative;
padding: 0 1.5rem;
font-size: 1rem;
font-weight: 700;
color: #fff
}
.dropnav .navbar-nav .nav-item a:hover {
color: #ccc
}
.dropnav .navbar-nav .nav-item.active a {
color: #fff
}
.dropnav .navbar-toggler {
z-index: 4;
color: #d4882b;
background: #d68224
}
.dropnav .form-control,
.dropnav .btn-outline-success {
display: none
}
.section-carousel .carousel-inner .carousel-item .carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, 0.5)
}
.section-carousel .carousel-inner .carousel-control .prev,
.section-carousel .carousel-inner .carousel-control .next {
color: #000
}
.landing-row.carousel-row .carousel-inner {
display: block;
text-align: center;
margin: 0 auto
}
.landing-row.carousel-row .carousel-inner .carousel-item {
max-height: 40rem
}
.landing-row.carousel-row .carousel-inner .carousel-item img {
width: 100%
}
.landing-row.main-matter-row {
padding: 3rem 0.5rem;
background: #eee
}
.sponsor-slider-row {
padding: 30px 0;
background: #db8323
}
.section-main-matter .section-header {
position: static;
font-size: 1.8rem;
font-family: 'montserrat', arial;
font-weight: 700;
text-transform: uppercase;
color: #000
}
.section-main-matter .company-intro {
font-family: 'montserrat', arial;
font-size: 0.9rem;
font-weight: 200
}
.section-advertisement .map-sq-banner {
text-align: center
}
.section-advertisement .map-sq-banner img {
display: block;
width: 100%
}
.site-footer {
height: 100px;
font-family: "montserrat", arial;
text-align: center;
background: #1a3364
}
.site-footer>div {
max-width: 1200px;
margin: 0 auto
}
.site-footer .footer-text {
padding: 40px 0 0;
font-size: 14px;
font-weight: 700;
color: #fff
}
.site-footer .footer-text span {
display: block;
font-size: 14px;
font-weight: 200
}
.section-sponsor-slider {
display: block;
text-align: center;
margin: 0 auto;
padding: 0
}
.section-sponsor-slider .slick-slide img {
display: block;
width: 100%;
padding: 0 10px;
box-sizing: border-box
}
.section-sponsor-slider .slick-next {
color: #000
}
<head>
<title>Responsive Athletic</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="css/styles.css?">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />
</head>
<div class="body-container">
<body>
<div class="sponsor-slider-row container-fluid">
<div class="row">
<div class="col-sm-12">
<section class="section-sponsor-slider">
<h2 class="section-header">Sponsor Slider</h2>
<div class="autoplay slider">
<div>
<img src="images/sponsor-btn.png">
</div>
<div>
<img src="images/sponsor-btn.png">
</div>
<div>
<img src="images/sponsor-btn.png">
</div>
<div>
<img src="images/sponsor-btn.png">
</div>
<div>
<img src="images/sponsor-btn.png">
</div>
<div>
<img src="images/sponsor-btn.png">
</div>
</div>
</section>
</div>
</div>
</div>
<script type="text/javascript">
$('.autoplay').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
</script>
</body>
Hi I've designed the user profile page. Here, in my page the "upload photo" text & the "My Response Rate" text are in one over the other. I tried clear the float & i tried some other method but i couldn't fix the issue. still the issue is there. Please help me to fix this. Thanks in advance.
.dashboard-profile-wrp {
margin: 25px 0px;
border: 1px solid #b8c0c5;
padding: 1.429rem;
border-radius: 1px;
}
.dashboard-profile-wrp h3 {
margin-top: 0px;
margin-bottom: 25px;
border-bottom: 1px solid #b8c0c5;
}
.dashboard-profile-img {
height: 7.143rem;
width: 7.143rem;
float: left;
}
.dashboard-profile-img-content {
margin: auto;
margin-left: 1.429rem;
display: inline-block;
}
.dashboard-profile-img img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
.dashboard-response {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="dashboard-profile-wrp">
<h3>Your Profile</h3>
<div class="dashboard-profile-img">
<img avatar="Prabu Perumal" width="120" height="120">
<p>Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</p>
</div>
<div class="dashboard-response">
<p>My Response Rate</p>
<p>40%</p>
<p>My Avg. response Time</p>
<p>2 hours%</p>
<p><b>Contact Info</b> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
remove the height from .dashboard-profile-img
Then remove the width on the <img> element
.dashboard-profile-wrp {
margin: 25px 0px;
border: 1px solid #b8c0c5;
padding: 1.429rem;
border-radius: 1px;
}
.dashboard-profile-wrp h3 {
margin-top: 0px;
margin-bottom: 25px;
border-bottom: 1px solid #b8c0c5;
}
.dashboard-profile-img {
width: 7.143rem;
float: left;
}
.dashboard-profile-img-content {
margin: auto;
margin-left: 1.429rem;
display: inline-block;
}
.dashboard-profile-img img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
.dashboard-response {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="dashboard-profile-wrp">
<h3>Your Profile</h3>
<div class="dashboard-profile-img">
<img avatar="Prabu Perumal" width="120">
<p>Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</p>
</div>
<div class="dashboard-response">
<p>My Response Rate</p>
<p>40%</p>
<p>My Avg. response Time</p>
<p>2 hours%</p>
<p><b>Contact Info</b> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
There are many approaches to this problem
try givving each division ie. div a margin in the top and in the bottom
for instance:
<div id=1></div>
<div id=2></div>
<div id=3></div>
<script type=text/css>
#1{
margin:5px 5px 5px 5px ;
}
#2{
margin:5px 5px 5px 5px ;
}
#3{
margin:5px 5px 5px 5px ;
}
</script>
in .dashboard-response class, remove the clear: float and introduce the CSS flexbox. Also, have the flex-direction of this class as 'column'
.dashboard-profile-wrp {
margin: 25px 0px;
border: 1px solid #b8c0c5;
padding: 1.429rem;
border-radius: 1px;
}
.dashboard-profile-wrp h3 {
margin-top: 0px;
margin-bottom: 25px;
border-bottom: 1px solid #b8c0c5;
}
.dashboard-profile-img {
height: 7.143rem;
width: 7.143rem;
float: left;
}
.dashboard-profile-img-content {
margin: auto;
margin-left: 1.429rem;
display: inline-block;
}
.dashboard-profile-img img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
.dashboard-response {
margin-top: 30px;
display: flex;
flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="dashboard-profile-wrp">
<h3>Your Profile</h3>
<div class="dashboard-profile-img">
<img avatar="Prabu Perumal" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAFbklEQVR4Xu2dzYsbdRjHvzNhTDeb7ctitAhFKYJSLYroioIH8eILlorF3hQ9eKmgB3vpUQ966D8gCl56K1WpbRV1QdGWFqr20mqVSiuspVZajSaZTSYZmSWBYmcmk3k2mSeP373uPMP3+XzyzEt+k8T5+735EPwzS8ChYLNuVxqjYNt+Kdi4XwqmYOsEjPfHczAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLy9sU9w+cE3Ubp5AWGvK0fZawNBC6F/BaH/B7pXTiO4cATo/JN739rz5W6sXzh2wZVnvoI7f7c0Z2p96F9Gd+lL+EdfH1m29nxScOMXvO1zuLX7pDmz1YfBykT7iy9m2x5ARXm+zI0kbGhLcL/J6PDdOrwNvT/PDuUzUcE58g1tYMgGJgVHPUeSmx8+irD5WyqCIgSPko+CUwh0L51A69CTKgVHobLkm1rBYWMJrcWX4M5tGtpD2K7D8aqAV4U7U4O7djOctZtRqt0LlGZS6kMsH9uNzg/vJ26TNMFa8g2Fo/UQHdbPobF/QZbfq6LyxAG4tfsT9xPWf0Fj/wOjC1aSTwZoAt90lzghqwGw3/3MUx+jtPHheBZhD61PtqN78Wjs/7Xno+CIgFfF7I4TcCobY3l0zu7D8jevFiZYko+C+wTKC2/A27orlkd0u9Q8ED/hk5jgKFTefBTcJ+CsuRGzz50EvLnrmKSd7yclOG8+Ch4Q8Kqo7jwFlDeoFBwdpvPko+DBBFduwezO7wDXUynYyZmPgq+Z4OgQ7aypqRS8cqGVIx8FDyZ47lbM7jgOuDeoFOzkzEfBg6voh96Ct+XlWB7BhcPwv3i+uNuk6Co6Zz4Kjn6XIOUKGgjR/vZttE/tLUywJB8FR2u6zx6Du/6OeBZBA41oVal+rjDBknz/a8He1ldQvue12FujAZjg/CH4iy8kchrnffBq5JtewY0lNA8+DnfDnZl6cMrr4FY3wZm7DaX5u+Cuux0or0+v7bbQ/Oix1IX/tNUkDfkywUnZyOyCf9Rz5/Q7WD6+J5VRUQv+WfNRcAKB7sWv0TqyfSifogRnzTe0gSEbmJzg4PzBzA/eFSF4lHwUfA2B6Dms9vd70TnzbmYukxScJ1/mRhI2nP4JbtfR++tnBL9+lnivmwZp7IKF+aZXcNdH9/eTsYsDcU05bglh4ANBE73mJfSu/ojOT/tGftD9v/tOFKwk39QKTluElzY1Sn2SYC35RukldjDG/fOy43wjQdp8VK89n7THws7Bq/JUpbR7CpYT1D4h2vNJDXCCEz58puUIQ8FCApxg4wApmIKFBIot5zmY52DZK1D7IVB7Phl9Ix8+k0CgYAm9KXgjgYIpWEig2HJeZPEiS/YK1H4I1J5PRp8XWVxNkr6CKk9/Cvem678jo3f1DJofPCLdvbheez5pg2M/B0sDsl5GgIJl/NRXU7B6RbKAFCzjp76agtUrkgWkYBk/9dUUrF6RLCAFy/ipr6Zg9YpkASlYxk99NQWrVyQLSMEyfuqrKVi9IllACpbxU19NweoVyQJSsIyf+moKVq9IFpCCZfzUV1OwekWygBQs46e+moLVK5IFpGAZP/XVFKxekSwgBcv4qa+mYPWKZAEpWMZPfTUFq1ckC0jBMn7qqylYvSJZQAqW8VNfTcHqFckCUrCMn/pqClavSBaQgmX81FdTsHpFsoAULOOnvpqC1SuSBaRgGT/11RSsXpEsIAXL+Kmv/hclj3u10kc1HgAAAABJRU5ErkJggg==" width="120" height="120">
<p>Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</p>
</div>
<div class="dashboard-response">
<p>My Response Rate</p>
<p>40%</p>
<p>My Avg. response Time</p>
<p>2 hours%</p>
<p><b>Contact Info</b> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
Make the font size of "Upload Photo" content smaller and make it positioned absolute.
Not the solution that is necessary as it changes the design a bit. The "upload Photo" link looks closer to photo and gives a better sense.
You can also make it appear just on hover of image.
.dashboard-profile-wrp {
margin: 25px 0px;
border: 1px solid #b8c0c5;
padding: 1.429rem;
border-radius: 1px;
}
.dashboard-profile-wrp h3 {
margin-top: 0px;
margin-bottom: 25px;
border-bottom: 1px solid #b8c0c5;
}
.dashboard-profile-img {
height: 7.143rem;
width: 7.143rem;
float: left;
position: relative;
}
.dashboard-profile-img-content {
margin: auto;
margin-left: 1.429rem;
display: inline-block;
}
.dashboard-profile-img img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
.dashboard-profile-img .upload{
position: absolute;
top: 70px;
font-size: 11px;
left: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="dashboard-profile-wrp">
<h3>Your Profile</h3>
<div class="dashboard-profile-img">
<img avatar="Prabu Perumal" width="120" height="120">
<p class="upload">Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</p>
</div>
<div class="dashboard-response">
<p>My Response Rate</p>
<p>40%</p>
<p>My Avg. response Time</p>
<p>2 hours%</p>
<p><b>Contact Info</b> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
I need something look like this:
I have used the bootstrap framework. The line "hr" should not visible behind the circle div (as shown in the picture). Is it possible with css masking??
My code is below:
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
.about-info hr {
position:absolute;
width: 100%;
right: 15px;
left: 15px;
top: 40%;
z-index: 1;
}
.about-info .text {
width:100px;
height:100px;
background:rgba(153,153,153,0.5);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto
}
.about-info .text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Here is a solution that uses flex-box
you may want to tweak it some (note: that the flex widths and height may scale on differently on viewports of different sizes
.container.bg{
font-size:5em;
}
.flex-container {
min-height:5em;
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
display: flex;
/*makes the container a flex-box*/
flex-direction: row;
align-items: center;
/* centers the stuff V*/
}
.hr {
flex-grow: 2;
/* make the rules 2x the width as circles*/
height: 2px;
border: 1px solid #ccc;
}
.text {
font-family: impact;
font-size: .3em;
}
.about-info {
padding-top: 70px;
padding-bottom: 90px;
/*position: relative*/
width: 80px;
height: 80px;
background-color: rgba(255, 255, 255, .5);
border-radius: 100%;
text-align: center;
flex-grow: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container bg">
<div class="flex-container">
<div class="about-info">
<div class="text "><span>Honesty</span>
</div>
</div>
<div class="hr"></div>
<div class="about-info">
<div class="text "><span>Transparency</span>
</div>
</div>
<div class="hr"></div>
<div class="about-info">
<div class="text "><span>Integrity</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Have you considered using :after on .text? so something like:
.text:after {
content: '';
position: absolute;
top: 50px;
left: 115px;
display: block;
width: 210px;
border: 1px solid #fff;
}
And from there adjusat the width/height etc to get it looking it proper.
Take a look at the fiddle here: https://jsfiddle.net/mjwtL2ze/3/
(3 edits)
It's the opacity that prevents z-index from "working".
Note: z-index is doing its job, but if the top layer is transparent, you'll see under it.
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
.about-info hr {
position:absolute;
width: 100%;
right: 15px;
left: 15px;
top: 40%;
z-index: 0;
}
.about-info .text {
width:100px;
height:100px;
background:rgba(153,153,153,1);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto
}
.about-info .text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
EDIT #2:
Perhaps you can make the hr's opacity the same?
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
.about-info hr {
position:absolute;
width: 100%;
right: 15px;
left: 15px;
top: 40%;
z-index: 0;
background-color: rgba(153,153,153,0.1);
color: rgba(153,153,153,0.1);
height: 5px;
}
.about-info .text {
width:100px;
height:100px;
background:rgba(153,153,153,0.9);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto
}
.about-info .text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<hr>
<div class="col-sm-4 col-xs-4"><div class="text pull-left"><span>Honesty</span></div></div>
<div class="col-sm-4 col-xs-4 text-center"><div class="text"><span>Transparency</span></div></div>
<div class="col-sm-4 col-xs-4"><div class="text pull-right"><span>Integrity</span></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
EDIT #3: use 2 <hr> instead of 1.
.container.bg {
background: url(https://image.shutterstock.com/z/stock-photo-silhouettes-of-colleagues-discussing-business-issue-in-dark-office-377738314.jpg);
background-size: cover;
}
.about-info {
padding-top:70px;
padding-bottom:90px;
position:relative
}
hr {
position:absolute;
width: auto;
right: 5px;
left: 20px;
top: 30px;
color: red;
background-color: red;
color: red;
height: 2px;
border: 0;
}
.text {
width:100px;
height:100px;
background:rgba(153,153,153,0.9);
border-radius:100%;
text-align:center;
line-height:14;
margin:0 auto;
}
.text span {
display: inline-block;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
font-family:helverticacb;
color:#fff;
font-size:20px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg">
<div class="row about-info">
<div class="col-xs-2 col-xs-offset-1">
<div class="text pull-left">
<span>lorem</span>
</div>
</div>
<div class="col-xs-2">
<hr>
</div>
<div class="col-xs-2">
<div class="text text-center">
<span>lorem</span>
</div>
</div>
<div class="col-xs-2">
<hr>
</div>
<div class="col-xs-2">
<div class="text pull-right">
<span>lorem</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}