Table des matières:
Vidéo: TUTO CSS - Styliser un formulaire 2025
Il vaut mieux essayer quelques-unes des mises en page CSS3 pour voir ce que vous voulez en faire avant de commencer à créer un projet de production. Copiez le code source de l'exemple sur le site Dynamic Drive et placez-le dans des fichiers comme vous prévoyez de l'utiliser.
Pour les besoins de cet exemple, vous créez un fichier HTML5 avec le contenu suivant obtenu à partir du code HTML affiché avec l'exemple. (Vous pouvez trouver le code complet de cet exemple dans le dossier Chapitre 07 du code téléchargeable sous TwoColumnLayout.HTML.)
CSS Fixed Layout # 2. 1- (fixe-fixe)CSS Fixed Layout # 2. 1- (fixe-fixe)
840px
Contenu Colonne: 640px
Colonne de gauche: 200px
Pied de page
L'exemple ajoute un espace blanc au code fourni sur le site Dynamic Drive afin de faciliter la lecture et de montrer comment la structure est créée à l'aide des balises. Vous devriez faire la même chose avec n'importe quel code que vous obtenez sur le site. Vous voulez être sûr de comprendre le fonctionnement de la mise en page avant de commencer à effectuer les modifications requises.
L'exemple supprime les scripts Dynamic Drive car vous n'en avez pas besoin pour remplir les sections avec du contenu aléatoire. Cependant, il ajoute des notes indiquant le nombre de pixels utilisés par défaut pour chacune des sections (l'exemple Dynamic Drive ne fait que noter la taille de la colonne gauche fixe).
Si vous modifiez le CSS pour ce site, vous devez également modifier les notes que vous avez créées à propos des tailles de colonnes fixes.
L'exemple utilise également un fichier CSS externe. Notez l'ajout d'une balise dans le. Le CSS pour le fichier externe est inchangé à partir de la balise pour la page d'exemple comme indiqué ici.
body {marge: 0; rembourrage: 0; line-height: 1. 5em;} b {font-size: 110%;} em {couleur: rouge;} #maincontainer {largeur: 840px; / * Largeur du conteneur principal * / marge: 0 auto; / * Conteneur central à la page * /} #topsection {background: #EAEAEA; hauteur: 90px; / * Hauteur de la section supérieure * /} #topsection h1 {margin: 0; padding-top: 15px;} #contentwrapper {float: left; width: 100%;} #contentcolumn {margin-left: 200px; / * Définit la marge gauche à LeftColumnWidth * /} #leftcolumn {float: left; largeur: 200px; / * Largeur de la colonne de gauche * / marge-gauche: -840px; / * Définir la marge de gauche à - (MainContainerWidth) * / background: # C8FC98;} #footer {clear: left; largeur: 100%; fond: noir couleur: #FFF; text-align: centre; padding: 4px 0;} #footer a {color: # FFFF80;}. innertube {margin: 10px; / * Marges pour DIV interne dans chaque colonne (pour fournir un remplissage) * / margin-top: 0;}
À ce stade, vous pouvez charger la page pour commencer à penser à ce que vous souhaitez modifier.Voici la page telle qu'elle apparaît sans modification après l'avoir copiée du site et séparer le HTML du CSS.
La première option que vous voudrez changer est celle des couleurs utilisées pour les différents objets. Bien sûr, les couleurs doivent correspondre aux couleurs de votre site. Les modèles utilisent des représentations de couleurs hexadécimales. Vous devez les modifier pour qu'ils correspondent à ceux utilisés par d'autres modèles sur votre site (si nécessaire).
Les modèles reposant sur des largeurs de colonnes fixes peuvent nécessiter une modification pour fonctionner avec le reste de votre site. Pour modifier la largeur globale de la page, vous modifiez la propriété width du style #maincontainer. La largeur du volet de gauche est contrôlée par la propriété width du style #leftcolumn.
La taille du volet de contenu correspond à la différence entre la largeur du style #maincontainer et la largeur du style #leftcolumn. Dynamic Drive a tendance à utiliser une dénomination cohérente, donc une mise en page qui utilise la colonne de droite pour les liens aurait un style #rightcolumn que vous modifiez pour modifier la largeur de cette colonne.
Si vous modifiez la taille des styles #leftcolumn ou #rightcolumn, vous devez également modifier la propriété margin-left du style #contentcolumn.
La hauteur de la section supérieure est seulement de 90px. Cela pourrait causer un problème lorsque vous travaillez avec un en-tête plus grand. Modifiez la propriété height du style #topsection pour le rendre compatible avec les autres en-têtes de votre site.
De même, le pied de page n'a pas de hauteur réelle. Vous devrez peut-être le modifier en ajoutant une propriété height au style #footer pour que chaque page de votre site soit la même.
Ces modèles s'appuient également sur les balises (gras) et (emphase). Bien que les deux balises soient toujours prises en charge par HTML5, la balise vous avertit fortement de ne l'utiliser qu'en dernier recours.
Si vous prévoyez une utilisation à long terme de ces modèles, il serait judicieux de remplacer les balises par les balises ou, mieux encore, d'éviter d'utiliser les balises et tags complètement en faveur de la mise en forme CSS.
Ces balises sont des restes des jours avant que CSS ne permette d'ajouter différentes formes d'accentuation et de gras en utilisant les propriétés font-style et font-weight. L'exemple montre les balises intactes, mais la recommandation est de les supprimer et d'utiliser d'autres types de mise en forme à la place.
