Bonjour,
J'ai fais l'acquisition de "Apprendre XHTML & CSS". C'est trés bien fait. Bravo Florent.
Je commence à comprendre.
Mais ...... !!!!!
Je viens de créer 3 fichiers dans Bluesfish.
Lorsque je demande de faire afficher dans Firefox rien ne passe sauf d'exposer du texte.
Mes 3 fichiers sont nommés :
1 - index.html ( qui donne ça )
Gabarit 01
Caract�ristiques: largeur fluide, contenu sur toute la largeur, en-t�te, contenu et pied de page.
* Accueil
* Tous les gabarits
* Utilisation
* Licence
* Cr�dits
� propos du gabarit 01
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:
1. base.css (mise en forme minimale du texte, commune � tous les gabarits)
2. modele01.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
Ce gabarit est tr�s simple, et ne devrait pas n�cessiter moult explications. Deux points sont � noter tout de m�me:
1.
Le menu de navigation est horizontal, alors que nous avons utilis� une liste non ordonn�e (�l�ment HTML ul)pour le coder (voir le code HTML). Comment se fait-ce?
Ici, on obtient cette disposition gr�ce � la d�claration CSS display: inline;, appliqu�e aux items de liste (�l�ments HTML li).
2.
Le principal probl�me de ce gabarit, mis � part son aspect tr�s frustre, c'est que l'on place tout le contenu dans un bloc qui prend 100% de la largeur de la fen�tre du navigateur (avec 20px de padding � gauche et � droite). Pour les petites r�solutions (appareils mobiles, �crans en 800×600…), c'est tr�s bien, voire m�me id�al. Mais en 1024×768 et pour les r�solutions sup�rieures, cela peut donner des choses illisibles avec des lignes de texte interminables!
D'ailleurs, il est probable que vous soyez arriv� au m�me constat rien qu'en tentant de lire ces explications sur votre propre �cran!
Ce probl�me est moins fort dans le cas d'un design sur deux ou trois colonnes. Et, dans tous les cas, on peut l'�viter en travaillant avec une largeur fixe (par exemple 750px ou 900px), ou encore avec une largeur fluide �intelligente� (voir les gabarits qui portent cette mention).
Mise en page © 2008 Elephorm et Alsacr�ations
Le contenu de mon pied de page. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
2 - styles.base.css ( donne ça )
/* ==============================================
FEUILLE DE STYLES DES GABARITS HTML/CSS --- 01
© Elephorm & Alsacreations.com
Conditions d'utilisation:
http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
/* --- COULEURS --- */
/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
uniquement les couleurs de fond (propriétés background) et les couleurs
du texte (propriété color).
Pour modifier la disposition des blocs, voir plus bas dans la feuille de
styles la partie «positionnement». */
/* Général */
body {
color: #F0E39E;
background: #181A12; /* Voir -> Note 1 ci-dessous */
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #FF4C00;
}
strong {
color: #A1B55D;
}
/* En-tête */
#entete {
background: #2C2F22;
}
/* Navigation */
#navigation {
background: #181A12;
}
#navigation a {
color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
background: #000000;
}
/* Contenu principal */
#contenu {
color: #363B29;
background: #cbd888;
}
#contenu a {
color: #332510;
}
#contenu a:hover, #contenu a:focus {
color: #6E5122;
}
#contenu strong {
color: #181A12;
}
/* Pied de page */
#pied {
color: #E6A948;
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 0; /* -> 2 */
}
/* En-tête */
#entete {
padding: 15px 20px 10px 20px;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}
/* Menu de navigation */
#navigation {
padding: 12px 15px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
#navigation li {
display: inline; /* -> 3 */
}
#navigation a {
padding: 6px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
/* Contenu */
#contenu {
padding: 10px 20px;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}
/* Pied de page */
#pied {
padding: 15px 20px;
font-size: .85em;
}
#pied p {
margin: .5em 0;
}
#pied #copyright {
float: right;
margin: .5em 0 30px 10%;
font-size: 1em;
}
/* --- NOTES ---
1. Notes que cette couleur de fond n'est apparente qu'en bas de page. Plus
haut, elle est masque: par la couleur de fond de l'en-tête, puis par la
couleur de fond du menu, puis par la couleur de fond du contenu. Seul le
pied de page laisse apparaitre cette couleur de fond.
2. Pour ce gabarit, on supprime l'écart entre les «bords» du navigateur et
le contenu, en passant le padding de l'élément BODY à zéro.
(Voir également la note numéro 2 dans base.css.)
3. Si les éléments de notre menu se placent horizontalement plutôt que les
uns en dessous des autres, c'est parce qu'ils ne sont plus affichés
comme des blocs (ce qui est normalement le cas des éléments LI), mais
comme des éléments de type en-ligne. On obtient ce comportement avec la
propriété "display" et la valeur "inline".
Le fait que nos LI se comportent comme un flot unique de texte aura deux
conséquences:
- on va pouvoir aligner le texte du menu à gauche (c'est le cas ici), à
droite ou encore au centre, en jouant sur la propriété "text-align" du
menu (sur l'élément UL ou sur div#navigation);
- certains styles ne pourront pas être appliqués... par exemple, la
propriété "width" ne peut pas être utilisée pour les éléments en
"display: inline".
2 - styles.modele01.css ( donne ça )
/* ==============================================
FEUILLE DE STYLES DES GABARITS HTML/CSS --- 01
© Elephorm & Alsacreations.com
Conditions d'utilisation:
http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
/* --- COULEURS --- */
/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
uniquement les couleurs de fond (propriétés background) et les couleurs
du texte (propriété color).
Pour modifier la disposition des blocs, voir plus bas dans la feuille de
styles la partie «positionnement». */
/* Général */
body {
color: #F0E39E;
background: #181A12; /* Voir -> Note 1 ci-dessous */
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #FF4C00;
}
strong {
color: #A1B55D;
}
/* En-tête */
#entete {
background: #2C2F22;
}
/* Navigation */
#navigation {
background: #181A12;
}
#navigation a {
color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
background: #000000;
}
/* Contenu principal */
#contenu {
color: #363B29;
background: #cbd888;
}
#contenu a {
color: #332510;
}
#contenu a:hover, #contenu a:focus {
color: #6E5122;
}
#contenu strong {
color: #181A12;
}
/* Pied de page */
#pied {
color: #E6A948;
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 0; /* -> 2 */
}
/* En-tête */
#entete {
padding: 15px 20px 10px 20px;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}
/* Menu de navigation */
#navigation {
padding: 12px 15px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
#navigation li {
display: inline; /* -> 3 */
}
#navigation a {
padding: 6px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
/* Contenu */
#contenu {
padding: 10px 20px;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}
/* Pied de page */
#pied {
padding: 15px 20px;
font-size: .85em;
}
#pied p {
margin: .5em 0;
}
#pied #copyright {
float: right;
margin: .5em 0 30px 10%;
font-size: 1em;
}
/* --- NOTES ---
1. Notes que cette couleur de fond n'est apparente qu'en bas de page. Plus
haut, elle est masque: par la couleur de fond de l'en-tête, puis par la
couleur de fond du menu, puis par la couleur de fond du contenu. Seul le
pied de page laisse apparaitre cette couleur de fond.
2. Pour ce gabarit, on supprime l'écart entre les «bords» du navigateur et
le contenu, en passant le padding de l'élément BODY à zéro.
(Voir également la note numéro 2 dans base.css.)
3. Si les éléments de notre menu se placent horizontalement plutôt que les
uns en dessous des autres, c'est parce qu'ils ne sont plus affichés
comme des blocs (ce qui est normalement le cas des éléments LI), mais
comme des éléments de type en-ligne. On obtient ce comportement avec la
propriété "display" et la valeur "inline".
Le fait que nos LI se comportent comme un flot unique de texte aura deux
conséquences:
- on va pouvoir aligner le texte du menu à gauche (c'est le cas ici), à
droite ou encore au centre, en jouant sur la propriété "text-align" du
menu (sur l'élément UL ou sur div#navigation);
- certains styles ne pourront pas être appliqués... par exemple, la
propriété "width" ne peut pas être utilisée pour les éléments en
"display: inline".
*/
Merci pour vos aides
J'ai fais l'acquisition de "Apprendre XHTML & CSS". C'est trés bien fait. Bravo Florent.
Je commence à comprendre.
Mais ...... !!!!!
Je viens de créer 3 fichiers dans Bluesfish.
Lorsque je demande de faire afficher dans Firefox rien ne passe sauf d'exposer du texte.
Mes 3 fichiers sont nommés :
1 - index.html ( qui donne ça )
Gabarit 01
Caract�ristiques: largeur fluide, contenu sur toute la largeur, en-t�te, contenu et pied de page.
* Accueil
* Tous les gabarits
* Utilisation
* Licence
* Cr�dits
� propos du gabarit 01
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:
1. base.css (mise en forme minimale du texte, commune � tous les gabarits)
2. modele01.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
Ce gabarit est tr�s simple, et ne devrait pas n�cessiter moult explications. Deux points sont � noter tout de m�me:
1.
Le menu de navigation est horizontal, alors que nous avons utilis� une liste non ordonn�e (�l�ment HTML ul)pour le coder (voir le code HTML). Comment se fait-ce?
Ici, on obtient cette disposition gr�ce � la d�claration CSS display: inline;, appliqu�e aux items de liste (�l�ments HTML li).
2.
Le principal probl�me de ce gabarit, mis � part son aspect tr�s frustre, c'est que l'on place tout le contenu dans un bloc qui prend 100% de la largeur de la fen�tre du navigateur (avec 20px de padding � gauche et � droite). Pour les petites r�solutions (appareils mobiles, �crans en 800×600…), c'est tr�s bien, voire m�me id�al. Mais en 1024×768 et pour les r�solutions sup�rieures, cela peut donner des choses illisibles avec des lignes de texte interminables!
D'ailleurs, il est probable que vous soyez arriv� au m�me constat rien qu'en tentant de lire ces explications sur votre propre �cran!
Ce probl�me est moins fort dans le cas d'un design sur deux ou trois colonnes. Et, dans tous les cas, on peut l'�viter en travaillant avec une largeur fixe (par exemple 750px ou 900px), ou encore avec une largeur fluide �intelligente� (voir les gabarits qui portent cette mention).
Mise en page © 2008 Elephorm et Alsacr�ations
Le contenu de mon pied de page. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
2 - styles.base.css ( donne ça )
/* ==============================================
FEUILLE DE STYLES DES GABARITS HTML/CSS --- 01
© Elephorm & Alsacreations.com
Conditions d'utilisation:
http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
/* --- COULEURS --- */
/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
uniquement les couleurs de fond (propriétés background) et les couleurs
du texte (propriété color).
Pour modifier la disposition des blocs, voir plus bas dans la feuille de
styles la partie «positionnement». */
/* Général */
body {
color: #F0E39E;
background: #181A12; /* Voir -> Note 1 ci-dessous */
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #FF4C00;
}
strong {
color: #A1B55D;
}
/* En-tête */
#entete {
background: #2C2F22;
}
/* Navigation */
#navigation {
background: #181A12;
}
#navigation a {
color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
background: #000000;
}
/* Contenu principal */
#contenu {
color: #363B29;
background: #cbd888;
}
#contenu a {
color: #332510;
}
#contenu a:hover, #contenu a:focus {
color: #6E5122;
}
#contenu strong {
color: #181A12;
}
/* Pied de page */
#pied {
color: #E6A948;
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 0; /* -> 2 */
}
/* En-tête */
#entete {
padding: 15px 20px 10px 20px;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}
/* Menu de navigation */
#navigation {
padding: 12px 15px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
#navigation li {
display: inline; /* -> 3 */
}
#navigation a {
padding: 6px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
/* Contenu */
#contenu {
padding: 10px 20px;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}
/* Pied de page */
#pied {
padding: 15px 20px;
font-size: .85em;
}
#pied p {
margin: .5em 0;
}
#pied #copyright {
float: right;
margin: .5em 0 30px 10%;
font-size: 1em;
}
/* --- NOTES ---
1. Notes que cette couleur de fond n'est apparente qu'en bas de page. Plus
haut, elle est masque: par la couleur de fond de l'en-tête, puis par la
couleur de fond du menu, puis par la couleur de fond du contenu. Seul le
pied de page laisse apparaitre cette couleur de fond.
2. Pour ce gabarit, on supprime l'écart entre les «bords» du navigateur et
le contenu, en passant le padding de l'élément BODY à zéro.
(Voir également la note numéro 2 dans base.css.)
3. Si les éléments de notre menu se placent horizontalement plutôt que les
uns en dessous des autres, c'est parce qu'ils ne sont plus affichés
comme des blocs (ce qui est normalement le cas des éléments LI), mais
comme des éléments de type en-ligne. On obtient ce comportement avec la
propriété "display" et la valeur "inline".
Le fait que nos LI se comportent comme un flot unique de texte aura deux
conséquences:
- on va pouvoir aligner le texte du menu à gauche (c'est le cas ici), à
droite ou encore au centre, en jouant sur la propriété "text-align" du
menu (sur l'élément UL ou sur div#navigation);
- certains styles ne pourront pas être appliqués... par exemple, la
propriété "width" ne peut pas être utilisée pour les éléments en
"display: inline".
2 - styles.modele01.css ( donne ça )
/* ==============================================
FEUILLE DE STYLES DES GABARITS HTML/CSS --- 01
© Elephorm & Alsacreations.com
Conditions d'utilisation:
http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
/* --- COULEURS --- */
/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
uniquement les couleurs de fond (propriétés background) et les couleurs
du texte (propriété color).
Pour modifier la disposition des blocs, voir plus bas dans la feuille de
styles la partie «positionnement». */
/* Général */
body {
color: #F0E39E;
background: #181A12; /* Voir -> Note 1 ci-dessous */
}
a {
color: #FF6533;
}
a:hover, a:focus {
color: #FF4C00;
}
strong {
color: #A1B55D;
}
/* En-tête */
#entete {
background: #2C2F22;
}
/* Navigation */
#navigation {
background: #181A12;
}
#navigation a {
color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
background: #000000;
}
/* Contenu principal */
#contenu {
color: #363B29;
background: #cbd888;
}
#contenu a {
color: #332510;
}
#contenu a:hover, #contenu a:focus {
color: #6E5122;
}
#contenu strong {
color: #181A12;
}
/* Pied de page */
#pied {
color: #E6A948;
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 0; /* -> 2 */
}
/* En-tête */
#entete {
padding: 15px 20px 10px 20px;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}
/* Menu de navigation */
#navigation {
padding: 12px 15px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
#navigation li {
display: inline; /* -> 3 */
}
#navigation a {
padding: 6px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
/* Contenu */
#contenu {
padding: 10px 20px;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}
/* Pied de page */
#pied {
padding: 15px 20px;
font-size: .85em;
}
#pied p {
margin: .5em 0;
}
#pied #copyright {
float: right;
margin: .5em 0 30px 10%;
font-size: 1em;
}
/* --- NOTES ---
1. Notes que cette couleur de fond n'est apparente qu'en bas de page. Plus
haut, elle est masque: par la couleur de fond de l'en-tête, puis par la
couleur de fond du menu, puis par la couleur de fond du contenu. Seul le
pied de page laisse apparaitre cette couleur de fond.
2. Pour ce gabarit, on supprime l'écart entre les «bords» du navigateur et
le contenu, en passant le padding de l'élément BODY à zéro.
(Voir également la note numéro 2 dans base.css.)
3. Si les éléments de notre menu se placent horizontalement plutôt que les
uns en dessous des autres, c'est parce qu'ils ne sont plus affichés
comme des blocs (ce qui est normalement le cas des éléments LI), mais
comme des éléments de type en-ligne. On obtient ce comportement avec la
propriété "display" et la valeur "inline".
Le fait que nos LI se comportent comme un flot unique de texte aura deux
conséquences:
- on va pouvoir aligner le texte du menu à gauche (c'est le cas ici), à
droite ou encore au centre, en jouant sur la propriété "text-align" du
menu (sur l'élément UL ou sur div#navigation);
- certains styles ne pourront pas être appliqués... par exemple, la
propriété "width" ne peut pas être utilisée pour les éléments en
"display: inline".
*/
Merci pour vos aides
), un document HTML est un fichier texte, qui peut porter l'extension .html ou .htm par exemple (même si ce n'est pas absolument obligatoire), et qui est composé de texte encadré dans des balises HTML. C'est ce que l'on voit en affichant le code source de n'importe quelle page d'un site web (dans Firefox: Affichage > Code source de la page).