I have 2 buttons and the width is 50% each. (Fluid buttons)
If I want to make a 10px of space between the buttons (Fixed width space)
Is there any simple way to do ?
This is my code
<div class="btnWrap">
No
Yes
</div>
.btnWrap { text-align:center; overflow:hidden; margin:0 auto; }
.btnWrap .btnOrange { display:block; float:left; width:50%; height:36px; }
.btnWrap .btnGray { display:block; float:left; width:50%; height:36px; }
yes:
http://jsfiddle.net/fJ73C/
.btnWrap { text-align:center; overflow:hidden; margin:0 auto; }
.btnWrap .btnOrange { display:block; float:left; width:calc(50% - 5px); height:36px; background-color:orange; }
.btnWrap .btnGray { display:block; float:left; width:calc(50% - 5px); height:36px; background-color:gray; }
.btnWrap a:nth-of-type(odd)
{
margin-right: 5px;
}
.btnWrap a:nth-of-type(even)
{
margin-left: 5px;
}
You can set the button width to 50% minus 5 pixels (5 + 5 = 10) by using calc(50% - 5px)
and then set a margin of 5px on the right of the left button and 5px on the left of the right.
Related
I have programmatically added a slider for my drupal website. I also installed a css-editor module since I don't have access to it(it's my partner's server). Anyways, I have tried the #media query but it won't work.
here is what I tried and the actual css code.
#media screen and (width: 200px){
#slider{display:none; !important;}
}
#main-menu-links a
{
background: #E37222;
}
/************
for slider
*****************/
/* http://www.menucool.com */
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:600px;
min-width: 50px;
margin:0 auto; /*center-aligned*/
}
#slider, #slider .sliderInner {
width:600px;height:306px;/* Must be the same size as the slider images */
min-width:50px;
border-radius:3px;
}
#slider {
background-color:white;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:100%;
height:auto;
padding:10px 0;/* 10px will increase the height.*/
left:0px;
bottom:0px;top:auto;
overflow:hidden;
font: bold 14px/20px Arial;
color:#EEE;
text-align:center;
background:rgba(0,0,0,0.3);
}
#slider .mc-caption a {
color:#FB0;
}
#slider .mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
top:320px;
text-align:center;
background:none;
position:relative;
z-index:3;
}
/* each bullet */
#slider .navBulletsWrapper div
{
width:11px; height:11px;
font-size:0;color:White;/*hide the index number in the bullet element*/
background:transparent url(bullet.png) no-repeat 0 0;
display:inline-block; *display:inline; zoom:1;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
}
#slider .navBulletsWrapper .active {background-position:0 -11px;}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
The query in question is the max-width of 400px at the bottom of the coding.
/*MAIN ELEMENTS*/
body{
width:100%;
height:100%;
/*width:1266px; height:612px;*/
background-color:#161616;
background-image:url(http://www.optiqvision.x10host.com/Pics/Background.png);
/*background-position:top 40px center;*/
background-position:50% 11px;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
margin:auto;
position:relative;
display:block;
/*top:40px;*/
z-index:1;
}
header{
width:100%;
height:auto;
position:fixed;
top:0;
margin:auto;
z-index:4;
}
footer{
width:100%;
height:auto;
margin:auto;
z-index:4;
}
/*DECORATIVE ELEMENTS*/
#header_border{
width:100%;
height:40px;
margin:auto;
background-image:url(http://www.optiqvision.x10host.com/Pics/header.png);
background-repeat:repeat-x;
background-color:#960;
/*background-size:100%;*/
}
#footer_border{
width:100%;
height:40px;
margin:auto;
background-image:url(http://www.optiqvision.x10host.com/Pics/footer.png);
background-repeat:repeat-x;
background-color:#960;
/*background-size:100%;*/
}
.page{
width:88%;
height:auto;
overflow:hidden;
background-color:rgba(255, 255, 255, .44);
border-radius:22px;
margin:88px auto;
}
#row{
width:77%;
overflow:hidden;
margin:11px auto;
display:block;
clear:both;
}
#row li{
width:20%;
height:120px;
float:left;
text-align:center;
display:block;
font-family:'Roboto', sans-serif;
font-size:16pt;
border-radius:6.5px;
margin:0 2% 0 2%;
list-style:none;
position:relative;
}
.sect_container{
width:88%;
height:auto;
background-color:rgba(204, 204, 204, .55);
border:solid 2px #666;
border-radius:22px;
margin:11px auto;
overflow:hidden;
display:block;
}
.sect_title{
font-family:'Roboto', sans-serif;
font-size:22pt;
margin:6px 0 0 6px;
float:left;
clear:both;
}
.link{
width:100%;
overflow:hidden;
display:block;
/*background-color:#F00;*/
position:absolute;
top:33%;
}
/*MEDIA QUERIES*/
#media(max-width:400px){
#header_border{background-image:url(Pics/Header_400w.png); height:12px;}
#footer_border{background-image:url(Pics/Footer_400w.png); height:12px;}
.sect_title{font-size:14pt; margin:auto; float:none;}
#row{width:100%}
#row li{font-size:10pt; height:30px; width:88%; margin:4% auto; clear:both; float:none;}
}
#media(max-width:700px){
#header_border{background-image:url(Pics/Header_400w.png); height:12px;}
#footer_border{background-image:url(Pics/Footer_400w.png); height:12px;}
.sect_title{font-size:16pt;}
#row li{font-size:10pt; height:44px; width:44%; margin:4% 0 4% 4%;}
}
#media(max-width:900px){
#header_border{background-image:url(Pics/Header_900w.png);height:29px;}
#footer_border{background-image:url(Pics/Footer_900w.png);height:29px;}
.sect_title{font-size:18pt;}
#row li{font-size:14pt; height:60px;}
.link{top:11%;}
}
When I reduce the screen size the #row li doesn't display at 88% as I have it set to and the .sect_title doesn't margin to the middle. The funny thing about it is when I comment out the second media query of 700px wide the #row li go to 88% wide, but they float all the way to the right.
Here's a fiddle of it in action https://jsfiddle.net/Optiq/5be35wdm/2/
can someone please help shed some light on this?
The media query 900px has more priority so it overrides media query 700px and 400px so you have to change the order of your media queries. For centering #row, you should set margin and padding to 0.
Jsfiddle
The issue has to do with the fact that the last rule in the stylesheet will override the ones preceding it. Thus, you want to place the more specific rules last:
/* MEDIA QUERIES*/
#media(max-width:900px) {
//...
}
#media(max-width:700px) {
//...
}
#media(max-width:400px) {
//...
}
Check it out here, although it kind of looks better the way it was before...
I believe you are trying to position text to the middle of the div when width is 400px;
CSS:
text-align: center; // in #media 400px
Regarding the li add !important behind the 88% !important;
Good luck
Fiddle
HTML:
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
CSS:
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:50px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:20px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:45px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:76px;
width:24px;
height:15px;
background:#fff;
}
Example taken from: Nicolas Gallagher
Basically this text bubble is curving to the left and on the bottom-left. I'd like to duplicate it exactly except have it on bottom-right and curving to the right. Just flip it.
I've tried changing the rights into lefts but it's not happening. Can anyone tell me what needs to change to flip this bubble?
Do you mean this?
If you want to change geometry, you should to play with border-width and border-radius. Also I changed pseudo-class from :after to :before, and vice versa in elements and border-radius from right to left.
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:400px;
width:20px;
height:30px;
border-style:solid;
border-width:0 0 10px 10px;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-left-radius:40px 50px;
-moz-border-bottom-left-radius:40px 50px;
border-bottom-left-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
left:370px;
width:50px;
height:30px;
bottom: -40px;
border-style:solid;
border-width:0 0 10px 10px;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-left-radius:40px 50px;
-moz-border-bottom-left-radius:40px 50px;
border-bottom-left-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:425px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:376px;
width:24px;
height:15px;
background:#fff;
}
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
I have a problem with center positioning a button in a row in a table.I used width and margin but it don't work.Can you help me? Here's the code for that button(in css):
.subm {
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
.subm:hover {
background-image:none;
background-color:darkgray;
box-shadow:10px 10px 10px black
}
.subm:active {
color:black ;
font-weight:bold;
width:128px;
height:24px;
background-image:none;
background-color:dimgray;
}
simply try this
button{
height:20px;
width:100px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
DEMO
To achieve this, I would use following code:
.subm {
position:absolute;
width:130px;
height:25px;
top: calc(50% - 13px); // 50% - 0.5 * height.
left: calc(50% - 65px); // 50% - 0.5 * width.
}
And for the parent:
position: relative;
You can see a working JSFiddle here
If you used width and margin: auto's and it's still not centering you may just need to add display: block to your .sumb class like so:
.subm {
display:block;
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
Demo: http://jsfiddle.net/re079odr/
I am trying to create the 'Google Now' microphone icon using pure CSS3.
The icon features a white microphone on a red circular background.
I tried font-awesome but in vain
I need your help to complete this task
No animations or functionality, just the icon
Google Now Icon Only with CSS
DEMO
output :
HTML :
<div class="gn"><div class="mc"></div></div>
CSS :
body{font-size: 15px;}
.gn{
position:relative;
margin: 5% auto;
background-color:#FE2222;
border-radius:50%;
width:10em; height:10em;
}
:before, :after{
content:'';
position:absolute;
background-color:#fff;
}
.gn:after{
top:30%; left:43%;
height:15%; width:14%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.gn:before{
top:40%; left:43%;
height:15%; width:14%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
.mc{
position:absolute;
top:50%; left:37%;
height:24%;
width:26.5%;
overflow:hidden;
}
.mc:before{
bottom:50%;
width:100%; height:100%;
box-sizing:border-box;
border-radius:50%;
border:0.5em solid #fff;
background:none;
}
.mc:after{
top:50%; left:40%;
width:20%; height:25%;
}
Demo
html
<div class=container><i class=icon-microphone></i></div>
css
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
* {
margin:0;
padding:0;
}
.container {
width:150px;
background-color:#e74c3c;
display:block;
margin:100px auto 0px auto;
border-radius:100%;
box-shadow:0px 0px 15px 2px #bdc3c7;
cursor:pointer;
transition:.3s all ease-in;
position:relative;
}
.icon-microphone {
color:white;
font-size:60px;
line-height:150px;
display:block;
text-align:center;
transition:.1s all ease-in;
}
.container:hover {
background-color:#27ae60;
}
.container:active {
background-color:#e74c3c;
}
.container:active .icon-microphone {
color:#ecf0f1;
}