BODY : FORM & LAYOUT
Get flash to fully experience Pearltrees
TEXTURES
I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS : negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar. Starting out simple To show how negative margins can be helpful in creating liquid layouts, let’s start by creating a liquid two-column layout with a header and footer. The main content area will be on the left, with the sidebar on the right.
Creating Liquid Layouts with Negative Margins
This CSS footer stylesheet will make a footer stick to the bottom of the page . CSS Sticky Footer There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they've used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.
Make a Footer Stick to the Bottom of the Page
A CSS Sticky Footer that just works We've all tried to use a CSS Sticky Footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS Sticky Footer are thankfully over.
A CSS Sticky Footer
Ultimate CSS Gradient Generator - ColorZilla.com
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
Learn CSS Positioning in Ten Steps: position static relative absolute float
1. position:static The default positioning for all elements is position:static , which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative , then you can use top or bottom , and left or right to move the element relative to where it would normally occur in the document.
Generateur de multi-colonnes en CSS3 - Design et programmation web2 - Dji
Compatibilité: UPDATED - nouvelles fonctionnalités HTML5 - sliders RésultatCSS3 Media Queries - Adapter un site à plusieurs résolutions d'écran
Les Medias Queries sont des propriétés CSS permettant d' adapter une page HTML à différents types d'écrans et résolutions . Imaginons que vous ayez développé un site web adapté aux résolutions classiques: 1024px / 1280px de largeur, qu'avec la démocratisation des smartphones et tablettes, vous souhaitiez rendre votre site compatible sur ces écrans, sans toucher au HTML... Grâce aux CSS3 medias queries , extensions des types media en CSS2 (print, screen), c'est possible ! Voici quelques exemples de medias queries pratiques que vous pourriez utiliser sur vos prochaines réalisations web: Adapter le style de la page web en fonction des dimensions du navigateur via les medias queries