Categories
0
Comment
Whether you have an unreadable stylesheet or you want to minify/compress it for optimization purposes, Client-side CSS (De)Compressor is your friend.
Update: since the previous tool doesn’t exist anymore, here’s another tool to unminify your CSS:
Categories
One way to set the height of an element to 100% is to absoultely-position it yet you needed a max-width for it to follow (instead of a simple width) for layout reponse purposes.
The solution is to simply set its width to 100% and set the max-width to your desired value. For example:
[code lang=”css” title=”CSS”]
div {
position:absolute;
width:100%;
max-width:1280px;
height:100%;
background-color:red;
}
[/code]
Categories
You want to have a 100% expanding parent while still having control over the child to have a definite width?
What’s the use for this? A 100% background not interfering with the child that has width.
[code title=”HTML” lang=”html”]
<div class="container">
<div class="content">
Content
</div>
</div>
[/code]
[code title=”CSS” lang=”css”]
.container {
background-color:red;
}
.content {
margin:0 auto; /* To center the div */
max-width:960px; /* To make it responsive in viewports smaller than 960px */
}
[/code]
And you can even add box-sizing:border-box to the content!
[code title=”CSS” lang=”css”]
.content {
max-width:960px;
box-sizing:border-box; /* Don’t forget to add the vendor prefixes */
}
[/code]
Categories
Hey, remember that time when you switched from the table layout to div layout?
This is the time to be “out with the old and in with the new”.
We’ll be leaving behind the contraption that alleviate the pains of the CSS box model.
Just to refer to that contraption, familiar with this?
[code]
<div class="module">
<div class="module-container">
<div class="module-content">
Content
</div>
</div>
</div>
[/code]
To not worry about computing widths, we apply it to module-container and the paddings, borders, and margins to module-content.
[code]
.module-container {width:75%;}
.module-content {
margin:1em;
padding:1em;
border:1px solid red;
[/code]
This way, we know that 75% is 75% and no additional values from the other parameters.
But to get rid of module-container and module-content in the HTML markup, we simply apply a border-box:box-sizing style to module.
[code]
<div class="module">Content</div>
[/code]
[code]
.module {border-box:box-sizing;}
[/code]
This will make sure that the box follows the exact width you specify no matter how many paddings and borders you apply to the same element.
For detailed readings, read Paul Irish’s * { Box-sizing: Border-box } FTW.
Categories
You have a paragraph with a URL in it–chances are the boundaries might wrap or cut your URL into two lines.
Notice that it is an actual URL in the form of http://[address] and not just a linked bunch of text.
[code lang=”html” gutter=”false”]<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi ante, hendrerit sed pretium id, fermentum sed tellus. Integer venenatis, turpis in tempus cursus, odio sapien tincidunt mi, in iaculis nibh nisl eget metus. Proin ultrices elit non nisl vehicula suscipit <a href="#">http://www.double-u-double-u-double-u-dot-wawawa.com</a>. Suspendisse interdum nisl ac risus consectetur ut hendrerit tellus aliquam.</p>[/code]
Why don’t we like that? Because it’s supposed to be in one unit.
So, add a class to the anchor tag:
[code]
<a class="url" href=""#">[URL]</a>
[/code]
and tell CSS to:
[code lang=”css”]
.url {white-space:nowrap;}
[/code]
That should put the whole URL link in one line.
Categories
Say you want to center your navigation on the page:
[code lang=”html”]
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
[/code]
Simply tell CSS to:
[code lang=”css”]
ul {text-align:center;}
li {display:inline-block;}
[/code]
And don’t forget to remove any float on those elements, if any.