Bonjour, je me présente, je m'appelle loic. J'ai fais le site d'un ami
cet été, un psychologue spécialisé dans l'autisme. Comme il devait
ouvrir son cabinet le 15 septembre, j'ai eu trés peu de temps pour lui
réaliser son site. Du coup, je suis allé au plus rapide, je n'ai
respecté aucune recommandation w3c, j'ai utilisé les solutions les plus
immédiates et je me suis adonné à la mise en page en tableau...
http://www.ccifa64.org/
Comme il est content de pouvoir présenté des infos à ses visiteurs, il
me laisse du temps pour améliorer son site, et j'ai donc décidé de
passez tout ce fatras en xhtml et css. Mais voilà, c'est pas aussi
simple qu'il y parait (je pige toujours pas ces §$£@# d'histoires de
float et flux !!).
voilà ou j'en suis aujourd'hui (c'est un début) :
http://www.ccifa64.org/v2/fr/
après plusieurs tentatives infructueuses, j'ai réussi à faire une mise
en page qui passe sur firefox 0.92 et sur IE6 (ouf !)... mais voilà, je
n'arrive pas à faire passer le bloc jaune "focus" à droite du bloc rouge.
Quelqu'un aurait-il une idée ?
Voici donc mon site d'origine (avec tableaux ) :
http://www.ccifa64.org/
Ici, la deuxième version en cours de réalisation :
http://www.ccifa64.org/v2/fr/index.php
Puis, ici le site modifié avec les recommandations suivantes :
"je dirais,mettre le <div> focus avant l'edito au niveau de l'html
passer l'edito en position: absolute et lui appliquer un margin-left:
400px "
http://www.ccifa64.org/v2/fr/index2.php
Puis un autres test :
"j'ai essayé de mettre le bloc focus avant l'edito dans le html, puis de
le mettre en float:right" : ok sur firefox, mais c'est la cata sur IE
http://www.ccifa64.org/v2/fr/index3.php
Et une autre tentative :
"Je dirait en ce qui me concerne de de mettre l'edito en float:left et
de mettre au focus une marge à gauche égale à la largeur de l'edito (au
cas ou il serait plus long que l'edito). Ensuite mettre le pied de page
en clear:left." :
http://www.ccifa64.org/v2/fr/index4.php
ok sur firefox (le fond vert à disparu quand même), mais sur IE, si je
laisse le focus à 250px, il est en bas de page.avec 215 ça passe, mais
c'est pas trés joli, j'aimerai que le focus prenne toute la largeur
dispo (250 pixels). Mais c'est mieux que rien, j'en conviens.
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Etienne SOBOLE
"loic" a écrit dans le message de news: cjmuu7$jl4$
J'ai donc décidé de passez tout ce fatras en xhtml et css. Mais voilà, c'est pas aussi simple qu'il y parait (je pige toujours pas ces §$£@# d'histoires de float et flux !!).
Et pourquoi tu laisses pas des tableaux si tu en es content??? c'est juste pour le plaisir de tester un nouveau truc.
Personnellement, je t'avouerai que j'en suis au meme point que toi, j'y comprends rien, sauf qu'en plus, j'ai du mal à voir l'interet.
Etienne
"loic" <loic@loic.com> a écrit dans le message de news:
cjmuu7$jl4$2@news.tiscali.fr...
J'ai donc décidé de passez tout ce fatras en xhtml et css. Mais voilà,
c'est pas aussi simple qu'il y parait (je pige toujours pas ces §$£@#
d'histoires de float et flux !!).
Et pourquoi tu laisses pas des tableaux si tu en es content???
c'est juste pour le plaisir de tester un nouveau truc.
Personnellement, je t'avouerai que j'en suis au meme point que toi, j'y
comprends rien, sauf qu'en plus, j'ai du mal à voir l'interet.
"loic" a écrit dans le message de news: cjmuu7$jl4$
J'ai donc décidé de passez tout ce fatras en xhtml et css. Mais voilà, c'est pas aussi simple qu'il y parait (je pige toujours pas ces §$£@# d'histoires de float et flux !!).
Et pourquoi tu laisses pas des tableaux si tu en es content??? c'est juste pour le plaisir de tester un nouveau truc.
Personnellement, je t'avouerai que j'en suis au meme point que toi, j'y comprends rien, sauf qu'en plus, j'ai du mal à voir l'interet.
Etienne
Emmanuel Florac
Le Sat, 02 Oct 2004 23:08:16 +0200, Etienne SOBOLE a écrit :
Personnellement, je t'avouerai que j'en suis au meme point que toi, j'y comprends rien, sauf qu'en plus, j'ai du mal à voir l'interet.
L'intérêt c'est de séparer la présentation du contenu. J'ai fait plusierus sites entièrement différents avec quasiment le même html, mais en modifiant un peu la css...
-- Toutes les organisations ont leur règles, et les Femmes Algériennes doivent avoir aussi leurs règles. Kaid Ahmed.
Le Sat, 02 Oct 2004 23:08:16 +0200, Etienne SOBOLE a écrit :
Personnellement, je t'avouerai que j'en suis au meme point que toi, j'y
comprends rien, sauf qu'en plus, j'ai du mal à voir l'interet.
L'intérêt c'est de séparer la présentation du contenu. J'ai fait
plusierus sites entièrement différents avec quasiment le même html,
mais en modifiant un peu la css...
--
Toutes les organisations ont leur règles, et les Femmes Algériennes
doivent avoir aussi leurs règles.
Kaid Ahmed.
Le Sat, 02 Oct 2004 23:08:16 +0200, Etienne SOBOLE a écrit :
Personnellement, je t'avouerai que j'en suis au meme point que toi, j'y comprends rien, sauf qu'en plus, j'ai du mal à voir l'interet.
L'intérêt c'est de séparer la présentation du contenu. J'ai fait plusierus sites entièrement différents avec quasiment le même html, mais en modifiant un peu la css...
-- Toutes les organisations ont leur règles, et les Femmes Algériennes doivent avoir aussi leurs règles. Kaid Ahmed.
Etienne SOBOLE
"Emmanuel Florac" a écrit dans le message de news:
J'ai fait plusierus sites entièrement différents avec quasiment le même html, mais en modifiant un peu la css...
Et ca concrétement, a quoi ca sert? Genre un exemple d'une société, association, particulier, qui aurait eu besoin de faire ca !!!
Etienne
"Emmanuel Florac" <eflorac@imaginet.fr> a écrit dans le message de news:
pan.2004.10.02.21.43.25.966990@imaginet.fr...
J'ai fait
plusierus sites entièrement différents avec quasiment le même html,
mais en modifiant un peu la css...
Et ca concrétement, a quoi ca sert?
Genre un exemple d'une société, association, particulier, qui aurait eu
besoin de faire ca !!!
ma question etait: "un exemple d'une société, association, particulier, qui aurait eu besoin de faire ca !!!"
y a le mot "exemple", et "besoin" !!!
On peux dire que ZenGarden avait besoin de faire une démonstration technique à destination d'un groupe de geek du CSS ;) des possibilité du css...
Bon quelqu'un a un autre exemple !!!
PS : je précise que mes doutes ne portent pas sur l'utilité des css, mais plutot sur l'utilité du div float.
Etienne
Thibaut Allender
On 3/10/2004 23:05, Guy Gruais wrote :
Il n'empêche que la tapisserie est faite et que ceux qui viennent ne voient rien.
dans ce cas, fais faire la peinture d'un hall de gare par monsieur tout le monde et voit son état après 6 mois... "la fin justifie les moyens" comme on dit
Il n'empêche que la tapisserie est faite et que ceux qui viennent ne voient
rien.
dans ce cas, fais faire la peinture d'un hall de gare par monsieur tout
le monde et voit son état après 6 mois...
"la fin justifie les moyens" comme on dit
Il n'empêche que la tapisserie est faite et que ceux qui viennent ne voient rien.
dans ce cas, fais faire la peinture d'un hall de gare par monsieur tout le monde et voit son état après 6 mois... "la fin justifie les moyens" comme on dit
"Thibaut Allender" a écrit dans le message de news:
On 5/10/2004 11:07, Leonick wrote : > L'utilisation des CSS permettrait de transformer > <table>...<tr><td width="15%" valign="top" height="39"
align="right"><img
> border="0" src="images/main.gif" width="24" height="19" alt=""></td> > <td class="texte2" width="85%" valign="top" height="39"><a > href="page45.html">Indret</a>, une fonderie de
canons</td></tr>...</table>en
> ul.unemain { list-style : url("images/main.gif"); }puis<ul > class="unemain"><li><a href="page45.html">Indret</a>, une fonderie de > canons</li>C'est-y pas mieux ? Et pour google, pages plus légères égal > meilleur poids des mots du contenu donc meilleur référencement.-- > Leonickhttp://gege-en-vadrouille.champignytriathlon.org la route de la
soie
> en 11 000 km de vélo
tiens, où sont passés les retours chariots de ton message ? :)
Déjà renvoyé, mais il n'a pas été à l'endroit escompté. Voila le texte en plus clair.
L'utilisation des CSS permettrait de transformer <table>...<tr><td width="15%" valign="top" height="39" align="right"> <img border="0" src="images/main.gif" width="24" height="19" alt=""></td> <td class="texte2" width="85%" valign="top" height="39"> <a href="page45.html">Indret</a>, une fonderie de canons</td></tr>...</table>
en ul.unemain { list-style : url("images/main.gif"); } puis <ul class="unemain"><li><a href="page45.html">Indret</a>, une fonderie de canons</li> C'est-y pas mieux ? Et pour google, pages plus légères égal meilleur poids des mots du contenu donc meilleur référencement. -- Leonick http://gege-en-vadrouille.champignytriathlon.org la route de la soie en 11 000 km de vélo
"Thibaut Allender" <use_contact_form_on_website@n.o.s.p.a.m.capsule.org> a
écrit dans le message de news: db5a32-dg4.ln1@Pilaf.capsule.corp...
On 5/10/2004 11:07, Leonick wrote :
> L'utilisation des CSS permettrait de transformer
> <table>...<tr><td width="15%" valign="top" height="39"
align="right"><img
> border="0" src="images/main.gif" width="24" height="19" alt=""></td>
> <td class="texte2" width="85%" valign="top" height="39"><a
> href="page45.html">Indret</a>, une fonderie de
canons</td></tr>...</table>en
> ul.unemain { list-style : url("images/main.gif"); }puis<ul
> class="unemain"><li><a href="page45.html">Indret</a>, une fonderie de
> canons</li>C'est-y pas mieux ? Et pour google, pages plus légères égal
> meilleur poids des mots du contenu donc meilleur référencement.--
> Leonickhttp://gege-en-vadrouille.champignytriathlon.org la route de la
soie
> en 11 000 km de vélo
tiens, où sont passés les retours chariots de ton message ? :)
Déjà renvoyé, mais il n'a pas été à l'endroit escompté.
Voila le texte en plus clair.
L'utilisation des CSS permettrait de transformer
<table>...<tr><td width="15%" valign="top" height="39" align="right">
<img border="0" src="images/main.gif" width="24" height="19" alt=""></td>
<td class="texte2" width="85%" valign="top" height="39">
<a href="page45.html">Indret</a>, une fonderie de
canons</td></tr>...</table>
en
ul.unemain { list-style : url("images/main.gif"); }
puis
<ul class="unemain"><li><a href="page45.html">Indret</a>, une fonderie de
canons</li>
C'est-y pas mieux ?
Et pour google, pages plus légères égal meilleur poids des mots du contenu
donc meilleur référencement.
--
Leonick
http://gege-en-vadrouille.champignytriathlon.org
la route de la soie en 11 000 km de vélo
"Thibaut Allender" a écrit dans le message de news:
On 5/10/2004 11:07, Leonick wrote : > L'utilisation des CSS permettrait de transformer > <table>...<tr><td width="15%" valign="top" height="39"
align="right"><img
> border="0" src="images/main.gif" width="24" height="19" alt=""></td> > <td class="texte2" width="85%" valign="top" height="39"><a > href="page45.html">Indret</a>, une fonderie de
canons</td></tr>...</table>en
> ul.unemain { list-style : url("images/main.gif"); }puis<ul > class="unemain"><li><a href="page45.html">Indret</a>, une fonderie de > canons</li>C'est-y pas mieux ? Et pour google, pages plus légères égal > meilleur poids des mots du contenu donc meilleur référencement.-- > Leonickhttp://gege-en-vadrouille.champignytriathlon.org la route de la
soie
> en 11 000 km de vélo
tiens, où sont passés les retours chariots de ton message ? :)
Déjà renvoyé, mais il n'a pas été à l'endroit escompté. Voila le texte en plus clair.
L'utilisation des CSS permettrait de transformer <table>...<tr><td width="15%" valign="top" height="39" align="right"> <img border="0" src="images/main.gif" width="24" height="19" alt=""></td> <td class="texte2" width="85%" valign="top" height="39"> <a href="page45.html">Indret</a>, une fonderie de canons</td></tr>...</table>
en ul.unemain { list-style : url("images/main.gif"); } puis <ul class="unemain"><li><a href="page45.html">Indret</a>, une fonderie de canons</li> C'est-y pas mieux ? Et pour google, pages plus légères égal meilleur poids des mots du contenu donc meilleur référencement. -- Leonick http://gege-en-vadrouille.champignytriathlon.org la route de la soie en 11 000 km de vélo
Hervé Cauwelier
Leonick a écrit :
Sinon, cela permet surtout de pouvoir faire un bien meilleur habillage de texte qu'avec des tableaux. par exemple sur la page http://www.champignytriathlon.org/periples/ventoux/ventoux-030810, chose qui n'était pas possible uniquement avec des tableaux.
Oui enfin ça on le faisait aussi sans CSS avec l'attribut align de img depuis les débuts de HTML ou presque. :-) C'est juste que maintenant il a sa place comme propriété CSS puisqu'il n'a aucune valeur sémantique.
-- Hervé Cauwelier
http://www.oursours.net/
Leonick a écrit :
Sinon, cela permet surtout de pouvoir faire un bien meilleur habillage de
texte qu'avec des tableaux. par exemple sur la page
http://www.champignytriathlon.org/periples/ventoux/ventoux-030810, chose qui
n'était pas possible uniquement avec des tableaux.
Oui enfin ça on le faisait aussi sans CSS avec l'attribut align de img
depuis les débuts de HTML ou presque. :-) C'est juste que maintenant il
a sa place comme propriété CSS puisqu'il n'a aucune valeur sémantique.
Sinon, cela permet surtout de pouvoir faire un bien meilleur habillage de texte qu'avec des tableaux. par exemple sur la page http://www.champignytriathlon.org/periples/ventoux/ventoux-030810, chose qui n'était pas possible uniquement avec des tableaux.
Oui enfin ça on le faisait aussi sans CSS avec l'attribut align de img depuis les débuts de HTML ou presque. :-) C'est juste que maintenant il a sa place comme propriété CSS puisqu'il n'a aucune valeur sémantique.
-- Hervé Cauwelier
http://www.oursours.net/
ASM
Sergio a ecrit :
Leonick a utilisé son clavier pour écrire :
>> Leonick a ecrit : >>> cela me permet d'afficher 3, 4 ou 5 images de front selon la résolution. >>> Alors qu'avec un tableau, il faudrait utiliser l'ascenseur horizontal.
>> Pas compris en quoi un tableau empeche d'afficher >> 5 images de front sans ascenseur >> essaie de mieux t'essspliquer ;-)
> Si j'ai 5 images de 200 px de large, cela me fait un tableau de plus de 1000 > px (avec les marges) et donc dans une fenêtre affichant 800 px de large, on > a un bel ascenceur horizontal. Alors qu'avec les <DIV> flottants, mes DIV ne > passant pas dans la largeur descendent sur la ligne du dessous et ils se > réorganisent automatiquement pour s'adapter à la largeur.
Ouais, là, justement. J'ai un problème :
oui ce pourrait être + compliqué en effet mais en fait pas du tout
exemple 3 photos/ligne redimensionnées automatiquement
>> Leonick a ecrit :
>>> cela me permet d'afficher 3, 4 ou 5 images de front selon la résolution.
>>> Alors qu'avec un tableau, il faudrait utiliser l'ascenseur horizontal.
>> Pas compris en quoi un tableau empeche d'afficher
>> 5 images de front sans ascenseur
>> essaie de mieux t'essspliquer ;-)
> Si j'ai 5 images de 200 px de large, cela me fait un tableau de plus de 1000
> px (avec les marges) et donc dans une fenêtre affichant 800 px de large, on
> a un bel ascenceur horizontal. Alors qu'avec les <DIV> flottants, mes DIV ne
> passant pas dans la largeur descendent sur la ligne du dessous et ils se
> réorganisent automatiquement pour s'adapter à la largeur.
Ouais, là, justement. J'ai un problème :
oui ce pourrait être + compliqué en effet
mais en fait pas du tout
exemple 3 photos/ligne redimensionnées automatiquement
>> Leonick a ecrit : >>> cela me permet d'afficher 3, 4 ou 5 images de front selon la résolution. >>> Alors qu'avec un tableau, il faudrait utiliser l'ascenseur horizontal.
>> Pas compris en quoi un tableau empeche d'afficher >> 5 images de front sans ascenseur >> essaie de mieux t'essspliquer ;-)
> Si j'ai 5 images de 200 px de large, cela me fait un tableau de plus de 1000 > px (avec les marges) et donc dans une fenêtre affichant 800 px de large, on > a un bel ascenceur horizontal. Alors qu'avec les <DIV> flottants, mes DIV ne > passant pas dans la largeur descendent sur la ligne du dessous et ils se > réorganisent automatiquement pour s'adapter à la largeur.
Ouais, là, justement. J'ai un problème :
oui ce pourrait être + compliqué en effet mais en fait pas du tout
exemple 3 photos/ligne redimensionnées automatiquement
