Within my index.html, I have created the following div, which is located within the center tag.
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
This looks like this on the page: [Progress Bar Image]1
I would like the blue bar, to be positioned to the left of this container.
Below is my CSS:
/* Progress Bar */
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
Once again, I would like the blue bar (div labelled bar or bar fill) to be positioned to the left inside the container.
Thanks.
Simply add margin-left: 0px; to .bar-fill
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
margin-left: 0px;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
The element is already left based on the code provided.
There is no center tag in your HTML and, in any event, the tag has been deprecated and should no longer be used.
.container {
width: 400px;
margin:auto; /* center the container */
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
If the container div is inside a <center> tag which cannot be removed then setting the text-align of the tag to left should have the desired effect.
JSFiddle Demo
Related
I have a "main-div" with specific height and a dropdown on bottom part inside it. The dropdown is causing extra scroll. Is there any way to stop causing scroll and make it overlap through the parent div?
(height and properties of the main div cannot be changed in my real situation)
.main-div{
height: 300px;
width: 600px;
overflow-y: scroll;
border: 2px solid #404040;
}
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
margin-top: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #109fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.other-content{
height: 280px;
background-color: rgb(80, 210, 166);
}
.button-1{
background-color: #180f37;
padding: 10px;
border: #0f1c40;
color: #fff;
}
<div class="main-div">
<div class="other-content">
<h4>Scroll down to see the button</h4>
</div>
<div class="dropdown">
<span class="button-1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</div>
I have written small piece of code where i have a div container and in that div has spans and forms textbox btns. when i click on btn1, container height increase and show an textbox but when i click on textbox div goes focus out. How is possible that when i click on btn1 and its stay focus in even i click on textbox(after click on btn1 and show blackbox) it shouldnt goes focusout and when i click out site of container it should goes focusout ? how can i do please help me ?
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>
Have a close look at the event passed to the focusout function, in particular the target attribute. Your gutte div will likely be catching a focusout event generated by the button. You will need to put in some conditions so that you don't collapse gutte when focus is moving around within gutte.
I have the following CSS code:
#section1{
background-color: red;
height: 600px;
}
#section2{
background-color: blue;
height: 700px;
}
#section3{
background-color: orange;
height: 300px;
position:relative;
}
#footer{
bottom:0px;
}
#footer {
position:fixed;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position:absolute;
bottom: 0px;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
And thanks to it I have the footer constantly visible on my webpage when I scroll up/down. What I want to achieve is to have another footer with different text visible on the very bottom of the page, so when user scrolls down and enters #section3, the normal footer will disappear and he will see only the new footer. I thought I could just use the CSS attribute:
#section3 #footer{
display:none;
}
but seems like it does not solve my case. The full html and css code is attached in my fiddle. Thanks!
Just add z-index to #section3 and it will work :)
http://jsfiddle.net/pxyr19ob/1/
* {
margin: 0;
}
#section1 {
background-color: red;
height: 600px;
}
#section2 {
background-color: blue;
height: 700px;
}
#section3 {
background-color: orange;
height: 300px;
position: relative;
z-index: 10;
}
#footer {
bottom: 0px;
}
#footer {
position: fixed;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
<div id="betterFooter">
I would like to see this text on the very bottom of the webpage
</div>
</div>
<div id="footer">
I would like to see this text anywhere on the page but not when I scroll to the very bottom
</div>
Give #betterFooter an higher z-index than the one of #footer. And remove the trasparency from it too.
Running demo on jsFiddle
body {
margin: 0;
}
#section1 {
background-color: red;
height: 600px;
}
#section2 {
background-color: blue;
height: 700px;
}
#section3 {
background-color: orange;
height: 300px;
position:relative;
}
#footer {
bottom:0px;
}
#footer {
position:fixed;
display:block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position:absolute;
bottom: 0px;
display:block;
width: 100%;
background: rgba(0, 0, 0, 1);
z-index:10;
text-align:center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
<div id="section1"></div>
<div id="section2"></div>
<div id="section3">
<div id="betterFooter">I would like to see this text on the very bottom of the webpage</div>
</div>
<div id="footer">I would like to see this text anywhere on the page but not when I scroll to the very bottom</div>
How should the footer disappear? If the footer which should disappear has a smaller z-index than the section 3 it would move under it. But I think you want to to "toggle" it, isn't it?
You can use a z-index as someone suggested. If you really want to detect the bottom of the page on scroll (if you want to use transparent footers for example), you need to add some jQuery.
Example :
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#footer').hide();
} else {
$('#footer').show();
}
});
});
#section1 {
background-color: red;
height: 600px;
}
#section2 {
background-color: blue;
height: 700px;
}
#section3 {
background-color: orange;
height: 300px;
position: relative;
}
#footer {
bottom: 0px;
}
#footer {
position: fixed;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
#betterFooter {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
<div id="betterFooter">
I would like to see this text on the very bottom of the webpage
</div>
</div>
<div id="footer">
I would like to see this text anywhere on the page but not when I scroll to the very bottom
</div>
You can achieve this by making the z-index for #betterFooter higher than the z-index of #footer. Think of z-index as a stack of papers. An element with a higher z-index means it is closer to the top of the stack than one with a lower z-index.
So your css could look something like this:
#betterFooter {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
text-align: center;
color: #f2f2f2;
padding: 4px 0 4px 0;
}
We made the z-index: 10 because the z-index for #footer is 9.
Check out the fiddle here http://jsfiddle.net/hb7y019n/
I have a div with a background color of rgba(255,0,0,1), and a border color of rgba(0,255,0,0.2), and a 10px border-radius.
The problem is that the border color have the background color under it.
This is my code:
div{
background-color: rgba(255,0,0,1);
border: 10px solid rgba(0,255,0,0.2);
border-radius: 10px;
width: 200px;
height: 200px;
}
article{
margin: 10px;
margin-top: 20px;
background-color: rgba(255,0,0,1);
outline: 10px solid rgba(0,255,0,0.2);
outline-radius: 10px;
width: 200px;
height: 200px;
}
<div></div>
<article></article>
I need a border like at the outline.
Saddly I can't use outline instead because it doesn't have "outline-radius" property, only "-moz-outline-radius", but it doesn't work on Chrome.
Use background-clip: content-box; or background-clip: padding-box;
From MDN
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
div{
background-color: rgba(255,0,0,1);
border: 10px solid rgba(0,255,0,0.2);
border-radius: 10px;
width: 200px;
height: 200px;
background-clip: content-box;
}
<div></div>
If I understand correctly, you can use box-shadow, which sits outside the border:
div {
background-color: rgba(255, 0, 0, 1);
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.5);
border-radius: 10px;
width: 200px;
height: 200px;
/*extra styling*/
margin: 50px;
}
/*Just for demo so you can see the transparency*/
body {
background: #fff url(http://www.destination360.com/north-america/canada/images/s/canada-cn-tower.jpg) repeat;
}
<div>Red half-opacity box-shadow</div>
What you need is the background-clip attribute:
div {
background-clip: padding-box;
background-color: rgba(255,0,0,1);
border: 10px solid rgba(0,255,0,0.2);
border-radius: 10px;
width: 200px;
height: 200px;
}
article {
background-clip: padding-box;
margin: 10px;
margin-top: 20px;
background-color: rgba(255,0,0,1);
outline: 10px solid rgba(0,255,0,0.2);
outline-radius: 10px;
width: 200px;
height: 200px;
}
<div></div>
<article></article>
Try using two div.
div.outer {
border: 10px solid rgba(0, 255, 0, 0.2);
border-radius: 10px;
width: 200px;
height: 200px;
}
div.inner {
background-color: rgba(255, 0, 0, 1);
height: 100%;
width: 100%;
}
<div class="outer">
<div class="inner"></div>
</div>
I have a div which contains 2 child elements. The 1st div have content added dynamically via jQuery on user interaction. The 2nd is a text area which have a problem not getting contained within its parent div.
<div class="organizer_email_address">something#gmail.com</div> is added via jQuery after the user selects some options and click on a button.
I tried the clearfix method but it does not cause the parent div to contain the 2nd child completely. Please have a look and see what went wrong, thanks!
HTML
<div id="organizer_email_container">
<div id="organizer_email_addresses_container">
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
<div class="organizer_email_address">something#gmail.com</div>
</div>
<textarea id="organizer_email_template" class="clearfix">Some text </textarea>
</div>
CSS
#organizer_email_container {
width: 800px;
min-height: 130px;
height: auto;
margin: 25px auto;
padding: 25px;
background: #FAFAFA;
display: none;
}
#organizer_email_template {
width: 500px;
height: 120px;
background: #F6F6F6;
color: #666;
font-size: 13px;
padding: 7px 10px;
border: 1px solid #B9B9B9;
border-top-color: #A4A4A4;
-moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
clear: both;
}
.organizer_email_address {
background-color: #F3F7FD;
border: solid 1px #BBD8FB;
vertical-align: middle;
font-size: 12px;
color: #2A2A2A;
padding: 2px 5px 2px 7px;
margin: 1px;
float: left;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Why do you have a display:none on the #organizer_email_container?
Looks fine to me: http://cl.ly/1c361c0G3r0G1U0p3J0P
-
You should put your class="clearfix" in the parent container, not as a class of your text area.