Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Plateformes
PC et Serveurs
Windows
Tutoriel - Utiliser et apprendre le langage CSS.
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="BIBI' L'indiscipliné" data-source="post: 2821346"><p style="text-align: center">Bonsoir à tous aujourd'hui je vais vous présenter un petit tutoriel qui porte sur le CSS, en effet, je vais vous apprendre à utiliser ce langage web. Je vous souhaites une bonne lecture.</p> <p style="text-align: center"><img src="http://www.pixuff.com/tuto3.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center">LES RECHERCHES :</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Que signifie CSS ?</em></u></p> <p style="text-align: center">Cascading Style Sheets</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>A quoi sert le langage CSS ?</em></u></p> <p style="text-align: center">A ajouter du style aux documents web</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Pourquoi utilise-t-on généralement du CSS ?</em></u></p> <p style="text-align: center">Pour séparer le contenu et la présentation des documents web</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Où est-il conseillé de placer le code CSS ?</em></u></p> <p style="text-align: center">Dans un fichier externe utilisable pour plusieurs pages</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Dans quoi définit-on les déclarations CSS ?</em></u></p> <p style="text-align: center">Entre deux accolades séparés par des points-virgules { ... ; ... }</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Dans la règle suivante, quel élément deviendra rouge ? </em></u><em>strong#intro {background-color: red;}</em></p> <p style="text-align: center">L'élément <strong> dont l'id est "intro"</p> <p style="text-align: center"></p> <p style="text-align: center"><em><u>Quel élément sépare la propriété de sa valeur ?</u></em></p> <p style="text-align: center">Le signe deux points ( : )</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Pourquoi est-il d'usage de sauter une ligne entre chaque déclaration ?</em></u></p> <p style="text-align: center">Pour rendre le code plus lisible et la maintenance plus facile</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>A quoi sert le sélecteur de classe</em></u> : h2<em>.nomDeClasse</em> ?</p> <p style="text-align: center">A définir différentes propriétés pour l'élément <h2> dont la classe est "nomDeClasse".</p> <p style="text-align: center"></p> <p style="text-align: center"><em><u>Combien de règles peut contenir un fichier CSS ?</u></em></p> <p style="text-align: center">Il n'y a pas de limite, on peut en créer autant que l'on veut</p> <p style="text-align: center"></p> <p style="text-align: center">Voilà, on peut dire que ceci sont les choses les plus importantes à savoir.</p> <p style="text-align: center">C'est le fonctionnement du CCS.</p> <p style="text-align: center"></p> <p style="text-align: center">------------------------------------------------------------------------------------------------------------------------</p> <p style="text-align: center"><img src="http://image.noelshack.com/fichiers/2014/06/1391908986-bloc-notes-papier-icone-8455-96.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </p> <p style="text-align: center"><u>Les cours :</u></p> <p style="text-align: center"></p> <p style="text-align: center">1) <u>Comment creer des colonnes de hauteurs égales ?</u></p> <p style="text-align: center">[tabs]</p> <p style="text-align: center"></p> <p style="text-align: center">[tab=Le problème.]</p> <p style="text-align: center">Comment créer des colonnes de hauteurs égales ?</p> <p style="text-align: center">Prenons par exemple le design ci-dessous :</p> <p style="text-align: center"><img src="http://uploads.siteduzero.com/thb/87001_88000/87812.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center">Imaginons que je veuille que <u>le menu et le corps soient toujours de même hauteur</u>. C'est facile à faire avec des tableaux, mais avec des balises <div>, c'est autre chose.C'est pourquoi je vous propose ce tutoriel.</p> <p style="text-align: center">Dans un premier temps, nous mettrons en évidence le problème, puis nous verrons comment le résoudre.</p> <p style="text-align: center">Bon, motivés ? Alors en route !</p> <p style="text-align: center">[/tab]</p> <p style="text-align: center"></p> <p style="text-align: center">[tab=[SIZE=4]Mise en évidence.][/SIZE]</p> <p style="text-align: center">Tout d'abord, il faut savoir que les balises <div> <u>ne se comportent pas comme les cellules d'un tableau. </u>Tandis que deux colonnes d'un tableau évoluent ensemble, les balises <span style="font-family: 'Arial'"><div>, elles, évoluent séparément.</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><u>Voici un petit exemple :</u></span></p> <p style="text-align: center"><img src="http://uploads.siteduzero.com/files/87001_88000/87813.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><span style="font-family: 'Arial'"><em>Exemple avec les tableaux</em></span></p> <p style="text-align: center">Dans cet exemple, les colonnes <u>ont la même hauteur</u>. Elles resteront ainsi même si l'on agrandit ou l'on réduit l'une d'elles : on dit qu'elles sont indissociables.</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, voyons le cas des balises <div> (c'est là où ça va se gâter) :</p> <p style="text-align: center"><img src="http://uploads.siteduzero.com/files/87001_88000/87815.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><em>Exemple avec les balises <div></em></p> <p style="text-align: center"><u>Comme vous le voyez, les balises </u><span style="font-family: 'Arial'"><u><div></u><span style="font-family: 'Arial'"><u> ont des hauteurs différentes</u>. Contrairement aux cellules d'un tableau, <u>leurs hauteurs évoluent séparément.</u></span></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="font-family: 'Arial'">Nous allons maintenant essayer de résoudre ce problème.</span></span></p> <p style="text-align: center">[/tab]</p> <p style="text-align: center"></p> <p style="text-align: center">[tab=Résolution du problème.]</p> <p style="text-align: center">Et comment puis-je régler ce problème, moi ?</p> <p style="text-align: center">En fait, <u>il n'existe aucune propriété qui permet de résoudre ce problème</u> (quoi ? Et comment fait-on, nous ? ). Attention, je n'ai jamais dit qu'il n'y avait aucun moyen : <u>j'ai juste dit qu'il n'y avait aucune propriété.</u></p> <p style="text-align: center">Pour arriver à résoudre ce problème, nous allons donc devoir tricher (ne vous inquiétez pas, ce n'est pas méchant ).</p> <p style="text-align: center"></p> <p style="text-align: center">Pour cela, nous allons utiliser quatre balises <div> : une qui contiendra nos balises <div> et trois autres (1 + 3 = 4 ).</p> <p style="text-align: center"></p> <p style="text-align: center"><u><em>Commençons par créer nos deux colonnes.</em></u></p> <p style="text-align: center"></p> <p style="text-align: center">Nous allons créer deux colonnes, chacune possédant la propriété CSS float:. <span style="font-family: 'Arial'">Ça ne devrait pas être trop compliqué. </span></p> <p style="text-align: center"><span style="font-family: 'Arial'">Voici le code que vous devriez utiliser :</span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Arial'"><div id="colonne1"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><div id="colonne2"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></div></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Arial'">--------------------------------------------------------------------------</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#colonne1</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:140px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> height:100px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-color:#0033CC; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> float:left;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#colonne2</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:140px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> height:60px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-color:#0033CC; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> float:right;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, nous allons englober nos deux colonnes par une balise <div> que l'on appellera conteneur. Voici le code associé :</p> <p style="text-align: center"></p> <p style="text-align: center"><div id="conteneur"></p> <p style="text-align: center"> <div id="colonne1"></p> <p style="text-align: center"> </div></p> <p style="text-align: center"> <div id="colonne2"></p> <p style="text-align: center"> </div></p> <p style="text-align: center"></div></p> <p style="text-align: center"></p> <p style="text-align: center">#conteneur</p> <p style="text-align: center">{</p> <p style="text-align: center"> width:300px;</p> <p style="text-align: center"> margin-top:20px;</p> <p style="text-align: center"> padding-bottom:25px;</p> <p style="text-align: center"> padding-top:5px;</p> <p style="text-align: center">}</p> <p style="text-align: center">#colonne1</p> <p style="text-align: center">{</p> <p style="text-align: center"> width:140px;</p> <p style="text-align: center"> height:100px;</p> <p style="text-align: center"> background-color:#0033CC;</p> <p style="text-align: center"> float:left;</p> <p style="text-align: center">}</p> <p style="text-align: center">#colonne2</p> <p style="text-align: center">{</p> <p style="text-align: center"> width:140px;</p> <p style="text-align: center"> height:60px;</p> <p style="text-align: center"> background-color:#0033CC;</p> <p style="text-align: center"> float:right;</p> <p style="text-align: center">}</p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, nous allons voir comment tricher.</p> <p style="text-align: center"></p> <p style="text-align: center">À notre balise <div>conteneur, nous mettrons une image de fond (grâce à la propriété CSS <span style="font-family: 'Arial'"><span style="font-family: 'Arial'">background-image : ) qui permettra de donner l'impression que les colonnes « continuent ». Pour cela, il suffit de prendre une capture d'écran (touche Imp Ecr), puis l'ouvrir avec un logiciel de retouche d'images (Paint par exemple). Il faut ensuite prendre une partie de l'image où l'on aperçoit les deux colonnes. Voici un exemple :</span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="http://uploads.siteduzero.com/files/87001_88000/87818.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="font-family: 'Arial'">Il ne reste plus qu'à enregistrer cette image dans le dossier image de notre site, puis à l'appliquer comme fond à notre balise <div>conteneur. Et voici le code que l'on obtient :</span></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><div id="conteneur"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> <div id="colonne1"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> </div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> <div id="colonne2"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> </div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#conteneur</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:300px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> margin-top:20px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> padding-bottom:25px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-image:url(images/fond.jpg); </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> padding-top:5px;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#colonne1</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:140px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> height:100px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-color:#0033CC; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> float:left;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#colonne2</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:140px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> height:60px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-color:#0033CC; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> float:right;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">La manipulation suivante est très importante.</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">Pour l'instant, nous avons trois balises <div> : notre conteneur puis nos deux colonnes.</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">Avec ce code, le fond ne fonctionnera pas. En effet, les colonnes ayant la propriété float: n'agrandissent pas le conteneur. Pour cela, nous allons devoir utiliser une autre balise <div> à laquelle nous devrons appliquer la propriété CSS clear:both. Cette propriété a pour effet de placer la balise <span style="font-family: 'Arial'"><div> à laquelle la propriété s'applique en dessous des autres balises <div> ayant la propriété float:. De ce fait, notre balise <div>conteneur s'agrandira. </span></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><span style="font-family: 'Arial'">Voici le code :</span></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"><div id="conteneur"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> <div id="colonne1"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> </div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> <div id="colonne2"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> </div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> <div id="bas"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> </div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></div></span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#conteneur</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:300px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> margin-top:20px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> padding-bottom:25px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-image:url(images/fond.jpg); </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> padding-top:5px;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#colonne1</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:140px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> height:100px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-color:#0033CC; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> float:left;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#colonne2</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> width:140px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> height:60px; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> background-color:#0033CC; </span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> float:right;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">#bas</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">{</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"> clear:both;</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">}</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">Et comme par magie, les colonnes ont la même taille. </span></p> <p style="text-align: center"><span style="font-family: 'Arial'">Voici le résultat que vous devriez obtenir :</span></p> <p style="text-align: center"></p> <p style="text-align: center"><img src="http://uploads.siteduzero.com/files/87001_88000/87819.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><span style="font-family: 'Arial'">[/tab]</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">[/tabs]</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'Arial'">J'espère que vous avez bien compris ce petit tutoriel et que celui-ci vous sera d'une grande aide.</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">À bientôt j'ai décidé de faire 1 leçon par jour.</span></p> <p style="text-align: center"><span style="font-family: 'Arial'">J'espère que ça vous aura plus.</span></p> <p style="text-align: center"><span style="font-family: 'Arial'"></span></p> <p style="text-align: center"><span style="font-family: 'Arial'">BiBi-17,</span></p></blockquote><p></p>
[QUOTE="BIBI' L'indiscipliné, post: 2821346"] [CENTER]Bonsoir à tous aujourd'hui je vais vous présenter un petit tutoriel qui porte sur le CSS, en effet, je vais vous apprendre à utiliser ce langage web. Je vous souhaites une bonne lecture. [IMG]http://www.pixuff.com/tuto3.jpg[/IMG] LES RECHERCHES : [U][I]Que signifie CSS ?[/I][/U] Cascading Style Sheets [U][I]A quoi sert le langage CSS ?[/I][/U] A ajouter du style aux documents web [U][I]Pourquoi utilise-t-on généralement du CSS ?[/I][/U] Pour séparer le contenu et la présentation des documents web [U][I]Où est-il conseillé de placer le code CSS ?[/I][/U] Dans un fichier externe utilisable pour plusieurs pages [U][I]Dans quoi définit-on les déclarations CSS ?[/I][/U] Entre deux accolades séparés par des points-virgules { ... ; ... } [U][I]Dans la règle suivante, quel élément deviendra rouge ? [/I][/U][I]strong#intro {background-color: red;}[/I] L'élément <strong> dont l'id est "intro" [I][U]Quel élément sépare la propriété de sa valeur ?[/U][/I] Le signe deux points ( : ) [U][I]Pourquoi est-il d'usage de sauter une ligne entre chaque déclaration ?[/I][/U] Pour rendre le code plus lisible et la maintenance plus facile [U][I]A quoi sert le sélecteur de classe[/I][/U] : h2[I].nomDeClasse[/I] ? A définir différentes propriétés pour l'élément <h2> dont la classe est "nomDeClasse". [I][U]Combien de règles peut contenir un fichier CSS ?[/U][/I] Il n'y a pas de limite, on peut en créer autant que l'on veut Voilà, on peut dire que ceci sont les choses les plus importantes à savoir. C'est le fonctionnement du CCS. ------------------------------------------------------------------------------------------------------------------------ [IMG]http://image.noelshack.com/fichiers/2014/06/1391908986-bloc-notes-papier-icone-8455-96.png[/IMG] [U]Les cours :[/U] 1) [U]Comment creer des colonnes de hauteurs égales ?[/U] [tabs] [tab=Le problème.] Comment créer des colonnes de hauteurs égales ? Prenons par exemple le design ci-dessous : [IMG]http://uploads.siteduzero.com/thb/87001_88000/87812.jpg[/IMG] Imaginons que je veuille que [U]le menu et le corps soient toujours de même hauteur[/U]. C'est facile à faire avec des tableaux, mais avec des balises <div>, c'est autre chose.C'est pourquoi je vous propose ce tutoriel. Dans un premier temps, nous mettrons en évidence le problème, puis nous verrons comment le résoudre. Bon, motivés ? Alors en route ! [/tab] [tab=[SIZE=4]Mise en évidence.][/SIZE] Tout d'abord, il faut savoir que les balises <div> [U]ne se comportent pas comme les cellules d'un tableau. [/U]Tandis que deux colonnes d'un tableau évoluent ensemble, les balises [FONT=Arial]<div>, elles, évoluent séparément. [U]Voici un petit exemple :[/U][/FONT] [IMG]http://uploads.siteduzero.com/files/87001_88000/87813.png[/IMG] [FONT=Arial][I]Exemple avec les tableaux[/I][/FONT] Dans cet exemple, les colonnes [U]ont la même hauteur[/U]. Elles resteront ainsi même si l'on agrandit ou l'on réduit l'une d'elles : on dit qu'elles sont indissociables. Maintenant, voyons le cas des balises <div> (c'est là où ça va se gâter) : [IMG]http://uploads.siteduzero.com/files/87001_88000/87815.png[/IMG] [I]Exemple avec les balises <div>[/I] [U]Comme vous le voyez, les balises [/U][FONT=Arial][U]<div>[/U][FONT=Arial][U] ont des hauteurs différentes[/U]. Contrairement aux cellules d'un tableau, [U]leurs hauteurs évoluent séparément.[/U] Nous allons maintenant essayer de résoudre ce problème.[/FONT][/FONT] [/tab] [tab=Résolution du problème.] Et comment puis-je régler ce problème, moi ? En fait, [U]il n'existe aucune propriété qui permet de résoudre ce problème[/U] (quoi ? Et comment fait-on, nous ? ). Attention, je n'ai jamais dit qu'il n'y avait aucun moyen : [U]j'ai juste dit qu'il n'y avait aucune propriété.[/U] Pour arriver à résoudre ce problème, nous allons donc devoir tricher (ne vous inquiétez pas, ce n'est pas méchant ). Pour cela, nous allons utiliser quatre balises <div> : une qui contiendra nos balises <div> et trois autres (1 + 3 = 4 ). [U][I]Commençons par créer nos deux colonnes.[/I][/U] Nous allons créer deux colonnes, chacune possédant la propriété CSS float:. [FONT=Arial]Ça ne devrait pas être trop compliqué. Voici le code que vous devriez utiliser :[/FONT] [FONT=Arial]<div id="colonne1"> </div> <div id="colonne2"> </div>[/FONT] [FONT=Arial]-------------------------------------------------------------------------- #colonne1 { width:140px; height:100px; background-color:#0033CC; float:left; } #colonne2 { width:140px; height:60px; background-color:#0033CC; float:right; }[/FONT] Maintenant, nous allons englober nos deux colonnes par une balise <div> que l'on appellera conteneur. Voici le code associé : <div id="conteneur"> <div id="colonne1"> </div> <div id="colonne2"> </div> </div> #conteneur { width:300px; margin-top:20px; padding-bottom:25px; padding-top:5px; } #colonne1 { width:140px; height:100px; background-color:#0033CC; float:left; } #colonne2 { width:140px; height:60px; background-color:#0033CC; float:right; } Maintenant, nous allons voir comment tricher. À notre balise <div>conteneur, nous mettrons une image de fond (grâce à la propriété CSS [FONT=Arial][FONT=Arial]background-image : ) qui permettra de donner l'impression que les colonnes « continuent ». Pour cela, il suffit de prendre une capture d'écran (touche Imp Ecr), puis l'ouvrir avec un logiciel de retouche d'images (Paint par exemple). Il faut ensuite prendre une partie de l'image où l'on aperçoit les deux colonnes. Voici un exemple :[/FONT][/FONT] [IMG]http://uploads.siteduzero.com/files/87001_88000/87818.png[/IMG] [FONT=Arial][FONT=Arial]Il ne reste plus qu'à enregistrer cette image dans le dossier image de notre site, puis à l'appliquer comme fond à notre balise <div>conteneur. Et voici le code que l'on obtient :[/FONT] <div id="conteneur"> <div id="colonne1"> </div> <div id="colonne2"> </div> </div> #conteneur { width:300px; margin-top:20px; padding-bottom:25px; background-image:url(images/fond.jpg); padding-top:5px; } #colonne1 { width:140px; height:100px; background-color:#0033CC; float:left; } #colonne2 { width:140px; height:60px; background-color:#0033CC; float:right; } La manipulation suivante est très importante. Pour l'instant, nous avons trois balises <div> : notre conteneur puis nos deux colonnes. Avec ce code, le fond ne fonctionnera pas. En effet, les colonnes ayant la propriété float: n'agrandissent pas le conteneur. Pour cela, nous allons devoir utiliser une autre balise <div> à laquelle nous devrons appliquer la propriété CSS clear:both. Cette propriété a pour effet de placer la balise [FONT=Arial]<div> à laquelle la propriété s'applique en dessous des autres balises <div> ayant la propriété float:. De ce fait, notre balise <div>conteneur s'agrandira. Voici le code :[/FONT] <div id="conteneur"> <div id="colonne1"> </div> <div id="colonne2"> </div> <div id="bas"> </div> </div> #conteneur { width:300px; margin-top:20px; padding-bottom:25px; background-image:url(images/fond.jpg); padding-top:5px; } #colonne1 { width:140px; height:100px; background-color:#0033CC; float:left; } #colonne2 { width:140px; height:60px; background-color:#0033CC; float:right; } #bas { clear:both; } Et comme par magie, les colonnes ont la même taille. Voici le résultat que vous devriez obtenir :[/FONT] [IMG]http://uploads.siteduzero.com/files/87001_88000/87819.png[/IMG] [FONT=Arial][/tab] [/tabs][/FONT] [FONT=Arial]J'espère que vous avez bien compris ce petit tutoriel et que celui-ci vous sera d'une grande aide. À bientôt j'ai décidé de faire 1 leçon par jour. J'espère que ça vous aura plus. BiBi-17,[/FONT][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Plateformes
PC et Serveurs
Windows
Tutoriel - Utiliser et apprendre le langage CSS.
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut