Any help is much appreciated. I'm using Sass, Compass and Susy to redesign my website. I'm needing to figure out how I can set up a vertical center in browser. I have a row with five columns and I need to center it vertically.
Here's the HTML:
<div class="layout">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
The sections create the row of columns. I need to center the .layout class vertically.
For any issue like this, start by solving for vertical-centering in CSS. The two best methods I know, only work in modern browsers. The best option is flexbox, followed by a little trick using position and transform. There are other solutions if you search around for "css vertical center".
Both of those require prefixing to work across browsers, which is where Compass might be helpful. Compass has mixins to help with both flexbox and transforms.
Related
I'm trying to position two buttons side-by-side using Susy and this seems to work fine:
.fifty {
#include span-columns(3);
#include nth-omega(2n);
}
However as soon as I ad a 1px border to the button the effective width is 100%+4px and thus it breaks the layout.
I'm using the Compass Vertical Rhythm plugin for all my button padding values so would like not to mess that up.
This is related to "How to include padding in column width with Susy", but your second option is a bit different. This problem isn't specific to Susy - it's true of any fluid layout - But Compass and Susy can help you with the first solution:
Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:
#include border-box-sizing;
Or just use the Compass box-sizing(border-box) mixin where you want it (on these buttons).
Since borders don't take % values, there is simply no good way to add borders to fluid elements (using the default content-box model). If you can't use the border-box model, the only other option is to add an internal element in the markup, use the outer for sizing, and the inner for borders and styles.
There is a third option - using calc() - but it's harder to do, and has even less browser support...
Option #1 is the best by far - as long as you can leave IE7 out of the fun.
Hi for some reason pie isnt working on my rounded corners, can anybody please help. Below is my CSS, in ie8 it doesnt show the background color either just the text within the button.
http://jsfiddle.net/doddsy1005/VcrGL/1/
may be due to a filter like this.filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4265b', endColorstr='#e10e49',GradientType=0 );
As per your remark in the question: yes, it may very well be due to the filter.
There is a well-known bug with gradients drawn using filter that messes up rounded corners. This bug is best known in IE9, because IE9 does support border-radius, but still needs filter gradients, so they often clash. I can easily see that it might break CSS3Pie's rounded corners as well though.
I guess the real question is why are you using filter at all for gradients? If you're using CSS3Pie for rounded corners, you can also use it for CSS gradients; it supports both features. The whole point of CSS3Pie is that you don't have to do things like use filter for gradients.
So the answer is simply to stop using filter for your gradients. Use CSS3Pie as you already do for border-radius, and the problem will go away.
Hope that helps.
I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.
I trying to make a simple animated menu that slides in and out but i have stumbled on getting the div's to overlap as required.
http://jsfiddle.net/bluestreak/eQcsc/
It currently animates well but doesn't over lap. and I have tried all manner of combinations of positioning.
Give all your infomenu IDs position:absolute
I've found this nice slick effect in here - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html.
Here is a copy of this - http://jsfiddle.net/cyvvilek/cL7x6/3/
I was wondering if there is any way to get this effect on hover.
Together with some CSS animation would give a nice effect, I think.
There is a heavy use of :after and :before in CSS so it cannot be #box:after:hover or anything like that :)
I've heard about possibility of nesting stuff in SASS or LESS..
Can this be done with CSS alone?
Thx
Unfortunately, pseudo elements like :after and :before cannot be transitioned yet. SASS and LESS compile down to CSS, so everything technically possible with SASS or LESS, is possible with plain CSS.
What you can do is have a seperate element (maybe div) with the top shadow and fade it in and out on hover. Alternatively you can use an image.