Centrer un tableau en CSS
-
Inclure les 3 attributs dans le style de l’objet :
margin-left: auto; margin-right: auto; width: ...px;
Balises CSS3
-
Les codes CSS3 ci-dessous fonctionnent à partir des versions des navigateurs suivants : Firefox 3.5 ou +, -
Chrome 10 ou +, -
Opera 11 ou +, -
IE 9 ou + (à voir …).
Positionnement
- Playing with Media Queries mediaqueries
- Flexible Box Model Flexible Box Model
- CSS3 multiple columns layout columns
Navigation
- Navigation buttons border-radius gradients
- CSS3 transitions on navigation transition
- Dropdown Menu (clic): target opacity transitions gradients border-radius
- Slideshow image gallery: target opacity transitions border-radius
- Scrolling image gallery: target transitions border-radius
- Fluid navigation with flexible box model Flexible Box Model transitions
Texte
- Word wrapping word-wrap
- Fixing whitespace with CSS3 rem unit rem
Décorations
- Breadcrumb without images border-radius radial-gradient siblings selector
- Vignetting images with CSS3 radial gradient background-image
- CSS3 border-image testcases border-image
- background-image cover background-size
- HTML5 / CSS3 forms styling input :required :valid :invalid
- Badge with :before :after and CSS3 rotation: before :after transform
- Only-child testcase: only-child
- Dynamic siblings selector general siblings :target
- A checking cart using siblings selector general siblings :target
HTML 5
- A todolist with HTML LocalStorage localStorage contenteditable jQuery
- Personnal calendar width HTML5 localstorage localStorage contenteditable jQuery
Balises CSS2
Ci-dessous, les balises compatibles avec Internet Explorer 8.
Formatage des tableaux
- Table layout table table-cell
- Vertical centering table table-cell vertical-align
- A footer at bottom with CSS2.1 Table-row table table-row
- CSS2.1 Table-row vertical box model table table-row
- Ordering blocks with Table Layout table-row table-header-group table-footer-group
- Movable flexible boxes with CSS2 table-cell table table-cell :target
- Positioning elements with caption-side table caption-side
- Navigation with table model table-cell border-radius transition
- Who said that mobile web killed table layout ? table-cell media queries
Navigation
- Animated dropdown (hover) menu: hover inline-block
- Icon and images with Data URI Data URI
- Navigation with table model table-cell border-radius transition
Décorations
- Using special characters font
- Icon and images with Data URIData URI
- Table data styling HTML table table-layout table-caption
- Clearing Floats with generated content: after clear
- Tooltip with CSS2 :after: after
- Breadcrumb with generated content: before sibling selector
- Preventing overflows with max-width max-width
- Styling all item except first sibling selector
- Using sibling to style the last item sibling selector
Liens utiles
http://webdesign.tutsplus.com/tag/css3/
Retour