Is there any solution how to avoid 1px "border" issue gap in Chrome and Firefox ? I have a grid by 4 columns each column is 25% inside is image that is fitting 100% width of parent div. When you changing a viewport and resizing browser sometimes you see on certain size 1px white gap. Probably it's because of wrong calculation percentage by browser. Did somebody solve this issue?
What you can do is put a wrapper around the elements inside of the div and set the width to 101% and then on the parent div (the original wrapper) you can set it to overflow: hidden like so:
HTML
<div class="big-poppa"> <!-- Original Wrapper -->
<div class="little-momma"> <!-- New Wrapper -->
<div class="this-little-piggie market"></div>
<div class="this-little-piggie home"></div>
<div class="this-little-piggie roast-beef"></div>
<div class="this-little-piggie none"></div>
</div>
</div>
CSS
.big-poppa { width: 100%; border: 1px solid black; overflow: hidden; }
.little-momma { width: 101%; }
.this-little-piggie { width: 25%; float: left; height: 40px; }
.market { background: #eee; }
.home { background: #999; }
.roast-beef { background: #666; }
.none { background: #333; }
Here is the fiddle: http://jsfiddle.net/YLJmE/
Related
I have a fixed a button at the right of a bootstrap container.
But in high resolution, the button moves outside of the bootstrap container as it is fixed relative to body, not container.
Note: It must be fixed (not absolute) because I don't want it to scroll with window.
Here is the code:
<div class="body">
<h1>Body</h1>
<div class="container">
<h1>Container</h1>
Enquire Now
</div>
</div>
CSS:
.fixed-btn {
padding: 10px 20px;
background: #000;
color: #FFF !important;
text-decoration: none !important;
line-height: 30px;
position: fixed;
right: 70px;
top: 50px;
}
.body {
background: aquamarine;
min-height: 1000px;
}
.container {
background: antiquewhite;
min-height: 1000px;
max-width: 400px;
}
Is it possible to make it fixed within a bootstrap container? so it would not move outside of the container.
Look a live code at JSFIDDLE.
One possibility is to position the fixed element using calc
.fixed-btn {
position: fixed;
left: calc(50% + (400px/2)) ;
}
In this case the 400px (from your demo) would be the width of the container based on the various widths in Bootstrap.
You would have to adjust this in each media query.
JSfiddle Demo
Problem
I have two divs with overflow scrollbars. Both have the same width. Still, they get different width.
It's a CSS problem but I added some JS. It makes it possible to drag the bottom scrollbar to affect the top scrollbar.
I only expect it to work with webkit browsers like Chrome.
Jsfiddle: http://jsfiddle.net/jedrga5w/3/
HTML
<div class="mmt">
<div class="mmt-scrollbar">
<div></div>
</div>
<div class="mmt-cropped">
<div>Content2</div>
</div>
</div>
CSS
.mmt-cropped {
height: 200px;
background: #eee;
}
.mmt-cropped,
.mmt-scrollbar {
overflow-x: auto;
width: 532px;
}
.mmt-cropped div,
.mmt-scrollbar div {
width: 770px;
}
.mmt-cropped::-webkit-scrollbar,
.mmt-scrollbar::-webkit-scrollbar {
-webkit-appearance: none;
}
.mmt-cropped::-webkit-scrollbar:horizontal,
.mmt-scrollbar::-webkit-scrollbar:horizontal {
height: 11px;
}
.mmt-cropped::-webkit-scrollbar-thumb,
.mmt-scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .2);
}
.mmt-cropped::-webkit-scrollbar-track,
.mmt-scrollbar::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
.mmt-scrollbar,
.mmt-scrollbar div {
height: 11px;
}
JS - Not required
Just to connect the bottom scroll to the top scoll. Not required but it makes it easier to spot the problem.
jQuery(window).load(function($) {
$('.mmt-cropped').scroll(function(){
$('.mmt-scrollbar').scrollLeft( $('.mmt-cropped').scrollLeft() );
});
});
Demo
css
.mmt-scrollbar,
.mmt-scrollbar div {
height: 11px;
overflow-y:hidden; /* add this as there is a vertical scrollbar bar which is occupying some space */
}
you can find the scrollbar by giving some height to (Demo)
.mmt-scrollbar,
.mmt-scrollbar div {
height: 100px;
}
Notice: the vertical scrollbar to the right of .mmt-scrollbar div after giving it some height.
I'm having some issues with creating this effect with CSS:
http://i.stack.imgur.com/sMBmg.jpg
Basically, I want my content div to float on top and slightly overlap both the header and the footer elements. I've played around with some absolute positioning but I'm not sure if that's the best way to go. I want a responsive solution that works for all devices and screen sizes. Any suggestions?
Here is one way you could do it.
If this is your HTML:
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
Apply the following CSS:
.header, .footer {
height: 100px; /* not strictly needed... */
border: 1px solid blue;
}
.content {
width: 50%; /* for example... */
height: 400px;
background-color: yellow;
margin: 0 auto;
border: 1px dotted blue;
}
.header {
margin-bottom: -25px;
}
.footer {
margin-top: -25px;
}
.content {
position: relative;
z-index: 1;
}
You can see the demo at: http://jsfiddle.net/audetwebdesign/CNnay/
You set up three block level elements for the header, content and footer.
Apply negative margins to the bottom of the header and the top of the footer to
create the offset effect.
Finally, apply z-index to .content to tweak the stacking order so that the
content block is painted over the footer block.
In this layout, the content block will expand vertically as you add more content.
The results looks like:
You can try position:fixed or z-index:2000 of your div class
i have created this http://jsfiddle.net/RVnU7/1/
Big picture: I'm trying to make a bar graph made up of discrete units. Each unit will be a div. The bar will grow from bottom to top.
Details: I have a container div that holds all of the unit divs, or blocks. The container has a vertical-align of bottom to do this.
This is what it should look like: https://jsfiddle.net/hpf4h/1/
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
#container {
height: 100px;
width: 10px;
padding: 1px;
background-color: #00f;
display: table-cell;
vertical-align: bottom;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
That works fine, but I need the container to have a height of 100%. Which makes this happen: https://jsfiddle.net/7n7ZH/1/
I'd prefer to find a way to do this with CSS, preferably not too hacky. I'm already using jQuery for the behavior in my project, so I could use that as a last resort.
Edit: Also, all parent tags also have a height of 100%, including HTML and body.
Make #container's container element display:table like this : https://jsfiddle.net/7n7ZH/2/
html, body { height: 100%; margin:0; }
body { display:table; }
#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
display: table-cell;
vertical-align: bottom;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
When you use display:table-cell the browser looks for ancestor elements being display:table-row, display:table-row-group and display:table. If it can't find them, it creates pseudo elements to stand in for them. That's what's happening here.
So when you say display:table-cell; height:100%, that's 100% of the created pseudo element that is display:table. But that pseudo element is only as high as its content, and there's no way in CSS to say "make the pseudo-element have height that's 100% the height of its parent instead".
But it is possible to have a real element be display:table and set its height to 100%, in which case the browser will use that and not create the display:table pseudo element.
Applying display:table-cell; and height at the same time rarely gives the results you'd expect. I see that you're trying to use vertical-align which is probably why you added the table-cell. Try css positioning instead:
Remove display:table-cell; and vertical-align from your container.
Add height:100%; to both the body and html elements so your container has room to grow.
Set the container to position:relative; which will make it the origin of all positioned children rather than the document root (body tag). This will allow you to move your container around without screwing up the child positions.
Add a wrapper around your blocks (you could use ul, li for this rather than divs).
Position the block container as position:absolute; bottom:0;
Here's the code...
#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
position:relative;
}
.blockContainer
{
position:absolute;
bottom:0px;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
body { height:100% }
html { height: 100%}#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
position:relative;
}
.blockContainer
{
position:absolute;
bottom:0px;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
body { height:100% }
html { height: 100%}
...and here's the fiddle...
https://jsfiddle.net/kPEnL/1/
I'm unable to provide assistance with doing it in the way you have started, but taking your original big picture of trying to make a vertical progressbar, here's an alternative which uses the progressbar in Twitter Bootstrap. In its existing form, it doesn't do vertical progress bars, but this modification does.
I originally suggested using stacked bars, but this doesn't work with the vertical implementation. Instead, I've got a solution which uses CSS gradients to draw the blocks in, but still uses the normal bootstrap progress bar.
.progress.discrete {
background-image: linear-gradient(0deg,
black 0%, green 5%, green 95%, black 100%);
background-size: 100% 10%;
background-repeat: repeat-y;
}
/* Bar is used to cover up the blocks, so make it look like a background */
.progress.discrete .bar {
background-image: linear-gradient(to right, #f5f5f5, #f9f9f9);
}
I assumed you wanted your blocks to be a percentage of the bar height rather than an absolute size - this means I can't apply the gradient to the bar. Instead, it can be applied to the background, and the bar used to cover it up (i.e. set width of the bar to 100-progress%). I've also included an example which uses a fixed block size applied to the bar if that's what you wanted.
http://jsfiddle.net/BHTXZ/3/
It needs a little tidying up, but does the trick.
Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.
Something like this:
This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container
I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.
Here's what I've tried:
CSS:
.line
{
display:inline-block;
border-bottom:2px #5B3400 solid;
margin-left:5px;
width:80%;
}
HTML:
<h2>Our Mission<span class="line"></span></h2>
Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?
I know this should be easy but I haven't been able to find a solution yet.
Thanks!
THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):
You can try using this method instead, if your <h2> is on top of a background image.
HTML:
<h2 class="line-title"><span>This is my title</span><hr /></h2>
CSS:
.line-title {
font-size: 20px;
margin-bottom: 10px;
padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}
/* clearfix for floats */
.line-title:after {
content: "";
display: table;
clear: both;
}
.line-title span {
padding-right: 10px;
float: left;
}
.line-title hr {
border:1px solid #DDD;
border-width: 1px 0 0 0;
margin-top: 11px;
}
See the working example here: http://jsfiddle.net/yYBDD/1/
How it Works:
the <h2> tag acts as a container for a floated element.
the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.
the <hr /> acts as the line, and fills up the remaining space to the right.
THIS METHOD WILL WORK WITH SOLID BACKGROUND COLORS:
HTML:
<h2 class="line-title"><span>This is my title</span></h2>
CSS:
.line-title {
border-bottom: 1px solid #DDD;
font-size: 20px;
height: 12px;
margin-bottom: 10px;
}
.line-title span {
background: #FFF;
padding-right: 10px;
}
You can see a working example here: http://jsfiddle.net/yYBDD/
How it works.
the <h2> tag has a class that sets the height to half of the height of the text it contains.
the <h2> has a bottom border, that extends to the width of it's parent container (since it's a block element).
the <span> inside of the <h2> has a white background, which will cover the area where the text and border overlap.
And finally, the <h2>> has a bottom margin, that compensates for the reduced height of the <h2>.
You could use flexbox to do this.
http://jsfiddle.net/eHHep/ (prefixes not included)
<h1 class="lineme">This is my header</h1>
<h2 class="lineme">This is another header</h2>
.lineme {
display: flex;
}
.lineme:after {
display: block;
content: " ";
border-bottom: 1px solid;
flex: 1 1 auto;
}
Advantages over other methods:
No extra markup required
Background color is not required
Down side:
Support for flexbox is low due to IE10 being the first IE to support it (see http://caniuse.com/#search=flexbox)
Your line goes away if your text wraps around
HTML:
<h2><span>Our Mission</span></h2>
CSS:
h2{
border-bottom: 1px solid #000;
height: 20px;
overflow: visible;
display: block;
width: 100%;
}
h2 span{
display: inline-block;
background: #fff;
height: 21px;
}
This way it'll overflow on the bottom border as it has bigger height.
Demo: http://jsfiddle.net/afuzk/
Here's something I tried and that worked:
HTML
<h2>Our Mission</h2>
CSS
h2:after
{
content: "\00a0";
border-bottom: solid 2px black;
position: fixed;
top: 0;
width: 100%;
margin-left: 3px;
}
The JS Bin to test: http://jsbin.com/ayuvuc/4