a developer's notes – a semi-technical web development BLOG

May 30, 2015

Static / Sticky Footer

Filed under: CSS / Styling,HTML — Duy Nguyen @ 9:38 am
Tags: , , ,

This is the best solution I found so far.

http://mystrd.at/modern-clean-css-sticky-footer/

The CSS.

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Here is how you would use it.

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

September 5, 2013

When needing to override some CSS without using !important

Filed under: CSS / Styling — Duy Nguyen @ 10:15 pm
Tags: ,

Styling that has been applied with global CSS Classes can be overridden if you add an ID attribute to the containing span or div.

March 28, 2013

Padding against an empty div

Filed under: CSS / Styling — Duy Nguyen @ 2:56 pm
Tags: , , , ,

Some times you need to “push” against an empty div, you can use a div with an empty value like this.

<div style="padding-bottom:50px"></div>
<div>&nbsp;</div>

September 5, 2011

CSS Precedence

Filed under: CSS / Styling — Duy Nguyen @ 1:31 pm
Tags: , , ,

From MSDN:

Precedence of CSS Style Rules:

CSS style rules cascade in the sense that global style rules continue to apply to HTML elements unless local style rules supplant them. In general, local style rules take precedence over general style rules. This means, for example, that a style defined in a STYLE block within a Web page can revise for that one page a Web site style defined in an external CSS style sheet. Similarly, an in-line style defined within a single HTML tag on that page can revise for one line any styles defined for that same element elsewhere.
Portions of global style rules not contradicted by local CSS style rules will continue to apply to HTML elements even after local styles are applied. In the example above, the local CSS styles governing text between <H1> tags replace some of the Web browser’s global style rules for <H1> text (center <H1> text and make it red), but they do not change others (display all <H1> text in a larger font and bolded). Both global and local style rules are applied, in that order, making all the <H1> text on this page display in a larger font and bolded, and centered and red.

Here is a great link about weighing CSS specificity.
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Create a free website or blog at WordPress.com.