hello i have the problem that my layout is suddenly breaks out on desktop screen and i dont get it back that it dosent breaks out.
and my second problem is that i have a small white border between the navigation hover effect and the header.
http://ift.tt/1NnzTKM enter code here my code http://ift.tt/1JriYsm
On Internet Explorer 11, I have an issue with sub-pixel rendering causing an overflow of an element.
As you can see, on IE11, the red part of the gauge seems to be "peeking" out of the bottom, while it seems fine on the other 2 major browsers Chrome and FireFox.
If we zoom in on the issue in IE, we can see what's happening:
It seems to be rendering a sub-pixel over the mask.
The header "Temperature" renders as an element with the height of 34.5px, causing all elements underneath it to be shifted .5px down, causing this issue.
This is how the gauge is built up: JSFiddle
<div id="temperature-gauge" class="gauge-control" data-percentage="0">
<div class="header">Temperature</div>
<div class="gauge-elements">
<div class="gauge">
<div class="inner"></div>
<div class="spinner temp"></div>
</div>
<div class="pointer"></div>
<div class="pointer-knob"></div>
</div>
<div class="indicator">60° C</div>
</div>
Is there any way to solve this, other than giving the header a static height, to ensure all elements underneath are on a full-pixel?
How to do a Semantic UI header row fixed position without breaking table data proportions? position: fixed at css did not work. It breaks table.
There are several ways to style the elements in each page, in Enterprise applications usually the CSS Framework size increased about 1 MB, and when your users are using slow internet connection, you should decrease css framework size.
we can create new CSS for our element like .Blah and value it in css framework and do this for each element which cause increase size of css framework, but a cleaner page
<div id="blah" class="blah"></div>
we can also use our css framework utilities in each view to format each element to keep size of css framework, but a non-clean page
<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>
which of above approach is the best approach for an Enterprise application, while you ensure that a majority of your users are using slow internet connection
$(".lookup "+id).css("background-color","green");
I want to to change the background of "lookup 123456" to green when matches are found. I write this to the console: console.log(".lookup "+id) it works fine. But it's not getting selected with the selector.
Any help?
I'm trying to understand the loop and array function in Less (css). But it seems like I can't find any good tutorials on the topic.
More specifically, I'm trying to code a quick padding- & margin class library for Bootstrap 3 using Less. The coder should only change som global variables and the library will rebuild the padding/margin functionality. I want the padding/margin to be responsive. Giving a more spaciesh design on big devices, and not so spaciesh on smaller devices.
I know that the current code is extremly repetitive and will, if I expand it to every device, an extremely long document with code, that isn't gracies nor giving an outside coder a good overview of the function.
So, what can I do to minimize the code into smaller loops and arrays?
//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
@base-top-space: 100px;
@base-right-space: 100px;
@base-bottom-space: @base-top-space;
@base-left-space: @base-right-space;
// Variables for different Types of sizes of space - also refered to in mixin-space as @mixin-space-size
@space-small: 0.75;
@space-medium: 1;
@space-large: 1.75;
@space-xlarge: 2.5;
// Variables for different types of devices - also refered to in mixin-space as @mixin-space-device
@space-xs: 0.5;
@space-sm: 1;
@space-md: 1.25;
@space-lg: 1.5;
//Variables of types of space in mixin
// Padding
@space-type-padding-top: escape('padding:');
@space-type-padding-top: escape('padding-top:');
@space-type-padding-right: escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left: escape('padding-left:');
// Margin
@space-type-margin: escape('margin:');
@space-type-margin-top: escape('margin-top:');
@space-type-margin-right: escape('margin-right:');
@space-type-margin-bottom: escape('margin-bottom:');
@space-type-margin-left: escape('margin-left:');
// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
//
// Local variables Global variables:
// =============== ================
// Eg.: mixin-space-type = @space-type-padding-top
// Eg.: mixin-space-value = @base-top-space
// Eg.: mixin-space-size = @space-small, @space-medium, @space-large, @space-xlarge
// Eg.: mixin-space-device = @space-xs, @space-sm, @space-md, @space-lg
.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
@mixin-space-type abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}
// The following media queries beloow generates different types of padding sizes.
// Top: .pad-top-s, .pad-top-m, .pad-top-l, .pad-top-xl
// Right: .pad-right-s, .pad-right-m, .pad-right-l, .pad-right-xl
// Left: .pad-left-s, .pad-left-m, .pad-left-l, .pad-left-xl
// Bottom: .pad-bottom-s, .pad-bottom-m, .pad-bottom-l, .pad-bottom-xl
// The following media queries beloow generates different types of margin sizes.
// Top: .mar-top-s, .mar-top-m, .mar-top-l, .mar-top-xl
// Right: .mar-right-s, .mar-right-m, .mar-right-l, .mar-right-xl
// Left: .mar-left-s, .mar-left-m, .mar-left-l, .mar-left-xl
// Bottom: .mar-bottom-s, .mar-bottom-m, .mar-bottom-l, .mar-bottom-xl
@media (max-width: @screen-xs-max) {
.lg-md-content-margin {
margin-top: 0px;
}
.pad {
&-top {
&-s {
.mixin-space(@space-type-padding-top, @base-top-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-top, @base-top-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-top, @base-top-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-top, @base-top-space, @space-xlarge, @space-xs);
}
}
&-bot {
&-s {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-xlarge, @space-xs);
}
}
&-right {
&-s {
.mixin-space(@space-type-padding-right, @base-right-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-right, @base-right-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-right, @base-right-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-right, @base-right-space, @space-xlarge, @space-xs);
}
}
&-left {
&-s {
.mixin-space(@space-type-padding-left, @base-left-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-left, @base-left-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-left, @base-left-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-left, @base-left-space, @space-xlarge, @space-xs);
}
}
}
.mar {
&-top {
&-s {
.mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-top, @base-top-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-top, @base-top-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-top, @base-top-space, @space-xlarge, @space-xs);
}
}
&-bot {
&-s {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-xlarge, @space-xs);
}
}
&-right {
&-s {
.mixin-space(@space-type-margin-right, @base-right-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-right, @base-right-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-right, @base-right-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-right, @base-right-space, @space-xlarge, @space-xs);
}
}
&-left {
&-s {
.mixin-space(@space-type-margin-left, @base-left-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-left, @base-left-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-left, @base-left-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-left, @base-left-space, @space-xlarge, @space-xs);
}
}
}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
// redo the whole process and changing some global variables
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
// redo the whole process and changing some global variables
}
@media (min-width: @screen-lg-min) {
// redo the whole process and changing some global variables
}
I am currently building a small menu consisting of two images. The image caption on these images was build with this little css stylesheet. CSS CAPTION ANIMATION I am using the images to switch between different containers, filled with text. But since i've integrated the css captions, the jQuery "toggle" statement won't work constantly anymore. It seems like it only works when the animation has stopped. Therefore i can't switch the containers during the css animation. Here is a shortened upload of the construct. (try to switch rapidly between the two divs, by clicking on the images)
Thanks for any help.