What is the preferred / cleanest method to draw a 1px border between two Susy grid items, in the center of the gutter?
Susy creates a gutter by adding a margin-right to a grid item, so I can't simply add a border-right (like, for instance, you can do with Zen Grids, which creates gutters by applying half a gutter-width of padding on both sides).
I guess it can be done using the with-grid-settings() mixin to define an alternative grid without gutters, but that feels like a messy solution.
There isn't a great solution at the moment, but I hope to have one in the next major release. What you can do, is create your own math using the Susy functions (really the most powerful part of Susy). Something like this:
.left-column {
#include box-sizing(border-box);
float: left;
width: columns(2) + gutter()/2;
padding-right: gutter()/2;
margin-right: gutter()/2;
border-right: 1px solid;
}
Related
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.
I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled.
Is there any way to achieve this layout only using CSS?
The markup would be something like this:
<article>
<section>...</section>
<section>...</section>
<section>...</section>
<section>...</section>
</article>
Here a section would float left and adjust itself on the columns queue where better fit (and not bellow the baseline of the previous one, as simple float does).
It's possible using CSS columns. Here is a good explanation.
CSS:
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
HTML:
<div>
Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!
...and so on and so forth ad nauseum.
</div>
Also, I found this site by searching "CSS Masonry" on Google. It was the second result.
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/