I cannot seem to get this number to align inline to the glyphicon. I want the number 3 to be pushed up more so that it lines up.
CSS
body {
background-image: url("bg1.png");
}
.icons {
margin: 0px 0px 0px 10px;
}
.well {
min-height: 20px;
padding: 20px;
margin-bottom: 20px;
background-color: #ecf0f1;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 10px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
#alertbox {
padding: 2px 2px 2px 2px;
text-align: center;
}
#topicon {
font-size: 50px;
}
#stats {
font-size: 50px;
display: inline-block;
float: right;
}
HTML
<div class="col-md-3">
<div class="well well-lg">
<div id="alertbox" class="alert alert-info">Total APIs</div>
<span id="topicon" class="glyphicon glyphicon-tasks"></span>
<span id="stats">3</span>
</div>
</div>
Screenshot
using the positioning doesnt work when scaling since the number 3 would go into the center when on a mobile phone. I need it to auto-scale i guess for smaller browsers.
If you remove the float from #stats, you could do something like this:
.well {text-align: justify;}
.well:after{content:""; width: 100%; display: inline-block; height: 0;}
span {display: inline-block; vertical-align: middle;}
Related
I'm looking a solution how to change css background color with padding or white color around the checkbox, I tried and play around using margin, padding height and etc, but no luck.
So when user click the checkbox, it would show background color, it's working, but I'd like to have white padding around the checkbox, is it possible?
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label:after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Exactly what you want is background-clip, easy:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #0e4caa;
background-clip: content-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Also on JSFiddle.
The background-clip CSS property sets whether an element's background
extends underneath its border box, padding box, or content box.
Just to mention, there is also one more solution for extra border using outline, but it extends the element:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #fafafa;
outline: 4px solid #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
You can use the CSS box-shadow property:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
padding: 5px;
box-shadow: inset 0px 0px 0px 4px white
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
inset shadow should be sufficient for this
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa ,inset 0 0 0 4px white;
Demo
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa, inset 0 0 0 4px white;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
outline with a negative offset could also work:
outline: solid white 2px;
outline-offset: -5px;
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
outline: solid white 2px;
outline-offset: -5px;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Here is an image of what I'm trying to achieve.
HTML:
<h2>Some text<br /> even more text</h2>
CSS
Works
display: inline;
line-height: 1.7em;
font-size: 65px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
Doesn't work
display: inline;
line-height: 1.7em;
position: absolute;
top: 80px;
z-index: 2;
font-size: 65px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
Any idea on how to fix this?
inline implicitly becomes block when you absolutely position an element, see
Css 2.1, 9.7 Relationships between 'display', 'position', and 'float'
You will need to use an additional inline element inside this heading, if you want to achieve this effect.
Three steps:
Wrap each part of the <h2> heading in a <span>
Give each span a display of inline-block
Apply the box-shadow to each span
Working Example:
h2:nth-of-type(1) {
display: inline;
line-height: 1.7em;
font-size: 18px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
h2:nth-of-type(2) {
display: inline-block;
position: absolute;
top: 80px;
z-index: 2;
color: #333;
background-color: #FFF;
}
h2:nth-of-type(2) span {
display: inline-block;
font-size: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
<h2>Some text<br />even more text</h2>
<h2><span>Some text</span><br /><span>even more text</span></h2>
I have a div with the style as so:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
color: #fff;
text-align: center;
}
And also a background color.
I want to add a shadow to this circle.
Is that possible?
I'm seeing conflicting information, with people saying that's inside the image, so you can't apply any styles to it, and other people suggesting that a style like that exists or there is a way to do it.
You can use the box-shadow property:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
text-align: center;
box-shadow:0 0 2px 2px #999;
}
<div class="oval">text</div>
I think you are looking for box shadow:
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
This link explains it: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspAnd this link lets you experiment with it: http://www.cssmatic.com/box-shadow
Use box-shadow property:
.oval {
width: 150px;
height: 150px;
border-radius: 150px;
font-weight: bold;
font-size: 1em;
color: #fff;
text-align: center;
display: block;
background-color: red;
box-shadow: 3px 3px 3px #aaa;
}
<div class="oval"></div>
Box Shadow!
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
.circle {
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 50%;
box-shadow: 5px 5px 5px #BC7046;
position: absolute;
top: 10px;
left: 10px;
}
.circle2{
box-shadow: -6px -6px 6px #BCAE46;
}
#square {
border-radius: 5px;
width: 170px;
height: 170px;
background-color: #D0DA72;
position: relative;
}
<div id=square>
<div class=circle></div>
<div class='circle circle2'></div>
</div>
I am trying to center my logo and a button in a navbar but without success, i already try use vertical-align, position absolute, padding in both, display table, table cell, etc... but anything works!
I can't use CSS3 unfortunately :[.
https://jsfiddle.net/cn23acef/1/embedded/result/
HTML:
<header class="header">
<div class="container">
<div class="header__logo">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>
CSS:
.container {
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#media only screen and (min-width: 620px) {
.container {
padding-left: 1.8%;
padding-right: 1.8%;
max-width: 688px;
}
}
#media only screen and (min-width: 800px) {
.container {
padding-left: 1.4%;
padding-right: 1.4%;
max-width: 1180px;
}
}
body {
background: black;
margin: 0 auto;
}
.header {
background: #fff;
position: fixed;
z-index: 99999;
width: 100%;
/* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
float: left;
}
.header__cta {
float: right;
}
.cta {
display: block;
background: #52C0C2;
color: #fff;
font-family: Oswald, Helvetica, sans-serif;
font-weight: 400;
padding: .735rem 1.25rem;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
margin-right: 1rem;
}
See this code
.container {
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#media only screen and (min-width: 620px) {
.container {
padding-left: 1.8%;
padding-right: 1.8%;
max-width: 688px;
}
}
#media only screen and (min-width: 800px) {
.container {
padding-left: 1.4%;
padding-right: 1.4%;
max-width: 1180px;
}
}
body {
background: black;
margin: 0 auto;
}
.header {
background: #fff;
position: fixed;
z-index: 99999;
width: 100%;
/* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
float: left;
}
.header__cta {
float: right;
}
.cta {
display: block;
background: #52C0C2;
color: #fff;
font-family: Oswald, Helvetica, sans-serif;
font-weight: 400;
padding: .735rem 1.25rem;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
margin-right: 1rem;
}
#media (max-width: 767px){
.header__logo {
float: none;
text-align: center;
}
.header__cta {
float: none;
text-align: center;
}
.header__cta a{
display: inline-block;
}
}
<header class="header">
<div class="container">
<div class="header__logo">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>
.container {
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#media only screen and (min-width: 620px) {
.container {
padding-left: 1.8%;
padding-right: 1.8%;
max-width: 688px;
}
}
#media only screen and (min-width: 800px) {
.container {
padding-left: 1.4%;
padding-right: 1.4%;
max-width: 1180px;
}
}
body {
background: black;
margin: 0 auto;
}
.header {
background: #fff;
position: fixed;
z-index: 99999;
width: 100%;
/* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
float: left;
text-align:right;
width:50%;
}
.header__cta {
float: left;
}
.cta {
display: block;
background: #52C0C2;
color: #fff;
font-family: Oswald, Helvetica, sans-serif;
font-weight: 400;
padding: .735rem 1.25rem;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
margin-right: 1rem;
}
#media (max-width: 767px) {
.header__cta a {
display: inline-block;
}
}
<header class="header">
<div class="container">
<div class="header__logo">
<a href="">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</a>
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>
If I am understanding you correctly. When you say center my logo you mean vertically correct?
Like this?
In order to do this all you need to do is paste this code in place of your current img tag.
<img style="margin: 7px 0px 0px;" src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25">
To vertically adjust all you have to do is play with the margin 7px.
If this does not solve the issue please be more specific and if it is what you were looking for please accept it as the correct answer.
Hope This Helps!
I have a little problem with Firefox, this is the html
<html>
<button name="five" data-type="select" class="ui_button ui_button_normal">
<span>Pasta</span>
<div class="ui_button ui_button_normal ui_select_list">
<div class="ui_select_list_item" name="Pasta">Pasta</div>
<div class="ui_select_list_item" name="Carne">Carne</div>
<div class="ui_select_list_item" name="Verdura">Verdura</div>
<div class="ui_select_list_item" name="Pesce">Pesce</div>
<div class="ui_select_list_item" name="Dolce">Dolce</div>
<div class="ui_select_list_item" name="Frutta">Frutta</div>
<div class="ui_select_list_item" name="Caffè">Caffè</div>
</div>
</button>
</html>
and this is the CSS
.ui_select_list
{
margin: 0px !important;
height: auto !important;
padding: 10px;
}
.ui_select_list_item
{
border: 1px solid transparent;
}
.ui_select_list_item:hover
{
border: 1px solid transparent;
background-color: rgba(0, 185, 0, 0.3);
box-shadow: 0 0 2px 1px #000000;
border-radius: 10px;
}
.ui_button
{
background-color: rgba(140, 140, 140, 0.5);
border: 0 solid transparent;
border-radius: 10px 10px 10px 10px;
color: #FFFF00;
font-family: verdana, sans-serif;
font-size: 15px;
height: 32px;
line-height: 30px;
margin: 5px;
position: relative;
text-align: center;
width: 160px;
}
.ui_button_normal
{
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ui_button_normal:hover
{
background-color: rgba(180, 180, 180, 0.5);
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.8);
}
Can be found on http://jsfiddle.net/Mak73/3YkSe/
The problem is that, on Google Chrome it works like expeted, when the mouse is over the div.ui_select_list_item the content of the div change with div.ui_select_list_item:hover.
On Firefox the :hover don't work, any idea?
It's not working because you're wrapping a <button> around the divs .. close it after the <span> and the :hover state will work ..
Jsfiddle: http://jsfiddle.net/3YkSe/2/
I suggest you try applying the following element options:
display: none;
display: inline;
I think this will do some better work in Firefox, on focus pop the
menu and display it inline, without block. This is just an idea I've
got for you to try out. Reply back if it works or not! Thanks!