I have large css file that contains css rule format like this:
.rounded-block
{
border: 1px solid #c0c0c0;
width: 500px;
margin: 15px 0 15px 0;
}
I need format this file like this
.rounded-block{border: 1px solid #c0c0c0;width: 500px;margin: 15px 0 15px 0;}
How can I do this?I can do this in visual studio?
Edit:
I need that the other rule will be in another line
.rounded-block{border: 1px solid #c0c0c0;width: 500px;margin: 15px 0 15px 0;}
.anotherrule{margin: 15px;}
Check these URL for CSS beautifier and to optimize:
cssbeautify
fwpolice
In there you can define your own rule:
codebeautifier.
Related
When I try to use "grid-template-columns" and "grid-column-gap" a green line appears under them and says it's not a known CSS 3 property. Also, IE and Firefox cant compile the site well. My IDE is visual studio 2015 here comes my code:
.gridContainer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding-top:150px;
grid-column-gap: 50px;
padding-bottom:150px;
}
.grid-item {
background-color: #99e4f5;
border: 1px solid rgba(0, 0, 0, 0.8);
font-size: 17px;
text-align: center;
border: 5px solid #ffffff;
box-shadow: 1px 1px 5px grey;
color: #676363;
Are there any alternatives to using?
thanks,
Saeed
After the first line of text the second line of text goes to the bottom of image and i don't know why! help? Here is my coding:
< div style="border-radius:5px; border: 1px solid #E6DFDF; color:black; margin: 3px; margin-top: 3px; padding: 3px; min-height:20px; background-color: #8bc5c0; -moz-box-shadow:1px 1px 2px 1px #333; -webkit-box-shadow:1px 1px 2px 1px #333;box-shadow:1px 1px 2px 1px #333;" >
< img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px; box-shadow: 0px 0px 0px 0px #E6DFDF; border-radius: 3px;"/>< askky >{Asker} asked:< /askky > {Question}< br >< /div >
You are all set. Only give disply: inline-block; and define its width: 30%; or whatever you want. Now it would behave as an inline element for others but block for itself. Hope this works.
I'm having trouble getting CSS3Pie to work. I've read several posts on SO and Google and still can't to seem to get it work.
I'm using SASS and compass to write my CSS so I'll post both SCSS and CSS outputs below.
SCSS:
$pie-behavior: url(PIE.htc);
$pie-base-class: pie-element;
#header{
background:#fff;
width:$full-width;
height:100px;
margin:$margin-center;
ul{
width:600px;
height:$nav-height - 2px;
padding:55px 0 0;
margin:0 0 0 250px;
li{
#include inline-block;
font-size:$font-size - 2px;
font-weight:bold;
padding:20px 10px;
}
a{
color:#282828;
text-transform:uppercase;
&:hover{
color:red;
}
}
}
#aabw{
background:url('../images/aabw.jpg') no-repeat;
height:190px;
width:110px;
position:relative;
z-index: 0;
float:right;
margin: 0 270px 0 0;
#include pie-element(relative);
#include box-shadow(#BBBBBB 0px -78px 6px);
}
}
Outputted CSS:
#header #aabw {
background: url("../images/aabw.jpg") no-repeat;
height: 190px;
width: 110px;
position: relative;
z-index: 0;
float: right;
margin: 0 270px 0 0;
behavior: url(PIE.htc);
position: relative;
-webkit-box-shadow: #bbbbbb 0px -78px 6px;
-moz-box-shadow: #bbbbbb 0px -78px 6px;
box-shadow: #bbbbbb 0px -78px 6px;
}
My PIE.htc is in the room directory (same folder as my index) and I'm trying to run it locally. I've followed the pie.scss file and nothing seems to work, it may be a case of me missing something blatantly obvious so hopefully someone might be able to spot something I'm missing?
Thanks
not sure, but try putting the PIE call after the box-shadow call.
I need some divs to be center-positioned and to fit their content width at the same time.
I am now doing it like this:
.mydiv-centerer{
text-align: center;
.mydiv {
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
width: -moz-fit-content;
}
}
Now, the last command "width: -moz-fit-content;" is exactly what I need!
Only problem is.. it works only on Firefox.
I also tryed with "display:inline-block;", but I need these divs to behave like divs. Namely, every next div should be under, and not inline, the previous.
Do you know any possible cross-browser solution?
At last I fixed it simply using:
display: table;
Mozilla's MDN suggests something like the following [source]:
p {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
In similar case I used: white-space: nowrap;
Is there a single declaration that fixes this for Webkit, Gecko, and Blink? No. However, there is a cross-browser solution by specifying multiple width property values that correspond to each layout engine's convention.
.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}
Adapted from: MDN
I use these:
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
I was looking for a way to prevent a long line of text from outgrowing past its container, and max-width: fit-content worked in Chrome, but not in Firefox.
I found a workaround: if the element is the last displayed subelement, setting display: table-caption; and caption-side: bottom; does have the same effect, together with display: table; on the parent object.
Why not use some brs?
<div class="mydiv-centerer">
<div class="mydiv">Some content</div><br />
<div class="mydiv">More content than before</div><br />
<div class="mydiv">Here is a lot of content that
I was not anticipating</div>
</div>
CSS
.mydiv-centerer{
text-align: center;
}
.mydiv{
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
display:inline-block;
}
Example: http://jsfiddle.net/YZV25/
Is there a way to make an outer glow in Firefox using a CSS :focus rule? (similar to what Chrome already has)
You could add a -moz-box-shadow (or just box-shadow if you are only interested in Firefox 4 and later) for your :focus rule. You can add glow of various degrees using that.
You can do the same thing like this:
HTML:
<button id="a">click</button>
CSS:
button{
background:#f7f7f7;padding: 0 .5em;
height: 2.0833em;
border: 1px solid #CCC;
color: black;
background: #F6F6F6;
background-image: -moz-linear-gradient(top,white,#EFEFEF);
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
overflow: visible;}
button:hover{
box-shadow:0 0px 3px #999;
-webkit-box-shadow:0 0px 3px #999;
-moz-box-shadow:0 0px 3px #999;
}
Check on jsfiddle: http://jsfiddle.net/naveed_ahmad/LZGq6/
This can be done by multiple shadows:
CSS
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
see example 5.5:
http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/