100% CSS - 0 tables - HTML Strict !

Olivier

11/07/2009 à 12:27

Le 11/07/2009 08:23, kurtbosh a écrit :

Bonjour,

Oui je sais pour vous c'est banal mais pas pour moi. J'en suis fier
moi de ma petite papage !

http://www.grenault.net/cafe.htm

Y'a plus qu'à corriger :
line 98 column 57 - Avertissement: trimming empty <p>
line 111 column 28 - Avertissement: trimming empty <p>
line 133 column 25 - Avertissement: trimming empty <p>
line 142 column 120 - Avertissement: trimming empty <p>

Éventuellement une balise noscript (et une explication de ce qui ne
marchera pas) pour les déficients du javascript...

HTMl Validator te sera d'un grand soutient :
http://users.skynet.be/mgueury/mozilla/

Pour pinailler :
pourquoi mettre une class sur ton h1 alors que tu peux le styler
directement ?

Ton menu pourrait être une liste (et en faisant les mises en formes
sur ul et li, tu évites le 1er item décoratif).

Sur le lien "précédent", je préfère laisser ce travail au navigateur,
mais je reconnais (même si je ne parviens pas à comprendre pourquoi),
que « ça se fait ».

ton :
<div class="bandehaut">
L'essentiel sur le café expresso
</div>
Pourrait être un "h2".

Idem, les class "soustitre" pourraient être des "h4".

Pour le truc des colonnes, il y a une propriété css3 qui le fait
(évidement ça passe pas partout). Et c'est pas sûr que ça soit aussi
précis que tu le souhaites (pour éviter un titre en bas de colonne par
ex.).

Plutôt qu'une class "italique", l'utilisation de la balise "em" qui a
du sens.

Les "interligne3", je ne suis pas fan. Il y a moyen de faire ça en css.

Voilà, c'est un bon début.

--
Olivier

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>

SAM

11/07/2009 à 15:14

Le 7/11/09 8:23 AM, kurtbosh a écrit :

Bonjour,

Oui je sais pour vous c'est banal mais pas pour moi. J'en suis fier
moi de ma petite papage !

Wahou !

http://www.grenault.net/cafe.htm

Ne reste plus qu'à corriger les balises fermantes de pragraphe aux
lignes : 98, 111, 133 et 142 ;-)

Bon weekend.

Est-on autorisé à commenter les CSS ?
Non ?
Bon, tant pis ...

Pourquoi
H1 a t-il à la fois margin-top: 12px; et margin-top: 0.4em; ?
est-il en gras alors qu'il me semble que c'est déjà par défaut
.haut est-il en float ?
.bandehaut est-il en float ? (ce qui oblige le width pour ces 2 là)

Pour l'allègement des feuilles de style (et du HTML),
le cas du div du menu par exemple, il me semble qu'on aurait pu faire :

.colonne-menu {
background-color: #D3D3D3;
width: 102px;
margin: auto; margin-top: 0px;
}

.colonne-menu {
float: left;
min-width: 7.2em; /* largeur réglée par le bouton ? */
height: 1000px; /* un peu discutable : blanc en bas sur 20" */
padding-top: 5px; /* pour le truc "inter" ? */
text-align: center;
}

.colonne-menu a {
display: block;
/* width: 7.2em; */
margin: 0.2em;
margin-top: 0;
border: 1px solid black;
background-color: white;
text-decoration: none;
font-family: Geneva, Helvetica, Arial, Verdana, sans-serif;
font-size: 1em;
line-height: 1.3em;
/* color: blue; (déjà spécifié à A) */
}

.colonne-menu a:hover { border-color: red }

<div class="colonne-menu">
<a href="index.htm">accueil</a>
<a href="mail.htm">contact</a>
<a href="rechercher.htm">rechercher</a>
<p><script type="text/javascript">precedent();</script></p>
<p>
<script type="text/javascript"
src="http://www.swisstools.net/counter.asp?id0803&texte=ok&taille=1&couleur0080&style=Arial"></script>
</p>
</div>

Sinon, éviter de faire un DIV pour finalement n'y coller qu'un H1 (ou à
peu près)

<h1>Le café expresso <em>Grenault.net</em></h1>

h1 { position: relative; margin:0; padding: 10px; text-align: right;
background: #D3D3D3; color: blue }
h1 em { display: block; position: absolute; top: 10px; left: 10px; }

--
sm

Le 7/11/09 8:23 AM, kurtbosh a écrit :

Bonjour,

Oui je sais pour vous c'est banal mais pas pour moi. J'en suis fier
moi de ma petite papage !

Wahou !

http://www.grenault.net/cafe.htm

Ne reste plus qu'à corriger les balises fermantes de pragraphe aux
lignes : 98, 111, 133 et 142 ;-)

Bon weekend.

Est-on autorisé à commenter les CSS ?
Non ?
Bon, tant pis ...

Pourquoi
H1 a t-il à la fois margin-top: 12px; et margin-top: 0.4em; ?
est-il en gras alors qu'il me semble que c'est déjà par défaut
.haut est-il en float ?
.bandehaut est-il en float ? (ce qui oblige le width pour ces 2 là)

Pour l'allègement des feuilles de style (et du HTML),
le cas du div du menu par exemple, il me semble qu'on aurait pu faire :

.colonne-menu {
background-color: #D3D3D3;
width: 102px;
margin: auto; margin-top: 0px;
}

.colonne-menu {
float: left;
min-width: 7.2em; /* largeur réglée par le bouton ? */
height: 1000px; /* un peu discutable : blanc en bas sur 20" */
padding-top: 5px; /* pour le truc "inter" ? */
text-align: center;
}

.colonne-menu a {
display: block;
/* width: 7.2em; */
margin: 0.2em;
margin-top: 0;
border: 1px solid black;
background-color: white;
text-decoration: none;
font-family: Geneva, Helvetica, Arial, Verdana, sans-serif;
font-size: 1em;
line-height: 1.3em;
/* color: blue; (déjà spécifié à A) */
}

.colonne-menu a:hover { border-color: red }

<div class="colonne-menu">
<a href="index.htm">accueil</a>
<a href="mail.htm">contact</a>
<a href="rechercher.htm">rechercher</a>
<p><script type="text/javascript">precedent();</script></p>
<p>
<script type="text/javascript"
src="http://www.swisstools.net/counter.asp?id0803&texte=ok&taille=1&couleur0080&style=Arial"></script>
</p>
</div>

Sinon, éviter de faire un DIV pour finalement n'y coller qu'un H1 (ou à
peu près)

<h1>Le café expresso <em>Grenault.net</em></h1>

h1 { position: relative; margin:0; padding: 10px; text-align: right;
background: #D3D3D3; color: blue }
h1 em { display: block; position: absolute; top: 10px; left: 10px; }

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

Dominique Ottello

11/07/2009 à 18:37

Olivier écrivait :

Sur le lien "précédent", je préfère laisser ce travail au navigateur,
mais je reconnais (même si je ne parviens pas à comprendre pourquoi),
que « ça se fait ».

Je mets très souvent, non pas des liens nommés « Page précédente », mais
nommés « Retour » alors que je sais très bien que les navigateurs
proposent tous cette option.

Mais, l'option « Précédent » du navigateur, tout du moins pour certains,
par exemple Firefox, fait revenir à la page précédente, mais en haut de
page et non pas de l'endroit d'où on est parti.
Alors que mes liens « Retour » font revenir de l'endroit d'où on est
parti.
--
Ce n'est pas parce que l'erreur se propage qu'elle devient vérité. Gandhi
Technologie aéronautique : http://aviatechno.free.fr (http://ottello.net)
Concorde dans la presse de 1965 à 2003 : http://le.pointu.free.fr

Olivier

11/07/2009 à 19:28

Le 11/07/2009 18:37, Dominique Ottello a écrit :

Mais, l'option « Précédent » du navigateur, tout du moins pour certains,
par exemple Firefox, fait revenir à la page précédente, mais en haut de
page et non pas de l'endroit d'où on est parti.

Pas sur mon firefox 3.0.11 qui revient exactement d'où j'étais parti.
Idem avec Konqueror 4.2.2 (moteur différent).

Je n'ai pas sous la main de firefox 3.5 mais il me semble bien que
c'est pareil.

--
Olivier

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>

Dominique Ottello

11/07/2009 à 19:53

Olivier écrivait :

Pas sur mon firefox 3.0.11 qui revient exactement d'où j'étais parti.
Idem avec Konqueror 4.2.2 (moteur différent).

Windows XP Home SP3 - Firefox 3.0.11

Page : http://aviatechno.free.fr/crevette/crevette.php

Aller vers le bas de page, cliquer sur image Le Bourget 7 Octobre 1933
donc, nouvelle page http://aviatechno.free.fr/crevette/drapeau_af.php

Valider Page Précédente de Firefox (Alt-Flèche Gauche), je reviens bien
sur la page précédente ....crevette.php, mais en haut de page, pas d'où
je suis parti.

--
Il vaut mieux ignorer où l'on est, et savoir qu'on l'ignore, que de se
croire avec confiance où l'on n'est pas. Jean Dominique Cassini.
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Olivier

11/07/2009 à 21:03

Le 11/07/2009 19:53, Dominique Ottello a écrit :

Olivier écrivait :

Pas sur mon firefox 3.0.11 qui revient exactement d'où j'étais parti.
Idem avec Konqueror 4.2.2 (moteur différent).

Windows XP Home SP3 - Firefox 3.0.11

Page : http://aviatechno.free.fr/crevette/crevette.php

Aller vers le bas de page, cliquer sur image Le Bourget 7 Octobre 1933
donc, nouvelle page http://aviatechno.free.fr/crevette/drapeau_af.php

Valider Page Précédente de Firefox (Alt-Flèche Gauche), je reviens bien
sur la page précédente ....crevette.php, mais en haut de page, pas d'où
je suis parti.

OK, je pense avoir compris.

Je pense, mais tu vérifieras plus attentivement si tu le souhaites,
que cela vient de tes en-têtes. Tu interdis la mise en cache de ta
page. Alors le navigateur la recharge.

J'ai contrôlé sur un de mes sites : avec la page d'accueil qui
interdit le cache, en revenant dessus, en se retrouve "en haut".

Sur les pages qui permettent le cache, on revient où l'on était.

Après c'est à toi de voir si ta page change ou non.
En installant des directives de cache dans les en-têtes, j'ai réduit
le nombre de pages vues d'1/3. Cela signifie aussi que c'est plus
rapide pour les visiteurs, pour le même service.

En gros pour des pages (à peu près) statiques :
- je donne une durée de vie de 24h à la page => si le navigateur
revient dessus dans les 24h, il ne fait /aucune/ requête.
- après 24h, le navigateur demande si la page est modifiée :
- si oui, il demande la page
- si non, c'est reparti pour 24h

Le truc sympa, c'est que tout le mécanisme existe. Il suffit de s'en
servir. J'ai bricolé mon truc à partir de la page "cachez moi ça" (pas
retrouvée) et du livre "php5 avancé" du même auteur : Éric Daspet (il
n'est pas le seul auteur du livre).

@+

--
Olivier

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>

SAM

11/07/2009 à 22:27

Le 7/11/09 9:03 PM, Olivier a écrit :

En gros pour des pages (à peu près) statiques :
- je donne une durée de vie de 24h à la page => si le navigateur
revient dessus dans les 24h, il ne fait /aucune/ requête.
- après 24h, le navigateur demande si la page est modifiée :
- si oui, il demande la page
- si non, c'est reparti pour 24h

Le truc sympa, c'est que tout le mécanisme existe. Il suffit de s'en
servir.

<http://www.mnot.net/cache_docs/index.fr.html>

--
sm

Dominique Ottello

12/07/2009 à 09:51

Olivier écrivait :

Je pense, mais tu vérifieras plus attentivement si tu le souhaites,
que cela vient de tes en-têtes. Tu interdis la mise en cache de ta
page. Alors le navigateur la recharge.

J'en suis tout ébaubi !

Tout cela se passe à l'insu de mon plein gré, d'autant plus que les
mêmes pages, vues avec Opera ou IE7/8, ne présentent pas ce problème de
retour en haut de page.

Je vais regarder de plus près.
--
Il vaut mieux ignorer où l'on est, et savoir qu'on l'ignore, que de se
croire avec confiance où l'on n'est pas. Jean Dominique Cassini.
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Dominique Ottello

12/07/2009 à 12:15

SAM écrivait :

Le 7/11/09 9:03 PM, Olivier a écrit :
>
> En gros pour des pages (à peu près) statiques :
> - je donne une durée de vie de 24h à la page => si le navigateur
> revient dessus dans les 24h, il ne fait /aucune/ requête.
> - après 24h, le navigateur demande si la page est modifiée :
> - si oui, il demande la page
> - si non, c'est reparti pour 24h
>
> Le truc sympa, c'est que tout le mécanisme existe. Il suffit de s'en
> servir.

<http://www.mnot.net/cache_docs/index.fr.html>

Bonjour,

Je n'y comprend plus rien.
Voilà ce que j'ai mis comme entête dans mes pages PHP

header("content-type:text/html; charset=$charset");
header("Cache-Control: max-ager00, must-revalidate");
$duree = 60 * 60 * 24 * 3; // 3 jours
header("Expires: ".gmdate("D, d M Y H:i:s", time() + $duree)." GMT");

Et pourtant, tant en local Wampserver avec Apache 2.2.11 et PHP 5.3.0,
que chez mes deux hébergeurs free.fr et 1and1, voilà ce que je vois avec
http live header

-- En local :
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:01:48 GMT
Server: Apache/2.2.11 (Win32) PHP/5.3.0
X-Powered-By: PHP/5.3.0
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

-- Chez free.fr
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:07:53 GMT
Server: Apache/ProXad [Aug 9 2008 02:45:09]
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Content-Encoding: gzip
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

-- Chez 1and1
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:09:19 GMT
Server: Apache
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Content-Encoding: gzip
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

La date de l'Expires m'intrigue, car toujours la même dans les trois cas
alors qu'un essais d'affichage du résultat de mon header(Expires:...)
donne bien une date « dans trois jours » :
Expires: Wed, 15 Jul 2009 10:12:18 GMT

Où est mon erreur ?
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait :

Le 7/11/09 9:03 PM, Olivier a écrit :
>
> En gros pour des pages (à peu près) statiques :
> - je donne une durée de vie de 24h à la page => si le navigateur
> revient dessus dans les 24h, il ne fait /aucune/ requête.
> - après 24h, le navigateur demande si la page est modifiée :
> - si oui, il demande la page
> - si non, c'est reparti pour 24h
>
> Le truc sympa, c'est que tout le mécanisme existe. Il suffit de s'en
> servir.

<http://www.mnot.net/cache_docs/index.fr.html>

Bonjour,

Je n'y comprend plus rien.
Voilà ce que j'ai mis comme entête dans mes pages PHP

header("content-type:text/html; charset=$charset");
header("Cache-Control: max-ager00, must-revalidate");
$duree = 60 * 60 * 24 * 3; // 3 jours
header("Expires: ".gmdate("D, d M Y H:i:s", time() + $duree)." GMT");

Et pourtant, tant en local Wampserver avec Apache 2.2.11 et PHP 5.3.0,
que chez mes deux hébergeurs free.fr et 1and1, voilà ce que je vois avec
http live header

-- En local :
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:01:48 GMT
Server: Apache/2.2.11 (Win32) PHP/5.3.0
X-Powered-By: PHP/5.3.0
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

-- Chez free.fr
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:07:53 GMT
Server: Apache/ProXad [Aug 9 2008 02:45:09]
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Content-Encoding: gzip
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

-- Chez 1and1
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:09:19 GMT
Server: Apache
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Content-Encoding: gzip
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

La date de l'Expires m'intrigue, car toujours la même dans les trois cas
alors qu'un essais d'affichage du résultat de mon header(Expires:...)
donne bien une date « dans trois jours » :
Expires: Wed, 15 Jul 2009 10:12:18 GMT

Où est mon erreur ?
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Vous avez filtré cet utilisateur ! Consultez son message

SAM écrivait :

Le 7/11/09 9:03 PM, Olivier a écrit :
>
> En gros pour des pages (à peu près) statiques :
> - je donne une durée de vie de 24h à la page => si le navigateur
> revient dessus dans les 24h, il ne fait /aucune/ requête.
> - après 24h, le navigateur demande si la page est modifiée :
> - si oui, il demande la page
> - si non, c'est reparti pour 24h
>
> Le truc sympa, c'est que tout le mécanisme existe. Il suffit de s'en
> servir.

<http://www.mnot.net/cache_docs/index.fr.html>

Bonjour,

Je n'y comprend plus rien.
Voilà ce que j'ai mis comme entête dans mes pages PHP

header("content-type:text/html; charset=$charset");
header("Cache-Control: max-ager00, must-revalidate");
$duree = 60 * 60 * 24 * 3; // 3 jours
header("Expires: ".gmdate("D, d M Y H:i:s", time() + $duree)." GMT");

Et pourtant, tant en local Wampserver avec Apache 2.2.11 et PHP 5.3.0,
que chez mes deux hébergeurs free.fr et 1and1, voilà ce que je vois avec
http live header

-- En local :
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:01:48 GMT
Server: Apache/2.2.11 (Win32) PHP/5.3.0
X-Powered-By: PHP/5.3.0
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

-- Chez free.fr
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:07:53 GMT
Server: Apache/ProXad [Aug 9 2008 02:45:09]
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Content-Encoding: gzip
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

-- Chez 1and1
HTTP/1.x 200 OK
Date: Sun, 12 Jul 2009 10:09:19 GMT
Server: Apache
Cache-Control: no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Content-Encoding: gzip
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache

La date de l'Expires m'intrigue, car toujours la même dans les trois cas
alors qu'un essais d'affichage du résultat de mon header(Expires:...)
donne bien une date « dans trois jours » :
Expires: Wed, 15 Jul 2009 10:12:18 GMT

Où est mon erreur ?
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Denis Beauregard

12/07/2009 à 15:47

Le Sun, 12 Jul 2009 09:51:48 +0200, Dominique Ottello
écrivait dans
fr.comp.infosystemes.www.auteurs:

Olivier écrivait :

Je pense, mais tu vérifieras plus attentivement si tu le souhaites,
que cela vient de tes en-têtes. Tu interdis la mise en cache de ta
page. Alors le navigateur la recharge.

J'en suis tout ébaubi !

Tout cela se passe à l'insu de mon plein gré, d'autant plus que les
mêmes pages, vues avec Opera ou IE7/8, ne présentent pas ce problème de
retour en haut de page.

Je vais regarder de plus près.

Pour ajouter mon grain de sel...

Je viens de regarder un article sur un site et j'ai lu les
commentaires un par un au bas de chaque page, ce qui m'a amené
5 pages plus loin. Puis, je suis revenu (avec le bouton retour
en arrière) à la 1re page. Le navigateur a alors affiché le bas
de cette page, où se trouve le pointeur vers la suite des
commentaires.

J'en déduis donc que par défaut, ce navigateur garde en mémoire, dans
sa pile de retours en arrière, la position dans la page en plus de
l'URL. Mais si je vais directement sur une page, sans passer par la
pile, j'arriverai au début de la page.

J'utilise Seamonkey 1.1.7 (qui est un peu vieux, Gecko/20071128).

Denis

100% CSS - 0 tables - HTML Strict !

10 réponses

Veuillez sélectionner un problème