I have a mixin that splits items of a users choosing into an inline-block grid. Users can specify how many in a row, gutter and the child element to target.
This all works fine and an example is below:
Original - SCSS
#mixin list-grid($per-row, $spacing, $selector){
margin: 0 em(-$spacing/2);
#include clearfix;
//negate the display-inline biatch
letter-spacing: -0.31em;
> #{$selector} {
width: 100% / $per-row;
font-size: 16px;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
My question is.. When i try and use margin I need to rework the calculations as previously this worked because padding is not accounted when working out widths, whereas now with margin I need to adjust the widths to account for the chosen margin.
I'm not sure how to best approach this. Any help appreciated.
New Attempt - SCSS
#mixin list-grid($per-row, $spacing, $selector){
margin: 0 em(-$spacing/2);
#include clearfix;
//negate the display-inline biatch
letter-spacing: -0.31em;
> #{$selector} {
/* not sure what to do here */
width: 100% / $per-row -$spacing;
font-size: 16px;
position: relative;
margin: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
The latest attempt ends up with a width of 8% if I do a row of 3, with 25 gutter. My math must be way off.
Working example
I'm trying to have a button that changes to a gradient background when active. The buttons have an image + text. The image is offset 5px from the left margin. The problem is that when the active state is invoked the 5px padding is excluded from the gradient.
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Testing</title>
<style>
.controls {
display: inline;
margin-left: 10px;
}
.button {
padding: 5px 5px 5px 25px;
border: 2px solid #666666;
color: #000000;
text-decoration: none;
/* background: #dcdcdc url(static/16x16/arrow-black.gif) no-repeat scroll 5px center; */
background: rgba(230, 230, 230, 0.75) url(static/16x16/arrow-black.gif) no-repeat scroll 5px center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.button:hover, .button:focus {
background: rgba(200, 200, 200, 1.0) url(static/16x16/arrow-color.png) no-repeat scroll 5px center;
border: 2px solid #3013ED;
}
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
</style>
</head>
<body>
<button id="scale-button" class="controls button">Scale it</button>
</body>
</html>
The button looks like this in normal state:
When I hover it is fine and looks like this:
But when it's active I end up with the padding excluded from the gradient background.
Is there some way to adjust the padding so that the gradient background doesn't exclude the leftmost pixels? If I have to adjust the image so that no padding is required I can do that, but I'm hoping there is a better way.
Here are the two images I for the arrows: , . They're both 16x16 images.
If you alter your code in the following fashion it will remove that offset. Change:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
to this:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 0px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
Where the only change I made was on the background declaration from 5px to 0px
I ended up finding my answer on stackoverflow. Mine is a duplicate. The key answer is that there can be multiple background-position specifications that correspond to the multiple background images. Not to duplicate the entire post, but:
background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;
Here's exactly what I was looking for:
How to position a background-image using an offset but not the linear gradient
I'm trying to make an image-less icon for a drop down menu using CSS triangles that point up and down. Code looks like this: http://jsfiddle.net/FGrR2/6/
.d, .u {
float: left;
clear: left;
width: 0px;
height: 0px;
border-style: solid;
margin-bottom: 5px;
}
.d {
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
}
.u {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #007bff transparent;
}
However, if I load the page in Firefox 17.0.1, the edges of the triangles don't line up. Here's a zoomed version of how that looks: http://imgur.com/7W8Owmk It's like the 2nd triangle is "aligned" to the right or something.
Has anyone else encountered this?
I have a header that is spanning the full width (14 columns) of its div.page container. My Susy grid is 14 columns wide. So now when I try to click to inspect other page elements that are under the header element in Google Dev Tools, I simply can not. I can only access the header.
Below you can see the header which has a translucent pink background-color. Everytime I click one of the green divs up top, I hit the header.
What I would like is for that header to only span the first two left columns of the page. The problem is that I need to have a fixed position header which will contain my h1 title and nav so I need to have a new container context similar to what Eric Meyer did here
https://groups.google.com/forum/?fromgroups#!topic/compass-users/A2rFv2ihwas
I don't really see what I am doing wrong here. Is there no way around this?
My style.sass
#import compass
#import susy
#import normalize
/* Susy Settings */
$total-columns : 5
$column-width : 4em
$gutter-width : 1em
$grid-padding : $gutter-width
$tablet : 10
$desktop : 14
// Susy-grid-background override to draw out horizontal lines
=susy-grid-background
+grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
a
background: rgba(0,220,0,.2)
display: block
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgba(0,20,200,.3)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: rgba(250,250,0,.2)
p
+leader(1)
+trailer(1)
background: rgba(0,220,0,.2)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* BREAKPOINTS */
+at-breakpoint($desktop)
.page
+susy-grid-background
header
+container
+susy-grid-background
background: rgba(250,0,0,.2)
position: fixed
left: 0
right: 0
h1#logo a
+hide-text
float: right
+span-columns(2)
background: rgba(200,10,250,.1)
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(0,140,250,.3)
.main
+span-columns(12 omega)
+leader(2)
background: rgba(1,240,200,.3)
.tile
// +span-columns(4, 12)
+isolate-grid(4, 12)
+adjust-leading-to(9)
+trailer(1)
background: #0f6
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
.pagefoot
background: rgba(45,0,120,.3)
+span-columns(12,12)
UPDATE
I have tried Eric Meyer's suggestion of applying z-index:-1 to the header element to send it behind all my green divs. This allowed me to click my green divs just fine but now when I try to click on my nav links I hit the .page container. Then I tried applying z-index:2 to the .page container but that did not help. Not sure how to gain click access to the nav
Here is my new code:
#import compass
#import susy
#import normalize
#import base
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
a
background: rgba(0,220,0,.2)
// display: block
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgba(0,20,200,.3)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: rgba(250,250,0,.2)
p
+leader(1)
+trailer(1)
background: rgba(0,220,0,.2)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* BREAKPOINTS */
+at-breakpoint($desktop)
.page
+container
+susy-grid-background
header
+container
+susy-grid-background
background: yellow
z-index: -1
position: fixed
left: 0
right: 0
h1#logo a
+hide-text
float: right
+span-columns(2)
background: rgba(200,10,250,.1)
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(0,140,250,.3)
.main
+span-columns(12 omega)
+leader(2)
background: rgba(1,240,200,.3)
.tile
+isolate-grid(4, 12)
height: 300px
+trailer(1)
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
#extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)
.pagefoot
background: rgba(45,0,120,.3)
+span-columns(12,12)
See the answers and comments on "A `position:fixed` sidebar whose width is set in percentage?".
z-index may be the best fix, but you also may be able to fix it by getting rid of the clearfix on the header - so it collapses around the floated elements inside it. That clearfix is happening in the Susy container mixin, so you would have to use set-container-width instead (along with auto-margins to center it in the window.
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;