Je travaille sur la page d'accueil de mon site et j'aimerais connaitre
vos avis sur vos préférences.
Page actuelle :
Projet :
http://www.grenault.net/index2.htm
Je ne sais pas du tout en fait mais vous allez sans doute m'éclairer ?
PS : Ne surtout pas regarder le code (inextricable hybride html/ccc/
tables...)
Merci.
C'est déjà un avis ;-)
Les suggestions sont les bienvenues ;-)
> > Heu, tu n'aurais pas une 3e version ...
>
> C'est d�j� un avis ;-)
ouaip, parce qu'a part le changement de la couleur du fond, j'ai pas vu
de diff�rence ;-))
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
Bien vu !-)
Apparemment beaucoup n'aiment pas les sites sur fond noir alors j'ai
essayé autre chose. Je pense que le bandeau du haut choque. Un bandeau
gris peut être ? Je cherche des idées. Je ne suis pas graphiste et je
ne sais pas faire des trucs arrondis en haut à gauche comme c'est la
mode ?
Bien sur quand j'aurais la trame, je reprendrais le code pour virer
les tables qui trainent encore et le reste qui n'est pas vraiment
clean...
Que feriez-vous à ma place ?
J'aimerais du positif, des suggestions concrètes !
Merci.
> Que feriez-vous � ma place ?
>
- Commencer par virer ces deux gros pav�s bleus en haut...
- Retravailler le logo du site (le carr� jaune)
- Regrouper en sous liens ceux qui peuvent l'�tre
> J'aimerais du positif, des suggestions concr�tes !
�a suffit, ou t'en veut encore ;-))
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
Voilà ! Oui moi aussi le bandeau du haut ne me plaisait plus non plus.
Je m'y attelle demain.
Par contre ta 3ème remarque je ne vois pas trop ?
Merci pour ta réponse car elle conforte ce que j'entrevoyais. Ça c'est
une critique positive !!!!!
> Par contre ta 3�me remarque je ne vois pas trop ?
Ben, plutot que d'avoir un menu de trois kilometres de haut, tu peux pas
faire un sous menu avec par exemple en premier menu photo, puis en sous
menu cours photo et (autre sous menu) test apn, puis dans le meme groupe
de sous menu all photo ?
Je parle d'un menu d�roulant, hein ?
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
Bon, il faut que j'apprenne à les faire ces menus déroulants, c'est du
boulot ;-)
Un Grand merci !
Guy
Le 25/11/2009 17:03, kurtbosh a ï¿œcrit :
>
> Page actuelle :
>
> http://www.grenault.net/
>
> Projet :
>
> http://www.grenault.net/index2.htm
Juste pour le choix des couleurs, je prï¿œfï¿œre infiniment la nouvelle
version ᅵ l'actuelle.
Cela dit, il est trᅵs possible de proposer plusieurs styles ᅵ
l'utilisateur. Voici une page (en anglais, dᅵsolᅵ) sur le sujet :
<http://www.alistapart.com/articles/alternate/>.
--
Olivier Miakinen
Merci pour les avis !
Voici une troisième version :
http://www.grenault.net/index3.htm
?
Le 26/11/2009 11:17, kurtbosh a ï¿œcrit :
>>
>> > Page actuelle :
>> >http://www.grenault.net/
>>
>> > Projet :
>> >http://www.grenault.net/index2.htm
>
> Voici une troisiï¿œme version :
> http://www.grenault.net/index3.htm
J'ai une lᅵgᅵre prᅵfᅵrence pour la deuxiᅵme version (index2) mais ᅵ part
ᅵa je trouve les deux agrᅵables ᅵ regarder.
Une petite critique pour les trois versions : je ne vois pas bien ᅵ quoi
sert le lien ᅵ enregister dans les favoris ᅵ, mᅵme en supposant qu'il
puisse fonctionner sur un navigateur autre que le mien. Qui plus est, le
terme ᅵ favori ᅵ est vraiment mal choisi et troublera d'autant plus ceux
dont le navigateur appelle ᅵa par un terme plus adaptᅵ.
P.-S. : merci de ne pas laisser de choses inutiles dans la citation
quand tu rï¿œponds (formules de salutation et signature par exemple).
Cordialement,
--
Olivier Miakinen
J'ose un avis, très relatif bien sûr et proposant uniquement quelques
pistes de réflexion :
-c'est ma version préférée
-l'unité gagnerait sans doute avec un fond très légèrement gris (puisque
le n&b semble la dominante recherchée) et un bleu pour les liens un peu
plus sombre, la touche de couleur revenant alors aux photos
-la colonne de gauche serait plus aérée et plus équilibrée si elle
prenait la même largeur que celle de droite
-la typo du "logo" est trop importante en comparaison des tailles
retenues pour les autres textes. Pour remplir un peu le cadre, quelque
chose comme un fondu de photo (?) serait peut-être une solution.
Bon courage.
--
Michaël DENIS
Hello,
Je rᅵponds ᅵ grenaille.
(Heu ... ᅵ Renault ?)
> Le 26/11/2009 11:17, kurtbosh a ï¿œcrit :
>>>> Page actuelle :
>>>> http://www.grenault.net/
>>>> Projet :
>>>> http://www.grenault.net/index2.htm
>> Voici une troisiï¿œme version :
>> http://www.grenault.net/index3.htm
>
> J'ai une lᅵgᅵre prᅵfᅵrence pour la deuxiᅵme version (index2) mais ᅵ part
> ᅵa je trouve les deux agrᅵables ᅵ regarder.
Moi, perso, la 1 ï¿œtait trï¿œs bien.
Il suffit qu'il y ait une feuille de style pour imprimer en noir sur blanc.
Les variantes ne sont qu'une seule en N&B au lieu de B&N
Personnellement je n'aime pas les sites qui s'affichent sur toute la
largeur de la fenï¿œtre
(je veux dire : je n'aime pas que les lignes du contenu s'ï¿œtendent au
delᅵ de 700px ou je ne sais combien de lettres (90?) )
les variantes :
(2) le bandeau haut :
- l'image-logo-haut est beurk
- 3 pavï¿œs d'inï¿œgale hauteur
(1) le bandeau-haut n'apparait pas comme un bandeau
les trois pavï¿œs y sont moins gï¿œnants
(le logo est le mï¿œme beurk)
(3) ï¿œa devient trï¿œs "tristoune" ... !
Si tu veux t'orienter vers le "clean" ou l'ï¿œlï¿œgant
- supprimer tous les ᅵ-plats de fond
- supprimer les cadres des boutons-menu
Cᅵtᅵ "design" il faudrait peut-ᅵtre :
- faire un bandeau haut plus uniforme (comme en 3)
(rï¿œunir les 3 pavï¿œs en un seul)
- trouver qque chose pour le faire + joli (une image de fond ?)
- ï¿œventuellement re-styliser le menu
Bon ... vaguement essayᅵ de regarder les CSS ...
... c'est le bordel !
ᅵ mon idᅵe, ce n'est pas comme ᅵa qu'on stylise
(pas toute une chiï¿œe de classes pour bricoler individuellement)
(un peu comme si ᅵ chaque mot ᅵcrit il fallait lui faire sa rᅵgle)
Quand on voit que le bandeau-haut est un table
- qu'il a une classe
- que chacun de ses TD a aussi sa classe
- que le TD contient un div (celui-ci aussi avec sa classe !)
(pourquoi mettre/rajouter un div dans un td
qui est par lui-mᅵme dᅵjᅵ un conteneur, une boite ... ?)
- que le div contient des A (chacun avec sa classe)
Breffle, outre que ce table est chiant ᅵ modifier, d'avoir chaque
ï¿œlï¿œment avec sa classe personnelle ne peut que compliquer toute
tentative de changement de la mise en forme.
Tu n'es pas rendu lᅵ pour modifier l'apparence de ce site.
Comme Olivier, le truc "en favori" me pompe l'air.(*)
On voit ï¿œa souvent.
Outre que ï¿œa ne doit pas fonctionner chez moi,
merci je sais faire un marque-page
et les autres visiteurs aussi sans doute.
(*) Olivier est juste un peu moins "direct" que moi ;-)
--
sm
http://www.grenault.net/index4.htm
Merci pour vos avis.
Merci SAM !
J'ai osé une 4 :
http://www.grenault.net/index4.htm ?
???
4ème version :
http://www.grenault.net/index4.htm
???
C'est mieux, non ?
Moi je ne laisserais pas de blanc entre les pav�s principaux
Moi je ne centrerais pas GRenault
Moi je ne mettrais pas le truc favori
Voici qques id�es :
<http://stephane.moriaux.pagesperso-orange.fr/truc/Gnlt/
1) plus de blanc, carr�s dans bandeau-haut - Gris
2) et pourquoi pas le m�me comme �a
3) et un essai de cama�eu ? - bleu
4) ou un peu plus color� ?
5) et "classique" ... non ?
--
sm
Merci !!!!
J'ai osé une 6ème version, mais où s'arrêtera-il ?
http://www.grenault.net/index6.htm
Inspirée des tes propositions. J'en ai profité pour virer toutes les
tables, YENAPU !
Si elle est meilleure, il y aura encore quelques réglages à faire...
Guy
Pour le site d'un photographe, je trouve dommage d'avoir virᅵ les
photos...
Non, non, c'est ta fenï¿œtre qui n'est pas assez large ...
Y a un blï¿œme avec les CSS : quand on rï¿œtrï¿œcie (trop) la fenï¿œtre, la
colonne photos disparait ! ! ? ! :-(
--
sm
Comme essayer que les photos ne disparaissent pas lorsqu'on r�duit la
fen�tre
et un peu am�lirer les menus
et se demander si c'est "oblig�" de rappeler ces menus dans la case
haut-gauche
et ... virer ce truc favoris cr�nom !
Perso, je trouve mieux le titre comme ici :
<http://stephane.moriaux.pagesperso-orange.fr/truc/Gnlt/Images/gr_1_bis.jpg>
--
sm
kurtbosh a �crit :
> J'ai os� une 6�me version, mais o� s'arr�tera-il ?
>
Y a pas comme un d�calage quelque part ?
--
guy.s...@free.fr
http://paysderetz.free.fr
http://fonderie.indret.free.fr
Guy Gruais a �crit :
> Y a pas comme un d�calage quelque part ?
>
> http://cjoint.com/?lBqa3cUjnv
Excusez ma double r�ponse mais le serveur m'a r�pondu la premi�re fois
que mon adresse n'�tait pas valable alors que rien n'avait �t� chang�
Pas compris :-(
ᅵ propos d'adresse, ce n'est peut-ᅵtre pas la peine de faire une copie
par courriel de toutes tes rᅵponses ᅵ l'adresse de ton interlocuteur.
J'ose espᅵrer que Guy lit les rᅵponses ᅵ ses questions dans le groupe,
et ᅵa pourrait l'ᅵnerver de te rᅵpondre en privᅵ puis de se rendre
compte qu'il doit rï¿œpondre une nouvelle fois en public.
Jdï¿œjdr...
Oui, bon, tu as peut être raison. Je l'avais pourtant mis tout
petit ;-)
Mais ce n'est pas tout le site ce mot ? Rien à dire ou à suggérer pour
améliorer encore ?
Encore un coup des CSS sans tables, sur mon micro c'est OK. Chez toi
elles sont sans doute en dessous à droite ?
Ah toi aussi t'en veux pas de mes favoris. J'en ai eu du mal avec ce
script !!!
Bon, OK, je le vire ! Contents ?
Oui ta version du titre est sympa...
Guy
Les CSS toujours, grrr....
Comme d'hab, c'est SAM qui a raison : cela tient ᅵ la largeur des
fenï¿œtres. Je suppose qui si tu rï¿œduis un peu les fenï¿œtres toi aussi tu
auras le mï¿œme phï¿œnomï¿œne.
Dans SeaMonkey, seules les photos passent en dessous quand la fenï¿œtre a
une largeur que j'estime normale (et qui est sans doute trop ï¿œtroite
pour toi).
Dans Internet Explorer, selon les tailles de fenï¿œtre, il y a en plus la
case ᅵ bookmark ᅵ qui fait le yoyo. C'est trᅵs rigolo ᅵ voir (et ᅵ mon
avis pas facile ᅵ expliquer car cela saute vraiment sans arrᅵt).
> Encore un coup des CSS sans tables
Allez, sans aller voir le code je parie pour la chose suivante :
- un conteneur avec une largeur en pourcentage
- un contenu avec une largeur en taille fixe
- au moins un ᅵ float ᅵ (right, je suppose)
> Comme d'hab, c'est SAM qui a raison : cela tient à la largeur des
> fenêtres. Je suppose qui si tu réduis un peu les fenêtres toi aussi tu
> auras le même phénomène.
>
Oui et heureusement qu'il est là ! Il ne se contente pas de dire 'Il
faut en refaire un
autre", il explique pourquoi et donne même des suggestions ! Un grand
Merci donc !
> Allez, sans aller voir le code je parie pour la chose suivante :
> - un conteneur avec une largeur en pourcentage
> - un contenu avec une largeur en taille fixe
> - au moins un « float » (right, je suppose)
Beuh... non... ;-)
J'ai corrigé, dites-moi si ça va :
Ah, ben ma boule de cristal est toujours en panne, alors. Tant pis.
> J'ai corrigᅵ, dites-moi si ᅵa va :
>
> http://www.grenault.net/index6
Parfait pour SeaMonkey, mais aucun changement pour Internet Explorer.
Sans surprise, ï¿œa marche bien aussi dans Firefox.
> mais aucun changement pour Internet Explorer.
Ce n'est pas forcï¿œment une surprise non plus que IE ne rï¿œagisse pas
comme Firefox et SeaMonkey...
Je viens de vérifier, c'est bon pour :
Firefox
Chrome
Internet Explorer 8
Safari 4
Opera 10.0
Je n'ai pas les autres...
Guy
Non, �a va pas, m�me avec Fx
Il faut :
- les 2 colonnes lat�rales
- de largeur fixe
- de m�mes largeurs
- largeur un poil plus que les photos
(sauf � afficher les photos en width: 94%; par exemple
- les A du menu doivent �tre r�gl�s en largeur
proportionnellement � la colonne et non pas de largeur fixe
Voici ce que j'obtiens en petite fen�tre :
<http://cjoint.com/?lBtOtJqInQ>
--
sm
Tu es bon pour toutes les refaire (en simplifiant ! beaucoup !)
--
sm
Ah là, là, il voit tout notre ami SAM... Encore du boulot ! Je verrais
ça demain car
je viens de me faire arracher une dent... J'aimais bien moi tout en %,
la première
fois que je le tentais... Allez donc innover !-)
Les CSS ne sont pas encore triées ni simplifiées, là je suis
d'accord....
Bonne soirée.
Guy
> Firefox
> Opera 10.0
Le r�sultat n'est pas du tout le m�me dans Opera (derni�re version) et
FF (3.5.5)...
--
Pascale
> Le r�sultat n'est pas du tout le m�me dans Opera (derni�re version) et
> FF (3.5.5)...
Non, je viens de dire une b�tise. Mais l'ent�te qui s'�largit
automatiquement donne parfois un r�sultat un peu curieux.
--
Pascale
Oui, j'ai tout mis en %. C'est apparemment un erreur... de plus. C'est
comme cela qu'on apprend.
Guy
> Il faut :
> - les 2 colonnes latérales
> - de largeur fixe
> - de mêmes largeurs
> - largeur un poil plus que les photos
> (sauf à afficher les photos en width: 94%; par exemple
> - les A du menu doivent être réglés en largeur
> proportionnellement à la colonne et non pas de largeur fixe
>
> Voici ce que j'obtiens en petite fenêtre :
> <http://cjoint.com/?lBtOtJqInQ>
>
> --
> sm
J'ai fait ça : http://www.grenault.net/index5.htm
Le problème c'est que cela ne marche pas ! C'est bon en 1280x768 et
plus grand mais en dessous, c'est la cata !
Cela me prend la tête les CSS sautantes. Je crois que je vais
reprendre mes bonnes vieilles tatables...
> Oui, j'ai tout mis en %. C'est apparemment un erreur... de plus. C'est
> comme cela qu'on apprend.
J'ai tendance moi aussi � appr�cier un design flexible... mais dans ce cas,
il faudrait peut-�tre panacher un peu les deux, par exemple fixer la
largeur du pav� de gauche et laisser le reste en %�?
--
Pascale
> Le problï¿œme c'est que cela ne marche pas ! C'est bon en 1280x768 et
> plus grand mais en dessous, c'est la cata !
Pourquoi coder pour des fenï¿œtres d'une telle dimension ? C'est beaucoup
trop car malgrᅵ l'augmentation de taille des ᅵcrans, un grand nombre
sinon une majoritᅵ d'utilisateurs utilisent des fenᅵtres d'un maximum de
800 pixels de largeurs. 2 fenï¿œtres de cette taille peuvent ï¿œtre
affichᅵes cᅵte ᅵ cᅵte sur un 22 pouces et c'est parfait car cela permet
de faire du vrai multi-tï¿œches.
> Cela me prend la tï¿œte les CSS sautantes. Je crois que je vais
> reprendre mes bonnes vieilles tatables...
Aprï¿œs les annï¿œes de galï¿œre que tu nous fais subir, depuis le siï¿œcle
dernier ? :-)
Ce serait idiot car c'est un apprentissage qui ne demande pas beaucoup
d'efforts. Suis les conseils qu'on te donne et il n'y aura pas de problï¿œme.
Tiens, un petit exposᅵ pour t'aider dans la mise en page "ᅵlastique" :
http://docanski.free.fr/valastuc/fds23a.htm
Cordialement,
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallï¿œe de la Rance maritime : http://valderance.free.fr/
Les cï¿œtes du nord de la Bretagne : http://docarmor.free.fr/
J'ai tout essayé avec les colonnes de gauche et de droite fixes :
c'est IMPOSSIBLE !
Je reprends mes tables.
Bon dimanche.
Guy
Voilà la dernière version avec des tables :
http://www.grenault.net/index4_bis.htm
Vos avis ?
Merci.
Guy
C'est trï¿œs possible !
>> Je reprends mes tables.
Si tu prᅵfᅵres la facilitᅵ et le code crade, c'est ton choix ...
> Voilᅵ la derniᅵre version avec des tables :
>
> http://www.grenault.net/index4_bis.htm
>
> Vos avis ?
Beurk ! des div dans des tables ! ï¿œa n'a aucun sens !
Essaye :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>page d'accueil ᅵ 3 colonnes SANS TABLES</title>
</head>
<body style="background-color:#FFFBF5">
<div
style="max-width:100%;height:100px;margin-bottom:10px;background-color:#F5D5A6;text-align:center">
Ici le bandeau GRenault.net </div>
<div
style="width:16%;background-color:#ff8040;height:460px;float:left;margin-right:0">dans
cette colonne, tu mets tous tes liens<span
style="color:red;font-weight:bold"> et tu les centres !!!</span>, dans
cette colonne, tu mets tous tes liens, dans cette colonne, tu mets tous
tes liens, dans cette colonne, tu mets tous tes liens, dans cette
colonne, tu mets tous tes liens, dans cette colonne, tu mets tous tes
liens, dans cette colonne, tu mets tous tes liens</div>
<div
style="width:16%;background-color:#D0A15A;height:460px;float:right;margin-left:0">dans
cette colonne, tu mets tes photos et les liens qui vont avec<span
style="color:red;font-weight:bold"> et tu les centres !!!</span>, dans
cette colonne, tu mets tes photos et les liens qui vont avec, dans cette
colonne, tu mets tes photos et les liens qui vont avec, dans cette
colonne, tu mets tes photos et les liens qui vont avec, dans cette
colonne, tu mets tes photos et les liens qui vont avec</div>
<div
style="max-width:68%;background-color:#FFFBF5;margin-left:16%;margin-right:16%;padding-left:20px;padding-right:20px"><h1>Titre</h1>Ut
sed mauris vel metus pretium pretium. Curabitur tristique sem id justo.
Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu, cursus a,
posuere sed, sollicitudin in, justo. Pellentesque enim lacus, egestas
ut, elementum eu, molestie vel, urna. Integer quam. Phasellus tempor.
Sed commodo porttitor justo. Vestibulum rhoncus lacinia pede. Aliquam
lectus velit, auctor a, fermentum a, accumsan et, neque.Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut nonummy
vestibulum arcu. Nulla eros eros, mattis et, dictum quis, convallis vel,
mauris. Ut sed mauris vel metus pretium pretium. Curabitur tristique sem
id justo. Nunc sit amet felis. Curabitur tristique sem id justo. Nunc
sit amet felis. Duis luctus pharetra urna. Sed enim arcu, cursus a,
posuere sed, sollicitudin in, justo. Pellentesque enim lacus, egestas
ut, elementum eu, molestie vel, urna. Integer quam. Phasellus tempor.
Sed commodo porttitor justo. Pellentesque enim lacus, egestas ut,
elementum eu, molestie vel, urna. Integer quam. Phasellus tempor. Sed
commodo porttitor justo. </div>
</body></html>
Il te suffit de rï¿œgler en fonction de la largeur de tes photos et de ton
menu. J'ignore ce que ï¿œa donne sous IE mais ï¿œa devrait passer.
> Merci.
Yapadkoi. (et oublie les tables !!!)
Merci, c'est très gentil. Je reprendrais cette page avec tes conseils
mais pour l'instant elle semble donner exactement ce que je voulais
conformément à ce qui a été suggéré ici et ce sur tous les navigateurs
et à toute les résolutions et en plus en HTML 4.01 Strict sans erreur
détectée par le W3C. Si toutes les pages trouvées sur internet étaient
déjà comme ça...
C'est en fait du CSS pur et dur aidé par les tables pour palier aux
insuffisances des CSS... Peut être avec le HTML 5 aura-t-on quelque
chose de fiable ? Je ne trouve pas que les tables soient plus
compliquées... Elles sont même valides en XHTML...
Guy
> Merci, c'est tr�s gentil. Je reprendrais cette page avec tes conseils
> mais pour l'instant elle semble donner exactement ce que je voulais
> conform�ment � ce qui a �t� sugg�r� ici et ce sur tous les navigateurs
> et � toute les r�solutions
On a beau te donner des conseils, on a l'impression que tu as d�cid� de
faire comme tu veux...
D'autre part, encore une fois, pourrais-tu virer les signatures quand tu
r�ponds ?
Et puis, toutes les r�solutions...
On est en 2009, c'est plus trop un probl�me les diff�rentes r�solutions,
hein ;-)
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
Oui, un peu têtu, j'ai déjà entendu ça ;-)
J'ai vraiment essayé jusqu'à faire des mini pages avec juste les
parties qui ne marchaient pas, donc un code très réduit : rien à
faire ! Du déboguage, en fait, mais je n'ai pas réussi... J'y ai passé
une partie du weekend (avec un mal de dent !) pour rien. Avec les
tables je n'y ai pas passé plus de 15 mn...
> Merci, c'est trï¿œs gentil. Je reprendrais cette page avec tes conseils
On se demande pourquoi on tente de t'aider :-(
> mais pour l'instant elle semble donner exactement ce que je voulais
Mais c'est une horreur sans nom, ta page, mï¿œme si en surface c'est joli
! Les contributeurs de ce groupe tentent de te faire comprendre comment
te servir des CSS et tu continues dans tes mauvaises habitudes. On se
demande, dans ces conditions, pourquoi tu demandes de l'aide !
> C'est en fait du CSS pur et dur aidᅵ par les tables pour palier aux
> insuffisances des CSS...
Pour ce que tu veux faire, les CCS n'ont aucune insuffisance, il suffit
de s'en servir correctement.
> Je ne trouve pas que les tables soient plus
> compliquï¿œes...
Forcᅵment : c'est la solution de facilitᅵ mais qui n'a aucune valeur
sï¿œmantique dans ton projet et qui alourdit inutilement ton code.
> Elles sont mï¿œme valides en XHTML...
Ce qui ne signifie pas pour autant que tu utilises les bons outils.
PS : le plus con c'est que tu n'essayes mï¿œme pas ce que je te propose
qui est une solution *clef en main* ! :-( Il te suffit d'enjoliver ᅵ ta
sauce ᅵ partir de cette base pour crᅵer une page *propre* !
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallï¿œe de la Rance maritime : http://valderance.free.fr/
Les cï¿œtes du nord de la Bretagne : http://docarmor.free.fr/
> PS : le plus con c'est que tu n'essayes même pas ce que je te propose
> qui est une solution *clef en main* ! :-( Il te suffit d'enjoliver à ta
> sauce à partir de cette base pour créer une page *propre* !
> --
> docanski
Si, j'ai dit que j'allais le faire avec ta solution ! Mais un peu plus
tard car maintenant je ne vais plus avoir trop de temps disponible
pour ça. J'ai perdu trop de temps avec les CSS. Mais j'y arriverais.
Têtu mais tenace !!!!
Bien sur si je peux y arriver sans tables alors je serais très
content ! J'avoue avoir été découragé cette fin de weekend et c'est
pourquoi je me suis rabattu sur ce que je connaissais bien !-)
Ne croyais pas que je ne vous écoute pas !
Merci à tous.
Guy
> > D'autre part, encore une fois, pourrais-tu virer les signatures quand tu
> > r�ponds ?
> > --
> > Alex
> > Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
> > �a serait pas des fois de la betterave, hein ?
>
> Oui, un peu t�tu, j'ai d�j� entendu �a ;-)
J'y crois pas.
Fini pour moi.
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
Moi, je l'aurais pariᅵ. C'est dᅵprimant, mais il n'est hᅵlas pas le seul.
> Fini pour moi.
Comme je te comprends.
--
Olivier Miakinen
Je commence à reprendre le site sur la trame de docanski : cette trame
marche impeccable !
Un GRAND merci !
Mais maintenant, cela va me coûter combien pour l'utiliser ?
Guy
> >> Oui, un peu t�tu, j'ai d�j� entendu �a ;-)
> >
> > J'y crois pas.
>
> Moi, je l'aurais pari�. C'est d�primant, mais il n'est h�las pas le seul.
Pourtant, Dieu sait qu'on lui as parl� gentiment, hein ;-)
>
> > Fini pour moi.
>
> Comme je te comprends.
;-)
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
http://www.grenault.net/photos/aquascene82.htm
Là je ne sais pas comment faire. Faut-il découper l'image de la
largeur du bandeau ? Cela ne risque-t-il pas de bloquer le
redimensionnement dans le sens de diminution ?
Merci.
Pas trop mal,
peut mieux faire ;-)
(r�gler les contenus de droite et gauche proportionnellement � leurs
conteneurs)
Pour reprendre ce qu'avait dit docansky
Le 11/29/09 7:58 PM, docanski a �crit :
>
> PS : le plus con c'est que tu n'essayes m�me pas ce que je te propose
> qui est une solution *clef en main* ! :-( Il te suffit d'enjoliver �
> ta sauce � partir de cette base pour cr�er une page *propre* !
Moi, je l'ai essay�e, tout n'a donc pas �t� vain ;-)
Le b�mol :
- le contenu n'arrive qu'apr�s tout le reste
(menus droite et gauche et surtout le xiti ! passent avant)
- donc, c�t� accessibilit� ou seulement sans css, ce n'est pas top
- pour l'heure il y a plein de vides entre les pav�s
- les colonnes sont de hauteurs variables
(r�gl�es par leurs contenus s'ils d�passent)
- pas tr�s certain que la largeur �lastique de droite et gauche
soit une bonne id�e
Il est certain qu'avec un table de 2 rang�es de 3 cellules on est assur�
d'avoir au final les 6 pav�s qui vont s'harmoniser � l'affichage.
Bon! c�t� accessibilit� ... ce n'est toujours pas �a et m�me c'est pire.
Breffle ... voici, et un peu inspir� du code propos� :
<http://cjoint.com/data/lEnpH6BbqM_gr_dock_sam.htm>
qui ne fonctionne pas trop mal avec IE7 et Fx.3
qui est b�quill� tant bien que mal pour IE <7
qui, sans css (mode texte ou vocalisateur), affiche proprement.
Bon ... pas r�ussi � me passer de positionnements en absolute :-/
C'est mieux, plus clean, si le contenu est important.
--
sm
Il faut :
- couper la hauteur dont tu as besoin dans cette photo
pour remplir la hauteur du bandeau
- l'�claircir (pour qu'on arrive � lire le titre)
- la positionner :
#bandeau {
background:url(logo.jpg) no-repeat left center #ddd;
}
ou (pour laisser la place au carr� de gauche) :
#bandeau {
background:url(logo.jpg) no-repeat 160px center #ddd;
}
<http://www.yoyodesign.org/doc/w3c/css2/colors.html#q2>
<http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-position>
--
sm
Et maintenant ?
http://www.grenault.net/index0.htm
Merci.
Guy
ben non, regarde toi-m�me en r�tr�cissant la largeur de fen�tre.
--
sm
Ben oui, je sais mais je n'y arrive pas. Je vais voir comment tu
fais...
Ca marche bien avec mes tables : http://www.grenault.net/index4_bis.htm
?
Presque presque
Les colonnes lat�rales ne s'allongent pas sur toute la hauteur
Quand on pousse le r�tr�cissement la col centrale chevauche celle de droite
--
sm
> > Ca marche bien avec mes tables :http://www.grenault.net/index4_bis.htm
> > ?
>
> Presque presque
>
> Les colonnes latérales ne s'allongent pas sur toute la hauteur
> Quand on pousse le rétrécissement la col centrale chevauche celle de droite
>
> --
> sm
Maintenant si !
Pour moi ça semble bon maintenant (en surface) ?
Merci.
kurtbosh a �crit :
> Maintenant si !
>
> Pour moi �a semble bon maintenant (en surface) ?
>
> Merci.
Encore un l�ger d�centrage du panneau sup�rieur.
Rendu en 530px de large (IE7)
Et en 1650
Cordialement.
guy.s...@free.fr
http://paysderetz.free.fr
http://fonderie.indret.free.fr
Oui, effectivement avec IE8 aussi. Cela ne le fait pas avec Firefox,
Chrome, Safari4. Un petit peu avec Opera.
Merci pour l'info, je vais corriger.
Guy
Voilà, c'est corrigé.
Guy
On va encore dire que je suis d�sagr�able :-(
Rha la la ! La la !
... Rhaa ! La la ! ... y arrivera t-on un jour ?
Pour les commentaires c'est : <!-- et --> et non pas //-->
(et les scripts JS n'en ont pas besoin )
Qu'est-ce que tu peux �tre tordu !
Rien que pour les tables (que tu soit-disant connais)
pourquoi utiliser *2* tables pour disposer 6 pav�s ?
Pav�s qui, de plus, doivent avoir des r�glages identiques pour :
- la rang�e du haut
- la rang�e inf�rieure
et aussi dans chaque rang�e, leurs 3 cellules gauche, centre, droite.
Ou bien est-ce que tu es f�ch� f�ch� avec les maths ?
(la g�om�trie, le raisonnement)
<table>
<tr pour le bandeau> <-- hauteur de la rang�e
<td gauche> <-- largeur gauche et couleur de fond
<td centre> <-- largeur automatique + fond
<td droite> <-- largeur droite et couleur fond pav� haut-droit
<tr pour le corps> <-- hauteur totomatick
<td gauche> <-- fond colonne gauche (la largeur a �t� vue + haut)
<td centre> <-- fond du contenu
<td droite> <-- fond colonne de droite
</table>
Pourquoi utiliser en vain autant de DIVs ?
Tandis que le HTML te propose plein d'autres balises bien souvent plus
appropri�es, comme H3, H4 ou le simple P ...
Cet esprit complicationn� � souhait nous scribouille alors des :
<td class="truc">
<div class="machin">
<p class="chose">
<a class="chouette" ...
Tout �a pour mettre un simple lien ! ! !
Alors que :
<td class="menu">
<a blabla
est amplement suffisant.
Proposition :
=============
<http://cjoint.com/data/mbetFm0hJz_index4_bis_sam.html>
--
sm
En net progr�s ;-)
Pas regard� de pr�s le HTML (qui me semble �gal � lui-m�me).
Pass� rapidement sur les CSS...
Et toujours *2* tables ! ?
Une question:
� quoi servent les :
.tbandeau-videg {width: 0%; padding: 0px}
.tbandeau-vided {width: 0.2%; padding: 0px}
--
sm
Euh... Ils ont été utiles à un moment... Puis au fur et à mesure des
réglages avec IE7, tordu comme il est... Ya pas que moi !-) A virer
certainement ;-)
Je reprendrais bien sur sur la base de la index4_ter.htm qui me plait
bien en fait. Maintenant que j'ai une base de présentation, les CSS
n'auront qu'a bien se tenir !!!! J'y arriverais, peut être...
Merci.
Guy
Il n'y a pas moyen que tu expliques � gMail (ou � ton navigateur ?)
que les lettres accentu�es existent ?
Il ne me semble pas avoir ce pb avec mon cpte gMail (bon, moi j'utilise
Thunderbird pour ce cpte).
--
sm
Pour supprimer les blancs entre pav�s :
table { border-collapse: collapse; }
td { border-width: 0; padding: 0; }
Pour aussi supprimer les valign=top dans les td
et autres attributs pas tr�s utiles,
la m�me chose que ci-dessus un poil + complet :
table { border-collapse: collapse; width: 90%; margin-left: 5%;}
td { position: relative; vertical-align: top;
border-width: 0; padding: 0; }
Je ne te l'ai pas donn�e cette url ?
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
--
sm
> Il n'y a pas moyen que tu expliques à gMail (ou à ton navigateur ?)
> que les lettres accentuées existent ?
>
> Il ne me semble pas avoir ce pb avec mon cpte gMail (bon, moi j'utilise
> Thunderbird pour ce cpte).
>
> --
> sm
Je n'ai aucun problème avec les accents moi quand je vois ce que j'ai
posté, ils y sont bien. Par contre je ne vois pas les tiens, ils sont
remplacés par des blancs ?
Sans doute à cause de la configuration en US sur un autre micro...
Guy
> Pour supprimer les blancs entre pav s :
>
> table { border-collapse: collapse; }
> td { border-width: 0; padding: 0; }
>
> Pour aussi supprimer les valign=top dans les td
> et autres attributs pas tr s utiles,
> la m me chose que ci-dessus un poil + complet :
>
> table { border-collapse: collapse; width: 90%; margin-left: 5%;}
> td { position: relative; vertical-align: top;
> border-width: 0; padding: 0; }
>
> Je ne te l'ai pas donn e cette url ?
> <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
>
> --
> sm
Ben non. Je ne savais pas supprimer ces espaces inutiles. Merci, que
ferions-nous sans toi ! Bon on se fait engueuler de temps en temps...
Mais on apprend et ça cela vaut de l'or !
Bonne soirée.
Guy
�a �a colle/confond les bords de la table avec ceux de ses cellules.
>> td { border-width: 0; padding: 0; }
L� il faut peut-�tre aussi s'int�resser au cell-spacing.
> Ben non. Je ne savais pas supprimer ces espaces inutiles. Merci, que
> ferions-nous sans toi !
Bon! je n'ai pas la science infuse, loin de l� !
Et il vaut mieux toujours tout v�rifier de ce que j'affirme !
C'est ici :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#borders>
en profiter pour lire toute la page :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html>
toi qui adores les tables tu vas certainement en apprendre ;-)
(sous ses abords simples c'est en fait tr�s complexe ce table)
> Bon on se fait engueuler de temps en temps...
Ha ? pas par moi ! Jamais !!
--
sm
Voilà, c'est fait ! Cela change tout. On dirait du CSS !-)))
Merci encore.
On peut voter : http://www.grenault.net/sondages.htm
Guy (fier de sa belle page ;-)
http://www.grenault.net/index4_ter.htm
Tu vas dire que je suis ch...t mais ... ce n'est pas fini :
- les colonnes lat�rales ne s'allongent pas quand
celle du milieu se remplit.
- il reste des </p> �gar�s
lignes 156, 158, 174, 176
Apr�s ... les gouts et les couleurs ... �a s'harmonise pas trop mal.
Peut-�tre laisser tomber le bleu pour le G de GRenault.net ?
De ttes fa�ons, moi, le gris m'allait tr�s bien ;-)
Du c�t� html/css tu pourras bient�t �conomiser, comme ici par exemple :
<td class="colonne-menu2">
<a class="menu"
La classe 'menu' n'a pas lieu d'encombrer tous les A de cette cellule.
--
sm
> Je n'ai aucun probl�me avec les accents moi quand je vois ce que j'ai
> post�, ils y sont bien. Par contre je ne vois pas les tiens, ils sont
> remplac�s par des blancs ?
Pour ma part, je vois tr�s bien tes accents et ceux de SAM (-:
--
Pascale
Version améliorée en ligne toujours index4_ter.htm...
Pour SAM : je n'arrive pas à faire grandir les colonnes de gauche et
de droite lors d'une diminution de la largeur de la page alors j'ai
triché : limité le rétrecissement à 800 pix. Cela me parait tout à
fait raisonnable car qui utilise une résolution de moins de 800x600 ?
Reste encore un petit réglage à faire car j'ai modifié une photo du
bandeau.
Merci à toutes et à tous.
Le sondage semble confirmer l'amélioration : http://www.grenault.net/index4_ter.htm
(malgré un certain incorruptible...)
Guy
Chuis sympa, j'ai vot�.
Je dis que je suis sympa parce que j'attends toujours une version qui
soit jolie ;)
T'es marrant toi, je fais ce que je peux moi, je rame !-)
Merci pour le vote.
Toutes les propositions sont les bienvenues...
Guy
Tu n'as qu'� faire un peu de m�nage et :
- supprimer tout ce qui ne sert pas dans tes css
- mettre la couleur de fond au TD (au lieu de je ne sais quel div)
- supprimer tous les conteneurs inutiles dans le html
Dans un premier temps tu supprimes de tes css : height: 530px;
(pourquoi chercher � limiter la hauteur ?)
Dans un 2i�me temps je te laisse mettre les couleurs de fond aux bons
endroits ( pas dans le div dans le td, mais dans le td )
Qu'au moins, si tu te sers de tables autant les utiliser pour ce
qu'elles savent faire.
C'est d'ailleurs le seul int�r�t d'utiliser un table dans ton cas :
toutes les colonnes d'une m�me rang�e s'allongent en hauteur en fonction
de la plus haute
> trich� : limit� le r�trecissement � 800 pix. Cela me parait tout �
> fait raisonnable car qui utilise une r�solution de moins de 800x600 ?
de toutes fa�ons si tu viens � mettre une image dans le td blanc et
qu'elle soit trop large pour y entrer, et malgr� ta "limitation", le
table va s'�largir en fonction.
> Reste encore un petit r�glage � faire car j'ai modifi� une photo du
> bandeau.
Et ?
Quel est le bl�me ?
Nota:
Au lieu de mettre un truc du genre :
<p class="inter-colonne"></p>
r�gler la css du TD ( .colonne-menu2{margin-top:10px;} )
> Le sondage semble confirmer l'am�lioration : http://www.grenault.net/index4_ter.htm
Ben quand m�me !
Le 3 est sensiblement plus beau, non ?
On n'aura pas su� sang et eau pour rien !
(bon ... la prochaine fois tu vires les tables, hein ?)
> (malgr� un certain incorruptible...)
En tous cas ce n'est pas moi.
--
sm
Ha! toi aussi tu pr�f�res celle l� :
<http://www.grenault.net/sondages.htm> ?
--
sm
Ah tu ne l'as pas vu ;-)
Quand on rétrécit la page il y a un décalage de 2 pixels entre le
bandeau (à droite) et le reste de la page. Dû à un élargissement de la
photo du haut à gauche (le coquelicot). Cela ne doit pas donc être
trop grave ;-)
Guy
> >> Euh... Le sondage c'est ici : http://www.grenault.net/sondages.htm
> >
> > Chuis sympa, j'ai vot�.
> > Je dis que je suis sympa parce que j'attends toujours une version qui
> > soit jolie ;)
>
> Ha! toi aussi tu pr�f�res celle l� :
> <http://www.grenault.net/sondages.htm> ?
D'ailleurs, premi�re c'et 1re
Deuxi�me c'est 2e et troisi�me c'est 3e
au cas ou �a pourrai servir... (entre autres)
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
�a serait pas des fois de la betterave, hein ?
> Tu n'as qu'ᅵ faire un peu de mᅵnage et :
> ...
> Dans un premier temps tu supprimes de tes css :
Tu supprimes *tout* ... et tu recommences ᅵ zᅵro car les surcouches
successives apportᅵes ᅵ cette "feuille de style" sont parfaitement
indigestes.
Recommencer ᅵ zᅵro serait d'une part une garantie de nettoyage des
bidouillages inutiles mais surtout un *excellent ecolage* permettant de
*comprendre* enfin le cheminement d'une ï¿œcriture structurï¿œe.
Car c'est bien lᅵ que le bᅵt blesse : il y a, dans cette affaire et de
la part de celui qui demande de l'aide, une incomprï¿œhension presque
totale de ce qu'il fait. Il navigue au jugᅵ mais ne tient pas la barre
> On n'aura pas suᅵ sang et eau pour rien !
Mmmmmmmmmh ....
> (bon ... la prochaine fois tu vires les tables, hein ?)
Tu y crois encore, au Pï¿œre Noel ? :-)
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallï¿œe de la Rance maritime : http://valderance.free.fr/
Les cï¿œtes du nord de la Bretagne : http://docarmor.free.fr/
Dans une page HTML, c'est mï¿œme 1<sup>re</sup>, 2<sup>e</sup> et
3<sup>e</sup> respectivement.
> au cas ou ï¿œa pourrait servir... (entre autres)
Idem.
--
Olivier Miakinen
oui.
ce qui nous met un souk infernal dans les espacements de lignes.
premi�re, deuxi�me, troisi�me c'est bien aussi...
--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|\_ =="
sup { font-size: .5em; line-height: 1em; }
M�me si le line-height arrange un poil,
cette r�gle ne r�sout rien, le font-size est ignor�
test : Fx.3
--
sm
http://www.grenault.net/index4_ter.htm
Avec des tables pour l'instant et un code très épuré... Ça coule tout
seul... Toujours 0 erreurs détectées par le W3C en Strict, oui
Monsieur...
Savez-vous que 88% des sites indexés par Google sont pourris
d'erreurs ?
Merci pour, vos aides et vos suggestions.
La version CSS sera un plus tard.
Guy
Je n'irais pas jusqu'� dire �a ... !
avec ce :
<span class="ini">G</span>
qui traine encore
et ces class="menu" inutiles
et bien d'autres.
> �a coule tout seul...
> Toujours 0 erreurs d�tect�es par le W3C en Strict, oui Monsieur...
Le Validator est b�te, il ne v�rifie que la syntaxe, pas l'intelligence
apport�e au code (�conomie de conteneurs, types de conteneurs
appropri�s, etc ...).
M'enfin ...
cette fois les couleurs de fond ont l'air d'�tre sur les bon �l�ments.
�a avance, �a avance ;-)
Curieux qu'avec un charset utf-8 on ait encore des tas de é
alors qu'un � ferait l'affaire.
(et qu'il le ferait tout autant en ISO-8859-1)
> Savez-vous que 88% des sites index�s par Google sont pourris
> d'erreurs ?
Boudiou ! que �a ?
> La version CSS sera un plus tard.
Tu es attendu de pied ferme ;-)
--
sm
Tu es exigeant, toi !-)
C'est comme cela qu'on apprend...
Bon, je suis d'accord avec toi : un code propre est plus valorisant
pour soi même (même s'il n'y a aucune différence à l'écran pour les
utilisateurs et que les validateurs ne voient rien non plus). Je
connais assez bien le problème car je suis développeur SQL (c'est mon
boulot) et que j'ai aussi jadis écrit des sharewares (en VB) qui se
sont très bien vendus...C'est certainement aussi la raison qui me fait
privilégier l'efficacité pratique au plaisir du geste... Tu sais dans
la pratique on doit être rapide et efficace. Alors si la requête est
optimisée et remonte les résultats demandés (qui sont toujours urgents
et vitaux), alors tout va bien, pas le temps de fignoler... Ce qui
compte c'est la fiabilité des résultats, rien d'autre n'a
d'importance ! Ceci explique sans doute ma façon de traiter mon
site... Le résultat avant tout !
Bonne soirée.
Guy