recentpopularlog in

kme : boxmodel   13

html - center aligning a fixed position div - Stack Overflow
<code class="language-css">.centered {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
}</code>
webdesign  css  fixeddiv  alignment  boxmodel  dammitbrain  solution 
4 weeks ago by kme
Adds outer/innerHeight/Width methods to Zepto Adapted from https://gist.github.com/alanhogan/3935463
(function($) {
// Add inner and outer width to zepto (adapted from https://gist.github.com/alanhogan/3935463)
var ioDim = function(dimension, includeBorder) {
return function (includeMargin) {
var sides, size, elem;
if (this) {
elem = this;
size = elem[dimension]();
sides = {
width: ["left", "right"],
height: ["top", "bottom"]
};
sides[dimension].forEach(function(side) {
size += parseInt(elem.css("padding-" + side), 10);
if (includeBorder) {
size += parseInt(elem.css("border-" + side + "-width"), 10);
}
if (includeMargin) {
size += parseInt(elem.css("margin-" + side), 10);
}
});
return size;
} else {
return null;
}
}
};
["width", "height"].forEach(function(dimension) {
var Dimension = dimension.substr(0,1).toUpperCase() + dimension.substr(1);
$.fn["inner" + Dimension] = ioDim(dimension, false);
$.fn["outer" + Dimension] = ioDim(dimension, true);
});
})(Zepto);
zepto  shim  jquery  javascript  boxmodel  webdevel  webdesign  mayebsolution 
april 2015 by kme
css - IE display inline block - Stack Overflow
The old versions of IE don't understand the inline-block for block-level elements.

The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.

So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.

So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would look like this:

<div style='width: 200px; border: 1px solid black;'>
<div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
asdfasdf<br />asdf
</div>
<div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
asdfasdf<br />were
</div>
</div>
ie  css  stylesheet  workaround  boxmodel  inline-block  solution  webdesign  webmaster 
october 2014 by kme
Visual formatting model details
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
css  boxheight  boxmodel  reference  webdesign  annoyance  specification 
september 2014 by kme
Faux Columns · An A List Apart Article
The CSS

This elementary CSS rule is added to the body element:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Essentially, we’re making the entire page’s background color grey and tiling it vertically only (repeat-y). The 50% 0 bit refers to the positioning of the background image — in this case, 50% from the left side of the browser window (resulting in a centered image) and 0 pixels from the top.
css  fauxcolumns  background-image  webdesign  boxmodel  webdevel  reference 
september 2014 by kme
How do you set the height of an element to 100%?
But height is calculated differently. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the view port (thus requiring scroll bars) or if the web designer sets an absolute height on an element on the page. Otherwise, the browser simply lets the content flow within the width of the view port until it comes to the end. The height is not calculated at all.

The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
css  annoyance  webdesign  boxmodel  cssheight  reference  webmaster  webdevel 
september 2014 by kme
css - How to make the height of the div take all the space? - Stack Overflow
Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.)
html  css  boxmodel  webdesign  maybesolution  reference 
september 2014 by kme
The difference between width:auto and width:100% | 456 Berea Street
On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.

This is why a 100% footer will expand past the right margin of the body (causing a horizonal scroll bar) if you also give it padding. Margin wouldn't work either if there's a border on that <div> (unless you don't want the border to go edge-to-edge).

Solution: box-sizing:border-box;
fuckina  webdevel  css  layout  boxmodel  solution  dammitbrain 
september 2014 by kme
css - Why does setting overflow alter layout of child elements? - Stack Overflow
Still haven't had the epiphany on this one.
Overflow of anything but visible creates a new block formatting context which causes floats to be contained. It's standard behaviour.


So this:

<style>
div {
position:relative;
border:1px solid blue;
overflow:auto;
}
p#one {
float:left;
border:1px solid red;
}
p#two {
float:right;
border:1px solid green;
}
</style>
<div id="outer">
<p id="one">This is one</p>
<p id="two">This is two</p>
</div>
webdesign  css  boxmodel  floats  dammitbrain  solution 
june 2014 by kme

Copy this bookmark:





to read