On the FeatureDiscovery page they have a FAB button in the bottom right hand corner (http://materializecss.com/feature-discovery.html). I would like to replace this button with a .png image - a circular image like this: https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png. Is this possible at all?
If so would you be able to guide me into how to do it please?
Thanks.
I made this fiddle for you. Do you mean something like this?
#icon {
z-index: 10;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
bottom: 5%;
right: 5%;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
}
.fab-img {
width: 100%;
height: 80px;
}
<div id="icon">
<div id="wrapper">
<img class="fab-img" src="https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png"/>
</div>
</div>
You can also replace the <i class="material-icons">menu</i> with the img tag included in the snippet
Related
I want to put a svg before a div element in Oxy, I tried it with css but I failed because I am still learning css.
I hope the image makes sense. I want to put the SVG where the arrow points to svg.
Thanks for your time already,
Best regards,
Mark
image for clarification
As promised here is what I used.
.pseudo--code:before {
position: absolute;
content: url("https://images-svg.svg");
width: 10em;
max-height: 100%;
left: 10px;
overflow-x: hidden;
overflow-y: hidden;
opacity; .1;
}
This is the basic structure to achieve what you need.
<body>
<div class='outter-container'>
<h2>Some headline</h2>
<div class='inner-container'>
<svg>SVG goes here</svg>
<div class='text-button-container'>
<p>Some text here</p>
<button>Click me</button>
</div>
</div>
</div>
</body>
To style it, you will need to apply CSS.
.outter-container {
display: flex;
justify-content: center;
flex-direction: column;
}
.inner-container {
display: flex;
align-items: center;
justify-content: flex-start;
border: 1px solid #000;
width: 500px;
height: 200px;
}
I have problem with change size while manipulating browser size. I need to keep one column on another so I use relative + absolute combination.
I'm wondering if there is an option with only CSS to make such element responsive.
<div class="clock">
<div id="apDiv3" class="opening">
<div class="clock">
<img id="apDiv2" class="clock" src="./assets/stoper-01.png" usemap="#image-map">
<img id="apDiv1" class="clockArrow" src="./assets/stoper-01-arrow.png">
<map name="image-map">
<area area settings>
...
</map>
</div>
</div>
</div>
div.clock {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
img.clock {
position: relative;
}
.clockArrow {
position: absolute;
}
You could try using the CSS calc() function like the given eg.
.top-img{
...
width: calc(var(--background-img-width) - var(--offset));
...
}
Here, add --background-ing-width to your :root and apply it in .background-img's width. Then you can add --offset in your :root and add to .top-img as shown and tweak these two variables to your liking.
I'm wondering if there is an option with only CSS to make such element responsive.
Here's a sample:
.wrapper{
height: 100vh;
margin: 0 30%;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
min-width: max-content;
}
.circle{
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fc1.staticflickr.com%2F1%2F694%2F23104548209_fed5c6d1cd_b.jpg&f=1&nofb=1);
height: 50vh;
width: 50vh;
border-radius: 50%;
background-size: 100% 100%;
display: flex;
align-items: center;
padding: 1.3vh;
}
.rec{
flex: 1;
height: 15vh;
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.cameraegg.org%2Fwp-content%2Fuploads%2F2012%2F09%2FSony-DSC-RX1-Sample-Image.jpg&f=1&nofb=1);
background-size: 100% 100%;
}
<div class="wrapper">
<div class="circle">
<div class="rec"></div>
</div>
</div>
You can make use of viewport height and width to make the elements responsive. More on units here.
i have a tooltip that shows when user hovers a button inside a dialog. these buttons are wrapped within ToolTip component and ToolTip component is within UsersContainer div.
below is my code,
wrapper {
position: absolute;
bottom: 32px;
width: 316px;
min-height: 225px;
background-color: yellow;
border-radius: 16px;
display: flex;
flex-direction: column;
}
des_container {
padding: 16px 6px 16px 22px;
margin: 0px -6px 0px -6px;
}
UsersContainer {
padding: 14px;
height: 104px;
width: 316px;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: auto;
&>div {
margin: 2px;
}
}
tooltip_wrapper {
position: relative;
z-index: 1000;
}
inner_wrapper {
position: absolute;
width: auto;
}
tooltip_text {
position: relative;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="des_container">
<span>title</span>
<span>description</span>
</div>
<div class="UsersContainer">
<div class="tooltip_wrapper">
<div class="inner_wrapper">
<div class="tooltip_text">
<span>text</span>
</div>
</div>
</div>
</div>
</div>
Now the problem is tooltip is hidden behind the UsersContainer div as this UsersContainer div has overflow-x: hidden and overflow-y: auto properties. when i remove these properties the tooltip is above the UsersContainer div for the first row of buttons and is no longer cropped.
can someone help me fix this? i have tried using position absolute on ToolTipWrapper div and this makes the tooltip appear above as expected but has the buttons in the UsersContainer div appear overlapped on one other.
i am not sure how to fix this. thanks.
I've having a hard time aligning titles of each image at the bottom of the box. Please see the attached image. Here's my code:
Btw, I'm using Joomla.
Box code:
margin: auto;
align-self: center;
height:100px;
width:50%;
margin-top:0.5%;
margin-bottom:0.5%;
border: solid;
Image code:
margin-right:45%;
margin-left:45%;
margin-top:1%;
and title code:
display: block;
text-align: center;
position: absolute;
width: 50%;
This is my HTML code:
<ul class="nav menu navVerticalView nav-pills">
<li class="item-146">1</span></li><li class="item-147">2sdfgfsdgesdfg</span></li><li class="item-148">3cvbgfbnfghnf</span></li><li class="item-149">4</span></li><li class="item-150">5fghfghfg hfghrfghfgh </span></li><li class="item-151">6</span></li><li class="item-152">7bhjm hjmk,hj, hj, hj mjmgjjghjfh jfh hf hdgfhhdfghgfh fg hfgh fh</span></li><li class="item-153">8ghujghjtghj tgjtghjtyg tyjtyjtyj</span></li></ul> </div>
I tried to use bottom: 0px; for the title but all titles would gather above each other. I also tried vertical-align:bottom; but it doesn't work. I tried so many different ways but no luck. If someone can give heads up so I can move on towards, I'll be appreciative.
Thank you,
Image titles are not aligned with the bottom of the box
Set the box to position relative, and the text on absolute. After that set the text to bottom 0.
.box {
margin: auto;
align-self: center;
height:100px;
width:50%;
margin-top:0.5%;
margin-bottom:0.5%;
border: solid;
position: relative;
}
.image {
margin-right:45%;
margin-left:45%;
margin-top:1%;
background: red;
width: 30px;
height: 30px;
}
.box p {
display: block;
text-align: center;
position: absolute;
bottom: 0;
margin: 0;
}
<div class="box"><img class="image"><p>This is not how I would do it but okay 🤷🏼♀️</p></div>
You could use display: flex for this:
.example{
display: flex;
background-color: #808080;
flex-flow: column;
justify-content: space-between;
height: 200px; /* for example purpose */
}
.top {
background-color: #cecece;
}
.bottom {
background-color: #cecece;
}
<div class="example">
<div class="top">
<span>This is the title</span>
</div>
<div class="bottom">
<span>This is the title</span>
</div>
</div>
I am trying to figure out how to make a space between text and image. I've tried everything I learned so far, including word spacing, padding.
Let me show you picture which will give you a better understanding of what I want to achieve.
I want to increase space between the image and the text. Highlighted as yellow.
How can I achieve it using this example code? Link to CodePen
html
<div class="navbar-header">
<div class="container">
<div id="logo">
<a href="#">
Amazing <img src="http://www.clipartkid.com/images/650/image-spiderman-logo-png-spider-man-wiki-wikia-hYo1XM-clipart.png"/> Spiderman
</a>
</div>
</div>
</div>
css
.navbar-header {
border-bottom: 1px solid black;
height: 70px;
margin-bottom: 0;
position: fixed;
width: 100%;
z-index: 100;
}
.container {
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#logo {
align-items: center;
margin: auto;
}
#logo a {
align-items: center;
color: black;
display: flex;
flex-grow: 2;
margin: auto;
text-decoration: none;
word-spacing: 200px;
}
#logo img {
height: 66px;
margin: auto;
}
I think giving the img a left/right margin should be the best solution. Easiest way to accomplish this:
#logo img {
height: 66px;
margin: auto 20px;
}
If I understand your question..... I would just add left and right margins to the #logo img of about the space you want
#logo img {
height: 66px;
margin: auto;
/*you would want to change this, so as to not have both declarations, I just dont know how much top and bottom margin you want*/
margin-left: 15px;
margin-right: 15px
}