I have a div that i don't know how to allign to the bottom of its parent.
I tried with bottom: 0 and margin-bottom: 0 but both doesn't work. I played with position aswell and it doesn't change anything only the absolute position makes the div stick to the very bottom of the page. Vertical-align doesn't seem to work aswell.
Here's a simplified version of my code:
.category{
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform{
text-shadow: none;
color: #65a1bf;
text-align: center;
bottom: 0;
position: relative;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
<div class="category icon-steam"><div class="platform">Steam</div></div>
</div>
And there's a fiddle link if you want: https://jsfiddle.net/kk8Lwh6v/
Can someone help me please?
Add position:absolute on the element that you want to align and add position:relative on its parent.
.category {
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, .75), inset 0 0 2px 0 #4293D5;
position: relative;
}
.icon-steam {
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform {
width: 100%;
text-shadow: none;
color: #65a1bf;
text-align: center;
bottom: 0;
position: absolute;
margin-bottom: 0;
}
<div class="categories">
<div class="category icon-steam">
<div class="platform">Steam</div>
</div>
</div>
You can use flexbox properties:
.category {
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, .75), inset 0 0 2px 0 #4293D5;
}
.icon-steam {
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
display: flex;
justify-content: center;
}
.platform {
text-shadow: none;
color: #65a1bf;
margin-top: auto;
}
<div class="categories">
<div class="category icon-steam">
<div class="platform">Steam</div>
</div>
</div>
This will do.
.category{
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform{
text-shadow: none;
color: #65a1bf;
left:14%;
top:60px;
position: absolute;
}
<div class="categories">
<div class="category icon-steam"><div class="platform">Steam</div></div>
</div>
.category{
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform{
text-shadow: none;
color: #65a1bf;
text-align: center;
top: 60px;
left:14%;
position: absolute;
margin-bottom: 0;
}
<div class="categories">
<div class="category icon-steam"><div class="platform">Steam</div></div>
</div>
Related
Is there a way to convert this box shadow into a drop shadow?
box-shadow: inset 0 0 0.32vw 0.2vw #0a0e0f40;
I'd like to achieve something like this, but with drop-shadow:
.card {
background: #fff;
border-radius: 2vw;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 300px;
box-shadow: inset 0 0 2vw 0.4vw #0a0e0f40;
}
body {
background: #e2e1e0;
text-align: center;
}
<div class="card card-1"></div>
drop-shadow() does not have an inset and spread-radius, so no.
See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow and https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
Unless you mean just removing the inset property...
#yoda {
width: 100px;
height: 100px;
margin: 3px;
background: darkgreen;
box-shadow: 0 0 0.32vw 0.2vw #0a0e0f40;
}
#spongebob {
width: 100px;
height: 100px;
margin: 3px;
background: yellow;
box-shadow: 0.4vw 0.4vw 0.32vw 0.2vw #0a0e0f40;
}
<div id="yoda"></div>
<div id="spongebob"></div>
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style="margin-top: -54px"></div>
</div>
</div>
.powder-inner overflow hidden ,there have a border in there . it can't cover all .
how can i cover all ? there is border there ?
Update .powder-inner class using border-top-left-radius: 0%; & border-top-right-radius: 0%; then remove top green curve.
See output is browser zoom it and see green curve.
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 49%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
z-index: 2000;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 49%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow: hidden;
margin: 1px;
z-index: 2000;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style="margin-top: -54px"></div>
</div>
</div>
.powder-box {
width: 51px;
height: 51px;
border-radius: 50%;
border: 2px solid #A5B2B5;
box-shadow: 0 1px 2px 0px #A5B2B5;
overflow: hidden !important;
position: relative;
}
.powder-inner {
width: 45px;
height: 45px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 4px 10px 0 #656565;
background-color: #00c690;
overflow:hidden !important;
margin: 1px;
}
.powder-wave {
background-color: white;
height: 70px;
}
<div class="powder-box">
<div class="powder-inner">
<div class="powder-wave" style=""></div>
</div>
</div>
I am trying to do something like this image below with CSS to build the buttons and then an image sprite to show the center content of the button.
Here is a demo of the code I have so far, I am having trouble getting my sprite images to position correctly. Any help to improve this CSS to look more like my image above would be great. I think the actual HTML structure could be improved as well?
http://dabblet.com/gist/2212456
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
Block & inline method
http://dabblet.com/gist/2213271
Absolute method
http://dabblet.com/gist/2213121
Hi you have not defined the position absolute in #left & #right so i controlled the sprite images through absolute positioned.
you can adjust your images through changes in position top,left,bottom,right whatever you need....
Here is your updated css :-
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
background-position: 16px -16px;
height: 15px;
left: 15px;
position: absolute;
top: 12px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
background-position: 0 -29px;
left: 15px;
position: absolute;
top: 13px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
or see the live demo:- http://dabblet.com/gist/2213048
I am trying to make shutdown button using CSS3 similar to this picture
http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
So far I got this. The issues are that I cannot make that "semi-circle" look like that circle in the center of image, cannot center that "semi-circle" and box-shadow ruins that "semi-circle".
Do you have any suggestions to improve what I am trying to do?
Thnx in advance!
Here's my attempt:
.shutdown {
border: 8px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 100px;
width: 100px;
}
.shutdown .inner {
border: 5px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 30px;
left: 30px;
position: relative;
top: 30px;
width: 30px;
}
.shutdown .bar {
border-left: 5px solid #0cf;
box-shadow: 0 0 10px #0cf;
height: 20px;
left: 47px;
position: relative;
top: -15px;
width: 0;
}
.shutdown .sub-bar {
border-left: 11px solid black;
height: 30px;
margin-left: 44px;
margin-top: -20px;
position: absolute;
width: 0;
}
Here's the HTML structure to go along with it:
<div class="shutdown">
<div class="inner"></div>
<div class="sub-bar"></div>
<div class="bar"></div>
</div>
And here's a demo.
Im trying to determine why there would be space between 2 Containing Divs as shown, and I would appreciate any insight as to why this is occurring:
The unknown space occurs between the mid-feature div (olive) and bottom-wrap div (orange)
I have no heights set anywhere.
I would like to see the orange div up against the olive div just above it.
I can post all of the CSS, or you can FireBug this: www.davincispainting.com
Here is all of the CSS:
*{ margin:0; padding:0 }
body
{
/*background: url("/images/blueback5.jpg") repeat-x scroll 0 0 transparent;*/
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#top-wrap {
height: 126px;
width: 940px;
/*background-color: Yellow;*/
margin: 5px 0 0 0;
}
#head-logo {
background: url("/images/logo3.png") no-repeat scroll 0 0 transparent;
/*background-color: Green;*/
height: 126px;
width: 214px;
margin: 0px 0 0 58px;
position: absolute;
z-index: 100;
}
#submenu1 {
border: 0 solid #000000;
color: #FFFFFF;
/*background-color:Green;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.6em;
height: 35px;
width: 155px;
/*padding: 10px 0 0;*/
margin: 7px 0 0 774px;
position: absolute;
}
#submenu2 {
/*border: 0 solid #000000;*/
color: #FFFFFF;
/*background-color:Blue;*/
font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
font-size: 1.8em;
text-align: right;
height: 20px;
width: 114px;
margin: 30px 0 0 818px;
/*padding: 5px 0 0;*/
}
a.contact
{
background-image: url("/images/RapidButton2.png");
/*border: 1px solid #CCCCCC;*/
/*clear: both;*/
/*color: #FFFFFF;*/
display: block;
font-size: 11px;
/*margin-bottom: 1px;*/
/*padding: 3px 5px;*/
text-align: center;
width: 165px;
height: 27px;
}
a.contact:hover
{
background-image: url("/images/RapidButtonHov2.png");
}
#navigation-primary {
margin: 12px 0 0 276px;
position: absolute;
}
#global-wrap {
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner {
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft {
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright {
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft {
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#global-inner .bottomright {
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
/*margin: 776px 0 0 0;*/
width: 9px;
}
#top-feature {
height:330px;
width: 848px;
margin: 12px 0 0 16px;
background: #E4EAEF;
/*background: orange;*/
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}
.slideshow {
height: 330px;
width: 848px;
margin: 0 0 0 0;
/*background: blue;*/
position: absolute;
}
#mid-feature
{
margin:350px 0 0 16px;
width:848px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;
}
#mid-featureleft
{
height:318px;
width:552px;
/*background-color:Purple;*/
float:left;
position:relative;
}
#mid-featureright
{
height:318px;
width:296px;
background-color:#B9C1CC;
/*background-color: red;*/
float:left;
position: relative;
}
#mid-featureleft h1
{
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.1em;
}
#mid-featureleft .contentbox
{
padding:7px 7px 7px 7px;
}
#mid-featureleft p
{
color: #0C2A55;
margin:0px 0 11px 0px;
/*font-style:normal;*/
/*width: 97%;*/
/*font-size: .5em;*/
font-size: 12px;
}
#bottom-wrap
{
height:60px;
width: 868px;
margin: auto 0 0 6px;
background:orange;
position: relative;
}
#copyright
{
float: left;
/*background-color:Teal;*/
width: 260px;
height: 60px;
text-align: left;
position: absolute;
margin:0 0 0 6px;
}
#bottom-logos
{
height:60px;
width:596px;
margin:0 0 0 267px;
background: url("/images/logos2.png") no-repeat scroll 0 0 transparent;
/*background-color:red;*/
position:absolute;
}
I took a look at your page and you have two <br style="clear: both"> lines between the divs. Take those out and it should be fine.
The <br style="clear: both;"> are, as noted by Richard Pianka, causing the extra vertical spaces, that's what <br> does. If you don't want to drop them completely because you're worried about clearing your floats, then use a tag that has no inherent visual representation:
<div style="clear: both;"></div>