comment mettre en place un gabarit sur kompozer?
Publié : 25 févr. 2009, 14:28
Bonjour,
J'ai trouvé dans une discussion précédente un lien pour ajouter des gabarits à son site afin à mon avis de proposer une présentation plus pro.
Voici l'adresse:
http://css.alsacreations.com/Modeles-de ... age-en-CSS
Le gabarit N°03 correspond tout à fait à ce que je cherche. Le problème c'est que je ne sais pas comment l'utiliser et le mettre en place.
Quelqu'un pourrait m'aider?????
Le site que j'ai créé est : www.illuminhome.com et j'aimerai obtenir en présentation
une couleur de fond de page différente de celle du bloc contenant le texte ) http://www.alsacreations.com/static/gab ... ele03.html
Voici ce qu'il explique dans le site:
À propos du gabarit 03
Code HTML et CSS
Ce gabarit est structuré de la manière suivante:
<div id="global">
<div id="entete">...</div>
<div id="navigation">...</div>
<div id="contenu">...</div>
<div id="pied">...</div>
</div>Il est mis en forme par deux feuilles de styles:
base.css (mise en forme minimale du texte, commune à tous les gabarits)
modele03.css, qui contient tous les styles propres à ce gabarit, et que nous vous invitons à consulter.
Pour voir le détail du code HTML de cette page, utilisez la fonction d'affichage de la source de votre navigateur web (ex: «Affichage > Code source de la page»).
À noter
Le conteneur global (div#global) a une largeur fixe de 750px. Il est centré grâce aux marges automatiques (margin-left: auto et margin-right: auto).
Le conteneur global prend au minimum toute la hauteur de la fenêtre grâce à la propriété min-height, avec la valeur 100%.
La petite subtilité ici est que pour que le min-height: 100% soit pris en compte, l'élément parent (body) doit lui-même avoir une hauteur déterminée. Et cela vaut également pour le parent de body, c'est à dire l'élément html (appelé aussi élément racine du document). On écrit donc:
html, body {
height: 100%;
}
#global {
min-height: 100%;
}Attention: il ne faut pas donner de marge, padding ou bordure verticales aux éléments html, body et div#global. En effet, ils se rajouteraient à la hauteur de l'élément, or le moindre pixel en plus des 100% de hauteur provoquerait l'apparition d'une barre de défilement, même s'il n'y a aucun contenu à faire défiler.
Pour la même raison, il faut éviter la fusion des marges entre div#global et ses éléments enfants. Dans ce gabarit, on utilise overflow: hidden sur div#global dans ce but.
On constate que même lorsque le contenu est court, le bloc div#global prend toute la hauteur de son parent, l'élément body.
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.1; Media Center PC 3.0; IE7-01NET.COM-1.1; IE7-01NET.COM-1.1)
J'ai trouvé dans une discussion précédente un lien pour ajouter des gabarits à son site afin à mon avis de proposer une présentation plus pro.
Voici l'adresse:
http://css.alsacreations.com/Modeles-de ... age-en-CSS
Le gabarit N°03 correspond tout à fait à ce que je cherche. Le problème c'est que je ne sais pas comment l'utiliser et le mettre en place.
Quelqu'un pourrait m'aider?????
Le site que j'ai créé est : www.illuminhome.com et j'aimerai obtenir en présentation
une couleur de fond de page différente de celle du bloc contenant le texte ) http://www.alsacreations.com/static/gab ... ele03.htmlVoici ce qu'il explique dans le site:
À propos du gabarit 03
Code HTML et CSS
Ce gabarit est structuré de la manière suivante:
<div id="global">
<div id="entete">...</div>
<div id="navigation">...</div>
<div id="contenu">...</div>
<div id="pied">...</div>
</div>Il est mis en forme par deux feuilles de styles:
base.css (mise en forme minimale du texte, commune à tous les gabarits)
modele03.css, qui contient tous les styles propres à ce gabarit, et que nous vous invitons à consulter.
Pour voir le détail du code HTML de cette page, utilisez la fonction d'affichage de la source de votre navigateur web (ex: «Affichage > Code source de la page»).
À noter
Le conteneur global (div#global) a une largeur fixe de 750px. Il est centré grâce aux marges automatiques (margin-left: auto et margin-right: auto).
Le conteneur global prend au minimum toute la hauteur de la fenêtre grâce à la propriété min-height, avec la valeur 100%.
La petite subtilité ici est que pour que le min-height: 100% soit pris en compte, l'élément parent (body) doit lui-même avoir une hauteur déterminée. Et cela vaut également pour le parent de body, c'est à dire l'élément html (appelé aussi élément racine du document). On écrit donc:
html, body {
height: 100%;
}
#global {
min-height: 100%;
}Attention: il ne faut pas donner de marge, padding ou bordure verticales aux éléments html, body et div#global. En effet, ils se rajouteraient à la hauteur de l'élément, or le moindre pixel en plus des 100% de hauteur provoquerait l'apparition d'une barre de défilement, même s'il n'y a aucun contenu à faire défiler.
Pour la même raison, il faut éviter la fusion des marges entre div#global et ses éléments enfants. Dans ce gabarit, on utilise overflow: hidden sur div#global dans ce but.
On constate que même lorsque le contenu est court, le bloc div#global prend toute la hauteur de son parent, l'élément body.
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.1; Media Center PC 3.0; IE7-01NET.COM-1.1; IE7-01NET.COM-1.1)
