Lets say I have some markup like this:
<html>
<head>
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: green;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Imagine "container" is filled with hundreds of a's for testing purposes of padding.
Now, what I want to do is to make an area of whitespace between the edges of "container" and its content on the left and right hand sides. So I add:
padding-left: 50px;
padding-right: 50px;
Now from what I (thought) I understood, this would mean that if 100 a's fitted per line before, only 80 or so would fit now. In other words, "container" would remain the same width but grow downwards.
However, what I am seeing is that the size of "container" is increasing horizontally and not vertically.
How can I get "container" to grow down vertically and stay the same width horizontally?
You need to change the width to 800px and then add your padding. Padding is additive to the width.
W------W - original width
PW------WP - original width plus padding either side
PW----WP - smaller width plus padding either side
Box model courtesy of Can Berk Güder
What garry said, If youre using Chrome or Firebug plugin for Firefox you can right click and "inspect element" and see a visual representation of how your elemenent is being sized, really helps in these situations.
The affects of adding padding or margin to an element depend entirely on the browser you're viewing the page in. Padding and margin SHOULD be additive as Garry says but that's not the case with IE6 so you'll need to do some research around browser differences and how you can accommodate them in your style rules.
From what it looks like your doing you just want a padding to be applied to the whole page. You could do that by directly referencing body in your CSS. so you'll have -
body
{
padding:0 50 0 50;
}
You could also add a margin to anything inside the div:
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: green;
}
#container *
{
margin-left: 50px;
margin-right: 50px;
}
</style>
Related
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
I'm setting up a webpage in Github using Jekyll. I've implemented Mathjax in order to render mathematical text. My configuration is minimal:
<!-- Mathjax -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
It works fine, except for the fact that inline math text and uppercase letters look to big, considering the surrounding text. I set up this page as an example.
So far the only thing I've been able to do is to scale down the math by a factor of the surrounding text, by using
"HTML-CSS": {
scale: 90
}
The problem is that it scales all math expressions, including lowercase letters that seem to have the right size without scaling.
So my question is if there is a way to fix this discrepancy.
is ... there is a way to fix this discrepancy?
No. MathJax matches the surrounding font by scaling its own fonts so that the ex-height matches that of the surround font. That means that lower-case letters should be approximately equal in height, as is shown in your example. So MathJax is correctly determining the ex-height of the surrounding and matching that.
The reason the capitals don't match is that different fonts have different ratios between the heights of the upper- and lower-case letters. So if you get the lowercase letters to match, the uppercase ones will not (and vice versa). With fonts that have a different uppercase-to-lowercase height ratio than the MathJax fonts, you won't be able to get both to match the surrounding font. That is inherent in the design of the two fonts.
The only other possibility would be to scale the uppercase letters differently from the lowercase ones, but that would mean the weights would not match, and the quality of the math layout would suffer.
So, no, you can't get both, in general.
Edit 30 April 2020:
In the comment below we discuss the meaning of the em unit, which is the same as the (computed) font-size for the font. Unfortunately, that is not the same as the height of the capital letters in the font. For example, the code below shows an M inside a red box of height and width 1em and an x inside a box of height and width 1ex for the fonts Times, Courier, Impact, and Zapfino. Run it to see the results.
div {
font-size: 60px;
display: inline-block;
min-width: 120px;
}
em-box {
display: inline-block;
background-color: red;
width: 1em; height: 1em;
margin-right: -1em;
}
ex-box {
display: inline-block;
background-color: red;
width: 1ex; height: 1ex;
margin-right: -1ex;
margin-left: 10px;
}
M-box {
display: inline-block;
min-width: 1em;
}
x-box {
display: inline-block;
min-width: 1ex;
}
<div style="font-family: Times">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Courier">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Impact">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Zapfino">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
Here is an image in case you can't view the results above.
Note that the em boxes (red) are the same in all cases, and are the height specified in the CSS (50px), whereas the height of the M varies within that box (whereas the height of the x matches its box). So the em-size can't be used to tell the height of the capital letters in the font.
I don't know of a way to determine the actual height of the M.
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely.
However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit.
Is there a way to make masonry more aggressive in moving elements? Or have it go over two times to make sure there are no empty spaces?
You should probably look at masonry's "big brother" Isotope here. Mind you, if you have elements that are sorted in a certain order or fixed in a certain order - and that are wider than a single column width - they can "block" a column at narrow browser widths.
EDIT Maybe this fiddle explains it a bit better. If you look at that one and - while observing the numbers in the divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, one gets a white gap. Maybe you can use Isotope's shuffle and/or reLayout methods and sacrifice ordering your elements in a strict order? Best would be a jsfiddle with your issue.
<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;
width: 100px;
height: 100px;
font-size: 3em;
font-weight: 700;
padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
border:1px dotted black;
}
article .tile.wide {
width: 200px;
}
article .tile.tall {
height: 200px;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
To expand on Dan's answer, having just had this problem myself, it seems that Packery is a more up to date; much more maintained version of Masonry - from the same author. It's not clear to me why both projects exist as separate entities, with only typos fixed in the latter.
The good news is - it's almost totally a drop-in replacement. The only change I had to make (other than names masonry->packery where used) was to remove an option, because it is the default and only option in Packery.
That was isFitWidth: true, my feeble attempt to make Masonry pack things something close to how nicely Packery does without any options at all.
Another nice change with Packery is that gutter: x applies to vertical as well as horizontal gutters. In Masonry, this was horizontal only - though trivial with margin-bottom in CSS, this felt like a needless hack.
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.