Amine Mostefai's Blog

Architecture is my passion :)


Hi and welcome to my blog. I share in this space a lot of posts related to software architecture, and software development. Content is mainly related to .NET CORE development, Angular, Sharepoint, Azure and Office 365. I hope that my articles are helpful and that you enjoy using them 😉

Cours CSS3

Enfin, je mets en ligne mon cours CSS3 avec les exemples. Exemples Mode en ligne et mode bloc (Inline-Block.html)  Syntaxe (Syntax.html) Fichier CSS externe (external-css.html) Sélecteurs (selectors.html) Sélecteurs avancés (AdvancedSelectors.html) Styles en cascade (cascade.html) Couleurs (couleurs.html) Polices de Caractères (fontfamily.html) Taille de Caractères (fontsize.html) Polices personnalisées (fontface.html) Texte avec ombr (textshadow.html)  Hauteur et Largeur (WidthHeight.html) Marges intérieure et extérieure (BorderMarginPadding.html) Affichage et visibilité (DisplayVisibility.html) Nouvelles bordures (NewBorders.html) Tableaux (Tableaux.html) Formulaires (Formulaire.html) Positionnements dans CSS (Position.html) éléments flottants (floats.html) Dispositions (dispositions.html) Album (album.html) Disposition flex (flex.html) Images et dégradés (Images.html) Transitions (transitions.html) Transformations (transformations.html) Animations (Animations.html)

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; }