Adjust control widths using CSS

One of the most important issues when designing websites is to adjust the width of the different controls and especially text boxes and drop down lists. When using CSS rules that integrate a fixed width, there’s still a small width difference between text controls and drop down lists. The key is that selects and inputs use by default different box sizing mechanisms. Fortunately, CSS3 comes with the box-sizing rule that allows to apply the same box sizing mechanism to controls. And this property is handled correctly by most of the popular browsers. Here is the code snippet : input, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Centrer verticalement un div dans une fenêtre en utilisant CSS uniquement

Souvent dans les sites web, nous avons la problématique de centrer une boite (div) verticalement et horizontalement dans l’écran. Dans ce tutoriel, je vais montrer comment utiliser une technique très simple qui utilise le CSS uniquement pour accomplir ceci. Toutefois, une condition est requise, est que la div à centrer soit d'’une taille connue à l’avance (en pixels ou en pourcentages). Ce genre de centrage est idéal pour centrer des formulaires comme la boîte de’authentification (login) par exemple. Dans le tutoriel, nous allons centrer un div jaune dont la taille est 500x200 dans le navigateur. D’abord, appliquons le css pour obtenir une page noire : 1: body{ 2: background-color:black; 3: } La technique est simple, utiliser deux div, une conteneur et une div centrée. La div conteneur doit prendre toute la largeur et être positionné verticalement à 50%. En d’autres mots, son Y démarre à partir de la moitié du ViewPort du navigateur. 1: div#conteneur { 2: position: absolute; 3: top: 50%; 4: left: 0px; 5: width: 100%; 6: } La div à centrer est dans la div conteneur. Elle a une largeur fixe (500px) et une hauteur fixe (200px). Pour la centrer horizontalement, on affecte 50% à left. Toutefois ce n’est pas suffisant car la div n’est pas tout à fit au milieu. Elle commence par le milieu. Pour réellement la centrer, il faut la décaler à gauche de la moitié, en d’autres mots, utiliser une marge gauche qui est égale négativement à la moitié de la largeur : 1: div#centree { 2: width: 500px; 3: height: 200px; 4: margin-left: -250px; /* moitié de la largeur */ 5: position: absolute; 6: top: -100px; /* moitié de la hauteur */ 7: left: 50%; 8: background-color:Yellow; 9: } Le même principe est appliqué à height et margin-top. Et le tour est joué, vous pouvez voir le résultat ici.