`max-width` and `min-width` shorthands - css

Is there a shorthand for this properites?
For example, right now I do:
.main-exchange-container--title {
min-width: 288px;
max-width: 900px;;
}
Is there a way to do something like:
.main-exchange-container--title {
widths: 288px 900px;
}

No but it can be done like below:
.main-exchange-container--title {
/*
min-width: 288px;
max-width: 900px;
*/
width:clamp(288px,100%,900px);
height:50px;
background:red;
margin:auto;
}
<div class="main-exchange-container--title"></div>

There isn't a specific shorthand, but in vanilla CSS you could move it to its own class if reused a lot, eg.
._width-primary {
min-width: 288px;
max-width:900px;
}
<div class="main-exchange-container--title _width-primary">
</div>
Or, If you have 'framework' libraries, they may have classes to help simplify this (eg. bootstrap's grids/columns)
<div class="main-exchange-container--title col-12">
</div>
(it'll behave a little different to your rules though, so youd need to find the closest equivalent)
Or, If you have a pre-processor like LESS or Sass, it probably has a feature like mixins/includes to reuse certain rules without needing to export extra classes and add it to your HTML.
Example in LESS:
._width-primary() {
min-width: 288px;
max-width: 900px;
}
.main-exchange-container--title {
._width-primary()
}
in Sass (SCSS):
#mixin _width-primary {
min-width: 288px;
max-width: 900px;
}
.main-exchange-container--title {
#include _width-primary;
}
both of the above will output this CSS:
.main-exchange-container--title {
min-width: 288px;
max-width: 900px;
}

Related

change the background image by "hovering" over a div in css

trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!
HTML
<div class ="spiral">
<img src="spiral.svg">
</div>
CSS
img {
max-width: ???;
max-height: ???;
}
.spiral:hover {
background:url('color.jpg') center;
z-index: some positive number higher than my orig background image?
}
body {
background:url('orig.jpeg') center;
z-index: -60;
}
You may try something like this.
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:0.1s;
}
.twitter:hover{
background-position:-32px 63px;
}
<div href="https://twitter.com/georgevere12" class="twitter">
</div>
looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450

Apply same style to same type of element of different classes [duplicate]

div#id_div_allposts {
width: 100%;
}
div.class_div_post {
width: 100%;
}
div.class_div_editdelete {
width: 100%;
}
How can i write it in one line ?
And what's the way to select a html tag with id and class ?
All you have to do is separate them with a comma e.g
div#id_div_allposts,
div.class_div_post,
div.class_div_editdelete {
width:100%;
}
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
You can group multiple selectors in CSS via a comma.
Note: The comma starts an entirely new selector from the very start.
Use the comma to separate multiple declarations
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
Selecting an html tag with and id and class would be
div#ID.class
Try this:
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
or assuming that you want all div to have width 100% then...
div{
width: 100%;
}

How to declare variable in CSS

Is it possible to declare your self a variable in CSS, for example if i had the same property for the following two tags
.cellLeft{
width: 45%;
min-height: 130px;
}
.cellRight{
width: 45%;
min-height: 130px;
}
Is it possible to declare x=130px
so i dont have to keep changing min-height everywhere
like for example;
x=130px;
.cellLeft{
width: 45%;
min-height: x;
}
.cellRight{
width: 45%;
min-height: x;
}
You have to use a CSS preprocessor for this, like LESS or SASS. You can't do it with pure css. Have a look here: http://lesscss.org/ or here: http://sass-lang.com/ (I use LESS myself)
Extra:
A CSS-only solution to your example would be to use a modular approach in which you define multiple classes for specific attributes which you can re-use in your HTML. I would suggest doing this even when using a CSS preprocessor. So for your example you could make these classes:
.cell {
width: 45%;
min-height: 130px;
}
.cell-left {
}
.cell-right {
}
And then add both the cell and the cell-left / cell-right classes to your HTML elements. This way you only have to declare the width and min-height properties once.
Or, you could do:
.cell-left, .cell-right {
width: 45%;
min-height: 130px;
}
So you only have to change it once as well.

Why does placing a CSS class above others completely change other unrelated classes?

So I have the following at the top of bootstrap.css
.scrollable-table {
height: 800px;
overflow: scroll;
}​
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
scrollable-table changes the look of some of my other html while doing what I need it to do. Specifically from what I can tell the height in .top-buffer is whats being changed. When I move it under those first two it works as expected without causing any issues. So this
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
.scrollable-table {
height: 800px;
overflow: scroll;
}​
Where I use scrollable-table is here
<div class="span4 scrollable-table" style="background-color:white">
scrollable-table is also only ever used there!
For good measure I'll also show where top-buffer is used
<div class="span3 top-buffer" style="background-color:#DBDBDB">
I just don't understand how a completely unrelated class to the other two can change things so drastically. I understand that CSS cascades the styles, but in this case it makes no sense because they are not related. I should mention this is Twitter Bootstrap, and is at the very top over what CSS was already there. I'm hoping someone coud shed some light on why this.
The order of the classes in the stylesheet (but not in the HTML) matters because the stylesheet is read top to bottom. If you have two classes in this order:
.a { color: blue; }
.b { color: red; }
Both of these elements will be red:
<div class="a b">Test 1</div>
<div class="b a">Test 2</div>
But if you swap them around, both will be blue:
.b { color: red; }
.a { color: blue; }

Creating a fluid grid - percentages seem to mess up

I was looking at the Skeleton framework (getskeleton.com), but I wanted a fluid grid system. I'm also interested in the inner workings of these grids, so I decided to roll my own.
However, I'm running into trouble with the two.columns percentages. All other column widths work fine. First of, here's what's happening:
There's clearly something wrong with the second row, and I really can't figure out what it is.
My code for this layout is as follows:
$max-width: 600px;
.container {
#include container($max-width);
.column, .columns {
#include columns($max-width);
}
.one.column, .one.columns { width: perc(30px, $max-width); }
.two.columns { width: perc(80px, $max-width); }
.three.columns { width: perc(130px, $max-width); }
.four.columns { width: perc(180px, $max-width); }
.five.columns { width: perc(230px, $max-width); }
.six.columns { width: perc(280px, $max-width); }
.seven.columns { width: perc(330px, $max-width); }
.eight.columns { width: perc(380px, $max-width); }
.nine.columns { width: perc(430px, $max-width); }
.ten.columns { width: perc(480px, $max-width); }
.eleven.columns { width: perc(530px, $max-width); }
.twelve.columns { width: perc(580px, $max-width); }
Here are the mixins/functions that I used, not sure if that's important:
#function perc($width, $container-width) {
#return percentage($width / $container-width);
}
#mixin container($width) {
position: relative;
width: $width;
margin: 0 auto;
padding: 0;
}
#mixin columns($max-width) {
float: left;
display: inline;
margin: 0 10px;
}
The code in the HTML file is just:
<% 6.times do %>
<div class="two columns box"></div>
<% end %>
I figured if there was something wrong with the calculation of the percentages, all rows would mess up in one way or another. However, it's just the second one.. If anyone sees what's going on here, please enlighten me?
I put the processed CSS on pastebin: http://pastebin.com/bxq1a5Ge
Thanks in advance.
I think you need to convert your margins into percentages as well. Everytime a div spans more than 1 column the gutter width of 20px is converted into a percentage as part of the block width. This will end up going wrong at some point.
Another option is that it is a rounding issue as the browser can't quite convert the percentage values into pixel values neatly.
I've set up a basic jsfiddle of the issue since jsfiddle supports SCSS. The example shows option 2 as a good candidate but I'd advise changing all widths to percentages.
Apparently
perc(80px, 600px) gives 13.333%.
The issue got fixed when I used width: 13.3333333%.

Resources