Another option is to use one of my personal favorite CSS tools: box-shadow. A box shadow is really a drop-shadow on the node. It looks like this: -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5); box-shadow: 1px 2px 3px rgba(0,0,0,.5); The arguments are: 1px: Horizontal offset of the effect. Positive numbers shift it … Read more
Floating will result in wrapping if space is not available. You can use display:inline and white-space:nowrap to achieve this. Fiddle <div id=”container” style=”white-space:nowrap”> <div id=”image” style=”display:inline;”> <img src=”https://stackoverflow.com/questions/11713176/tree.png”/> </div> <div id=”texts” style=”display:inline; white-space:nowrap;”> A very long text(about 300 words) </div> </div>
It is recommended to add generic font families as a fallback while using a custom font. Eg. font-family: ‘DINPro-Medium’, serif; If the browser fails to load files for your custom font, it will use generic serif font.
I thought about this. The only way I found is by creating a mixin : @mixin setBgColorAndHover($baseColor) background-color: $baseColor &:hover background-color: darken($baseColor, 5%) And then : .button +setBgColorAndHover($green) // as $green is a color variable I use. Not the best, but that will do the job 🙂
I’ve fixed your problem by adding pointer-events: none; to the absolute block. body { margin: 0; padding-left: 10px; font: 20px Arial, sans-serif; line-height: 30px; } a:hover { color: red; } #overlay-blocking, #overlay-passing{ position: absolute; height: 30px; width: 10em; left: 0; } #overlay-blocking { top: 30px; background: rgba(0,100,0, .2); pointer-events: none; } #overlay-passing { top: 0; … Read more
If you need to adjust just the width of the cells and they contain only one line of text each you can do this: http://jsfiddle.net/sSP8W/3/ — set width of an element to it’s line-height. The problem with CSS3-transforms is that they work like as CSS’ position: relative: their original box stays the same, so rotating, … Read more
This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columns feature. From the docs: Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. … Read more
You don’t seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: “” and display: inline-block: .help-tip::after { content: “”; display: inline-block; cursor: pointer; width: 10px; height: 10px; background-repeat: no-repeat; background-image: url(“/assets/small-help-icon.gif”); }
The correct solution (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) is to use the container-fluid class on the surrounding div: <div class=”container-fluid”> <div class=”row”> Content </div> </div>
You should be able to do this with the CSS outline property: <style> .outer { outline: 2px solid #CCC; border: 1px solid #999; background-color: #999; } </style> <div class=”outer”> example </div>