I might be missing something basic, but why susy grid does not amount to 960px?
$total-columns : 12; // a 12-column grid
$column-width : 60px; // each column is 4em wide
$gutter-width : 10px; // 1em gutters between columns
$grid-padding : $gutter-width; // grid-padding equal to gutters
$container-style: static;
.susy-container {
#include container;
}
And I get the width 830px. Any idea why it's not 960px like other grids?
Try your math again:
(12*60) + (11*10) = 830
The official 960 Grid System uses 20px gutters, and 10px grid-padding:
$total-columns : 12;
$column-width : 60px;
$gutter-width : 20px;
$grid-padding : 10px;
That should give you what you are looking for.
(12*60) + (11*20) + (2*10) = 960
Related
I want the color of the bars in the menu icon to change on mouse hover. So far I'm only able to change the background color. Any suggestions?
Fiddle: https://jsfiddle.net/Walter69/nwczmdah/5/
.container {
display: inline-block;
cursor: pointer;
}
.container:hover {
color: #fff!important;
background: #FF0000;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #000;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
You need to add the color when hover the container:
.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
background: #FFF;
}
https://jsfiddle.net/nwczmdah/6/
I have been trying to solve my grid and I'm not sure why my columns are not stacking up next to each other. when I am making a div with a container and inside it a row and then 12 columns the columns are taking the full width then staking below
$screen-width: 1147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: ( $i /$number-of-columns ) * 100%;
background:#ccc;
float: left;
margin-left: $gutter;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin:0px auto;
padding: 0 $padding 0 $padding;
background: blue;
#include clearfix;
}
.row {
width: 100%;
margin: 0;
background: green;
#include clearfix;
}
You are dividing the available space by the number of columns, but then you are adding a margin to the left of each column So if you have 10 columns then each column is 10% of the total width + gutters. This adds up to more than 100% and is pushing three of your columns onto the next line.
Most grid systems solve this in one of two ways...
A) use css calc() to calculate the width of each column by dividing the space by the number of columns then deducting the gutter. E.g. calc(10% - 30px);
B) Use padding on each column to create the gutters and add it equally on both sides. E.g. padding:0 15px; This will give you an even spread of the columns and require no calculations but the downside is you'll need -15px margin on each side of your container to accommodate it and you'll need an extra HTML tag inside each column.
So I have managed to add that into a function, But now I have left margin what seems to be happening, which I'm not sure why is that, I have tried, things like putting a negative margin on the row.
$screen-width: 2147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#function grid-width($cols, $has-gutter:false) {
#if $has-gutter {
#return calc(((100% / #{$number-of-columns}) * #{$cols}) - #{$gutter});
}
#else {
#return calc((100% / #{$number-of-columns}) * #{$cols});
}
}
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: grid-width(#{$i}, true);
background:#ccc;
display: inline-block;
margin-left: $gutter;
float: left;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin: 0px auto;
height:100px;
background: blue;
#include clearfix;
}
.row {
width: 100%;
height:50px;
background: green;
#include clearfix;
}
I have created USA states map using jqvmap
. See
jqvmap.com
I want to write state names in middle of map like image below.
I have tried using pseudo elements but its not working.
This is my code.
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'usa_en',
enableZoom: false,
showTooltip: true,
backgroundColor: '#D9D9D9',
color: '#009F45',
borderColor: '#ffffff',
borderOpacity: 0.25,
borderWidth: 2,
hoverColor: '#999999',
selectedColor: '#0077aa',
selectedRegion: 'MO',
onRegionClick: function (element, code, region)
{
var message = 'You clicked "'
+ region
+ '" which has the code: '
+ code.toUpperCase();
alert(message);
}
});
});
/*!
* jQVMap Version 1.0
*
* http://jqvmap.com
*
* Copyright 2012, Peter Schmalfeldt <manifestinteractive#gmail.com>
* Licensed under the MIT license.
*
* Fork Me # https://github.com/manifestinteractive/jqvmap
*/
.jqvmap-label
{
position: absolute;
display: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #000000;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jqvmap-zoomin
{
top: 10px;
}
.jqvmap-zoomout
{
top: 30px;
}
.jqvmap-region
{
cursor: pointer;
}
.jqvmap-ajax_response
{
width: 100%;
height: 500px;
}
/*Colors of state*/
path#jqvmap1_nj{
fill:#7AC37A;
}
path#jqvmap1_tn{
fill:#7AC37A;
}
path#jqvmap1_in{
fill:#7AC37A;
}
path#jqvmap1_co{
fill:#7AC37A;
}
path#jqvmap1_ca{
fill:#026E38;
}
path#jqvmap1_ca:after{
content:'ca';
position: absolute;
top: 0;
color:#fff;
}
path#jqvmap1_ak{
fill:#6E6F73;
}
path#jqvmap1_tx{
fill:#6E6F73;
}
path#jqvmap1_ar{
fill:#6E6F73;
}
path#jqvmap1_la{
fill:#6E6F73;
}
path#jqvmap1_al{
fill:#6E6F73;
}
path#jqvmap1_nh{
fill:#6E6F73;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.usa.js"></script>
<div id="vmap" style="width: 600px; height: 400px;"></div>
First, there is no built-in parameter in jqvmap to add the states code.
Finding a good position for this labels is not a trivial task. For example, Florida's shape is not convex, Michigan has two parts.
Some questions related on stackexchange network:
- Algorithm for finding irrregular polygon centroid (label point)
- How to split compound polygons into convex polygons?
- Partitioning a polygon into convex parts
So, I tried to place them with a dummy algorithm, which places the state code at a kind of centroid of state shapes.
Then, you can move them as you want, and use the positions you have set.
Here is the main function which compute the centroid of a SVG path:
//svgPathParser => browserified version of
// https://github.com/hughsk/svg-path-parser
var parsedPath= svgPathParser(path);
// pathes in jqvmap are, for the most of them, in the form of [ start Point, [ curves ] ]
// if you want better results it is possible to refine that.
var origin= { x: parsedPath[0].x, y: parsedPath[0].y };
var pathPartCentroids= [];
var totalLength= 0;
for( var i=1; i< parsedPath.length - 1; i++){
var pathPart= parsedPath[i];
if(pathPart.code !="c")
break;
//centroidOfPathPart returns the centroid of a Bezier curve.
var pathPartCentroid= centroidOfPathPart([ [0,0], [ pathPart.x1, pathPart.y1 ], [ pathPart.x2, pathPart.y2 ], [ pathPart.x, pathPart.y ] ]);
pathPartCentroid.x += origin.x;
pathPartCentroid.y += origin.y;
pathPartCentroid={ centroid: pathPartCentroid, distance: norm( pathPartCentroid, origin) }
pathPartCentroids.push(pathPartCentroid);
totalLength+= pathPartCentroid.distance;
origin.x+= pathPart.x;
origin.y+= pathPart.y;
}
var centroid= {x:0,y:0};
//segments are weighted by their length
pathPartCentroids.forEach(function( pathPart ){
centroid.x += pathPart.centroid.x * pathPart.distance / totalLength;
centroid.y += pathPart.centroid.y * pathPart.distance / totalLength;
});
You can edit position with this pen.
Then use that another one to add state codes in a map.
I have two probably easy CSS questions here:
http://web288.merkur.ibone.ch/klingler/
How can I get the © Klingler Fahrzeugtechnik AG 2013 in the footer vertically aligned to the bottom? I tried align-bottom and vertical align of the p tag but without luck...
The second thing is, I feal the distance between the lines of the main text is a bit narrow. I wanted to have a bigger line height. I tried changing the line-height property of the p tag to 2.5em instead of 1.5em but this did not change anything? Why is this?
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}
Do this:
footer {
position: relative;
}
.ym-g25 {
position: absolute;
bottom: 0;
}
Do this:
.ym-g25 {
width: 25%;
vertical-align: bottom;
display: table-cell;
line-height: 1;
float: none;
}
I'm trying to position a child element behind it's parent:
<div><p>test</p></div>
My CSS is:
div {
width: 100px;
height: 100px;
background: red;
z-index: 2;
}
div p {
position: relative;
z-index: 1;
}
The z-index of the <p> is lower than it's parent z-index, but it is displayed in front. Why is that?
The div and the p in the example exist on different stacking contexts, and the div's z-index tells it to appear two levels higher than its siblings, not its children.
However, an element's z-index that is below zero puts it behind its parent.
Giving the p a z-index of -1 puts the p behind the div, regardless of the div's z-index.
If that's possible in your situation, you need to prevent stacking context on the parent. To do so, remove the z-index from your <div/> and set the <p/>'s z-index to -1:
div {
width: 100px;
height: 100px;
background: red;
/* z-index: 2; */
}
div p {
position: relative;
z-index: -1;
}