tag (css)

archive

css3 border radius May
18 1
0

I keep having to look up the definitions for CSS border radius when it comes to supporting the Mozilla and Webkit specific styles. I'm pasting this here for easy reference.

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;

-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;

border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 4px;

comments

anchoring a footer to the bottom of the html page using css Apr
03 1
0

It's a common need to anchor a footer to the bottom of your web page. It's a tricky problem because you need to account for both large and small content. I've seen people suggest ass-backward ways of doing this with JavaScript. You can achieve this strictly with HTML and CSS with minimal bloat to your markup. All you need is a container div.

Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest the footer with position: absolute, bottom: 0;

/* css */
html, body {
    height: 100%;
}

#container {
    position: relative;
    min-height: 100%;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

You might want to add some padding to the bottom of the container so that your content won't run under the footer.

comments