cssvault - inspiring creativity

Okay I got one for all you CSS gurus out there: should margins for content tags (e.g. H2, H3, P, UL) be placed at the bottom or at the top of the block?

Personally I use margin-top: 1em for these tags. I think it makes sens to place margins at the top simply because the margin does not “exist” unless that block is present. Though a bottom margin also does not get rendered unless there is a block beneath it.

What are your thoughts?

Share

I have always found ASP.Net’s web controls to be a mess or the resulting HTML syntax undesirable for CSS so I was elated when I discovered that you can actually control ASP.Net HTML rendering with ASP.NET 2.0 CSS Friendly Control Adapters 1.0. Check it out!

Share

One of the shortcomings of CSS is the inability to declare variables. How many times did you have to do a search and replace in order to replace a certain color value? This has led many of us to resort to JavaScript/PHP/CGI techniques as temporary solution while waiting for CSS3.

If you’re looking for a quick fix that requires little programming, you may want to check out Moonfall, a CGI script that allows you to declare variables and inject them at the right places and generate a new CSS file. Happy coding!

Share

CSS Guru Eric Meyer has just released CSS Sculptor, which works with Adobe Dreamweaver to create standards-compliant, CSS layouts quickly and easily.

Share

If you are always having a difficult time scanning through lines upon lines of CSS code trying to locate the correct selector, try out this idea by Steve Smith: Single Line CSS.

Compare this:


#wrapper {
width:800px;
margin:0 auto;
}

#footer {
clear:both;
font-size:93%;
float:none;
}


To this:


#wrapper {width:800px; margin:0 auto;}
#header {height:100px; position:relative;}
#feature .post {width:490px; float:left;}
#feature .link {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer {clear:both; font-size:93%; float:none;}


Of course, there’s always the option of using an IDE to edit your CSS files and get to style your markup as much as you want.

Link to article

Share

Blueprint is a CSS Framework that is in many ways similar to YUI’s reset-font-grids CSS framework. It is in its early stages still, so beware and read the disclaimer:

Blueprint has not yet been tested in every browser. Please do not use this framework in any projects of importance at this time.

Share

If you are always having a difficult time scanning through lines upon lines of CSS code trying to locate the correct selector, try out this idea by Steve Smith: Single Line CSS.

Try comparing this:

#wrapper {
    width:800px;
    margin:0 auto;
}

#header {
    height:100px;
    position:relative;
}

#feature .post {
    width:490px;
    float:left;
}

#feature .link {
    width:195px;
    display:inline;
    margin:0 10px 0 0;
    float:right;
}

#footer {
    clear:both;
    font-size:93%;
    float:none;
}

To this:

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}
#feature .link      {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer             {clear:both; font-size:93%; float:none;}

Of course, there’s always the option of using an IDE to edit your CSS files and get to style your markup as much as you want.

Link to article

Share