I am trying to center a custom svg icon but I cannot do it although the same css works for an Official Material Design icon (I added an aqua background so it will be easier to see where the frame is).
On the far left it's the custom svg I added, and next to it, on the right, it's the Official one:
My css:
div.container {
max-width: 512px;
min-width: 256px;
height: 50px;
margin: auto;
color: #000000;
background-color: #ffffff;
line-height: 50px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-width: 1px;
border-style: solid;
border-color: #9e9e9e;
padding-right: 20px;
position: fixed;
z-index: 1000;
left: 0;
right: 0;
top: 30px;
}
div.img {
width: 50px;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9e9e9e;
background-color: #3f9c35;
}
div.img mat-icon {
vertical-align: middle;
background-color: aqua;
}
my html
<div class="container">
<div class="img">
<mat-icon svgIcon="information">info</mat-icon>
</div>
<div class="img">
<mat-icon>home</mat-icon>
</div>
Some text here!
</div>
Please find the code in this repo.
Any suggestions on how to center the custom svg icon like the official Material design one?
Also, if you could suggest a platform where I could connect it to the repo and anyone can run it so it will be easier for sharing the code and running it at the same time. Most platforms won't let me upload assets.
Related
I am not able to make a shadow gradient background for one image described in the following snippet. I have tried various solutions but couldn't make it to work. The image gets cut off from bottom.
.circle {
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<img class="circle" src="https://i.stack.imgur.com/4kEf0.png">
Please check out the below solution. I hope this helps.
.circle {
display: inline-block;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle">
<img src="https://i.stack.imgur.com/4kEf0.png">
</div>
Please let me know if this helps.
Here's my take on your problem, i'm not sure what you wanted it to look like but this solution doesn't make the "x2" appear outside.
You need to wrap your image in a div bigger than the image if you want a circle border to contain the whole image. Adding border-radius basically makes a square border smaller, therefore covering your image.
.circle-border {
text-align: center;
width: 450px;
height: 430px;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle-border">
<img class="circle" src="https://i.stack.imgur.com/4kEf0.png">
</div>
.circle-border {
display: inline-block;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle-border">
<img src="https://i.stack.imgur.com/4kEf0.png">
</div>
How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?
Here's my curent code:
HTML
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
CSS
.pageimg {
width: 37%;
float: right;
margin-left: 100px;
box-shadow: 10px 10px #FFE600;
}
Use multiple box-shadows:
img {
box-shadow:
12px 8px 0 0px white,
14px 6px 0 0px yellow,
14px 10px 0 0px yellow,
10px 10px 0 0px yellow;
}
<img src="https://picsum.photos/200/200?image=1069">
You could also rather use pseudo elements. I do recommend keeping images in containers as it makes working with them easier. It would look something like this.
.image-container{
position: relative;
display: inline-block;
}
.image-container::before{
content: '';
position: absolute;
border: solid 1px yellow;
width: 100%;
height: 100%;
left: 14px; /* This will be your box shadow x-offset; */
top: 14px; /* This will be your box shadow y-offset; */
z-index: 0;
}
and then your html
<div class="image-container">
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
</img>
I have a view in my application where I would like to display thumbnails in a grid layout. When I create divs with no content they appear as desired:
When I add content to the divs, the layout goes all haywire:
I can't figure out why it is that this is happening.
I'm using a *ngFor directive for angular2:
<div class="board-thumbnail-container" *ngFor="let board of boards">
<img class="board-thumbnail" [src]="getBoardImage(board)">
<h3><span>{{board}}</span></h3>
</div>
and this is the css behind it:
.container {
width:400px;
}
.board-thumbnail-container {
position: relative;
width: 174px;
height: 174px;
margin-right: 5px;
margin-bottom: 5px;
display: inline-block;
border-style: solid;
border-color: lightblue;
border-radius: 7px;
padding: 5px;
text-align: center;
}
.board-thumbnail {
position: relative;
max-width: 160px;
max-height: 160px;
}
.board-thumbnail-container > h3 {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
}
.board-thumbnail-container > h3 > span {
color: white;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0px 5px 0px 5px;
}
Here is a plunker exhibiting the problem:
http://plnkr.co/edit/Trl8MJ7wuzYEgRGzy5yA?p=preview
It is working when I gave vertical-align: top to .board-thumbnail-container. Check http://plnkr.co/edit/HIiQrROahSMGggFWcnoX?p=preview
Thought of using angular flex layout?
https://jsfiddle.net/0Lfzbzc5/2/
in here I am trying to make the notification box on top of the body class div but couldn't do it the logic says positioned elements should be on top of the not positioned elements but that isn't happenning
tried even making body class div relative and giving it z-index but failed too
structure of notification box is an absolute element in relative element in absolute element (for CSS animation issues)
HTML
<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
<div class='notiContainer'>
<div class="notiBox">
<div class="notiHeader">
<span class="notiHeaderSpan">notifications</span>
</div>
<div class="notiBody">
<div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
</div>
<div class="notiElement">Credibly productize customized services whereas.</div>
<div class="notiElement">Efficiently embrace real-time markets without.</div>
<div class="notiElement">Synergistically simplify collaborative web services.</div>
<div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
<div class="notiElement">Holisticly build customer directed technologies.</div>
<div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
</div>
<div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
</div>
</div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>
CSS
.notiAbs{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* overflow-y: hidden; */
height: 500px;
width: 500px;
/* overflow-x: hidden; */
overflow-y: hidden;
margin: 0 auto;
padding-left: 50px;
}
.notiContainer{
position: relative;
}
.notiIcon{
z-index: 5;
position: relative;
width:100%;
text-align: center;
font-size: 25;
cursor: pointer;
padding-top: 10px;
}
.notiIconNumber{
position: relative;
font-size: 15px;
color: white;
background-color: red;
top: -10;
left: -9;
padding: 2px;
}
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
display: block;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;
}
.notiElement{
overflow-wrap:break-word;
font-size: 17px;
padding: 10 0px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
text-align: center;
font-size: 20px;
font-weight: bold;
height: 15%;
display: table;
width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
display: table-cell;
vertical-align: middle;
}
.notiFooter{
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.notiHeader{
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
padding: 20px;
overflow: auto;
height:70%;
}
.body{
}
It is on top but the background is transparent so it makes the illusion that it's not. Just set a background color as follows :
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
padding-top: 10px;
border-style:solid;
background:#666;
}
Check the Fiddle.
Your notification box which I believe is the element with class "notiBox" is on top. The reason why it appears not to be is because it has an inherited background-color of transparent.
If you set the background-color property to say "yellow" (for examples sake) you will see that it is on top of the element with class "body".
Does that make sense? I can explain further if you need me to.
I've updated my answer as looking at your HTML again i've realised that the element with class "notiBox" is probably the only element (and it's contents) you want to appear on top
The breadcrumbs part of the page is shifted to the right (in Firefox) with no apparent reason.
HTML:
<div class="region region-header">
<section id="block-easy-breadcrumb-easy-breadcrumb" class="block block-easy-breadcrumb">
<section class="content">
<div id="breadcrumbs-one">
</section>
</section>
</div>
CSS:
#breadcrumbs-one
{
border-width: 1px;
border-style: solid;
border-color: #FFFFFF #FFFFFF #E7E7E7;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 100%;
}
Here is the link to site:
http://www.vegus.lv/kursi
It's not in english.
Hope you can help.
try this please add clear:left on this below class
.region-header {
clear: left;
left: -19px;
position: relative;
top: -1px;
width: 953px;
}
OR
add float:left on this below class
.region-header {
float: left;
left: -19px;
position: relative;
top: -1px;
width: 953px;
}
I assume the issue is in #main. when you change your margin to -7px auto 40px; The things work.
Also, if you do not want to make changes to #main, you need to change the padding of #header, #footer CSS with 10px 10px 8px; values respectively.
There are 1px issues that have a conflicting inheritance or structural differences that tend to change the layout styles of some elements if not calculated properly.
Hope this helps.
Just add in CSS float :left.
#breadcrumbs-one {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF #FFFFFF #E7E7E7;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
overflow: hidden;
width: 100%;
float: left;
}