100% CSS - 0 tables - HTML Strict !

Le
kurtbosh
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

Bon weekend.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier
Le #22050661
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

SAM
Le #22050551
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">
<p><script type="text/javascript">precedent();</script></p>
<p>
<script type="text/javascript"
src="http://www.swisstools.net/counter.asp?id0803&amp;texte=ok&amp;taille=1&amp;couleur0080&amp;style=Arial"></script>
</p>
</div>


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


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
Dominique Ottello
Le #22050541
Olivier
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
Le #22050531
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

Dominique Ottello
Le #22050521
Olivier
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
Le #22050511
Le 11/07/2009 19:53, Dominique Ottello a écrit :
Olivier
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

SAM
Le #22050501
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.




--
sm
Dominique Ottello
Le #22050491
Olivier
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
Le #22050481
SAM
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.




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
Le #22050471
Le Sun, 12 Jul 2009 09:51:48 +0200, Dominique Ottello
fr.comp.infosystemes.www.auteurs:

Olivier
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
Publicité
Poster une réponse
Anonyme