Single HTML webpage without JavaScript

I really like this concept of having all the content in a single HTML page and show/hide the sections using CSS. I would like to use it in some future project.

For me the interesting- and new part is the following CSS

/* ------- Sections ------- */

section {
  padding: calc(6em + 5vw) 5vw 8vw 5vw;
  /* ! Everything below is needed ! */
  display: none;
  position: absolute;
  top: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--bgcolor);
}

section:target { /* Show section */
  display: block;
}

section#home { /* Show #home by default */
  display: block;
}

Vertically center content with CSS

I found a very easy and effective way to center a div vertically with CSS: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

Basically it makes the div behave like a table then sets the vertical alignment to middle.

#container 
{ 
    width: 100%; height: 100%; display: table; 
}

#position
{
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    text-align: center; 
}

Updated my homepage: sitemap page, rounded corners

I added a new page to my homepage: SiteMap. I know my website does not really have much content but I found an awesome looking sitemap template and I had to play around with it.

Besides the additional page I applied some corner rounding and shadow to the main page and the footer.

Unfortunately the awesomeness can only be witnessed if you are using Firefox 3.5 or Safari.

If you don't like it let me know! We can work something out.

CSS hacks & browser detection

A very nice article about browser detection in CSS, that helped me a lot.

• CSS hacks & browser detection on Webcredible

Webdesign goodies: Styleignite

Webdesign styles collection: www.styleignite.com

CSS Specificity: Things You Should Know

"Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector."

• Smashing magazine - CSS Specificity: Things You Should Know

CSS Sliding doors technique

A very good description of the respective CSS technique:

• Douglas Bowman's CSS sliding doors technique

Correct CSS reset

After searching through the net for a resetting CSS code and trying out at least 10 kinds of reset.css files, I would like to share my best choice: Yahoo's CSS reset file, that is part of Yahoo User Interface Library.

I pasted the code here, but you can also download it from here.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

table {
border-collapse:collapse;
border-spacing:0;
}

fieldset,img {
border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}

ol,ul {
list-style:none;
}

caption,th {
text-align:left;
}

h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}

q:before,q:after {
content:'';
}

abbr,acronym { border:0;
}

70 Expert Ideas For Better CSS Coding

This CSS lesson tripled my CSS knowledge. This is an awesome article.