3246 sujets

Critiques de vos sites: code et design

Votre avis sur mon site perso http://quentinc.net/

Pages :
(reprise du message précédent)

a écrit :

pour ton div #contenu, pourquoi as-tu mis en commentaire le padding-left ?
Je trouve que c'est beaucoup plus agréable visuellement avec le padding à gauche, sinon tes textes du contenu sont collés au menu

Si je me rappelle bien, quelqu'un m'avait dit de le supprimer car le contenu était rejeté sous le menu.
Je vais le remettre en le diminuant.

EDIT : Voilà, c'est fait, j'ai mis 8px. Est-ce trop ?
Modifié par QuentinC (09 Jun 2006 - 15:48)
Biscotte a écrit :

Bonjour Quentin
Ca m'épate de voir ce que tu sais faire. Moi j'ai 2 yeux qui marchent mais je me fais aider pour les CSS alors je m'incline devant ton travail. Tu m'apprends qu'il y a peut être une 10è planète dans notre système solaire, et j'ai bien ri en lisant ta blague sur les informaticiens

Deux informaticiens discutent d'une nouvelle année qui commence:
- Quelle résolution tu as prise pour cette année ?
- 800 x 600, et toi ?

Bonne route et bravo.


Smiley smile La même , chapo !
QuentinC a écrit :

pour ton div #contenu, pourquoi as-tu mis en commentaire le padding-left ?
Je trouve que c'est beaucoup plus agréable visuellement avec le padding à gauche, sinon tes textes du contenu sont collés au menu

Si je me rappelle bien, quelqu'un m'avait dit de le supprimer car le contenu était rejeté sous le menu.
Je vais le remettre en le diminuant.

EDIT : Voilà, c'est fait, j'ai mis 8px. Est-ce trop ?

non mais sous firefox ca colle toujours,
sous opéra moins, mais c'est moins séparé que sous ie.
st-antigone a écrit :

non mais sous firefox ca colle toujours,
sous opéra moins, mais c'est moins séparé que sous ie.


Rahahah, il est compliqué le renard de feu ... une suggestion pour corriger le problème ? parce que là je n'ai aucune idée quoi faire.
Merci pour vos conseils.
Tu as de bonnes idées je trouve. Je parle là du script de vérification de formulaires en JavaScript, mais aussi de la façon pour contourner l'absence de l'URL rewriting. Je vais d'ailleurs l'utiliser dans la prochaine version de mon site (en cours de développement).

Si tu veux une idée de projet que j'ai eue (mais il me manque le temps et le courage) : faire en PHP un générateur automatique de formulaires xHTML à partir d'une base de données (éléments du formulaire en fonction du type des données dans la base et des contraintes d'intégrité référentielles, champs obligatoires si "NOT NULL"... etc.). En voyant encore plus grand, on pourrait faire un générateur de tables dans une base de données, associées à des formulaires, vérifiés et tout ! Smiley murf

J'avais vu juste (voir le deuxième message de ce sujet), tu es promis à un bel avenir dans l'informatique. Je dis ça car je suis en passe de valider un BAC+3 dans ce domaine, et c'est toi qui me donne des conseils à travers ton site.

Félicitation et bonne continuation.
Modifié par 84mickael (10 Jun 2006 - 18:18)
QuentinC a écrit :
Rahahah, il est compliqué le renard de feu ... une suggestion pour corriger le problème ? parce que là je n'ai aucune idée quoi faire.
Merci pour vos conseils.

Tout ça c'est des histoires que l'on se crée quand on utilise des blocs avec des largeurs en pourcentages, et qu'on leur rajoute des padding, margin ou border avec des mesures en pixels, em, enfin n'importe quoi qui ne prendra pas la même largeur de base pour référence. Du coup, Si tu définis 20% et 78%, ça passera en grande résolution car 2% de la largeur totale sera supérieur au surplus créé par les margin, padding et autres border. Par contre, en 800×600 ça ne passera pas.

Les valeurs que je donne sont fictives, j'ai pas regardé à nouveau le code.

Au fait, je crois que c'étais moi qui t'avais donné quelques conseils il y a quelques mois. Je t'avais même donné un code complet, mais ça n'avait pas dû t'intéresser plus que ça finalement vu que tu ne l'avais pas gardé. Il faut dire que j'utilisais les em pour fixer la largeur du menu (ainsi que toutes les autres mesures qui interfèrent dans le sens de la largeur de la page).

Une autre solution consisterait à utiliser deux blocs conteneurs pour le menu et la zone de contenu, chacun n'ayant qu'une largeur et des propriétés de positionnement. Ce n'est qu'ensuite que l'on place, à l'intérieur, des blocs sans largeur fixe, qui pourront prendre tous les border, margin et padding que l'on voudra.

Troisième solution : mettre un écart assez grand en pourcentage (genre 8%) pour avoir de la marge. On aura un écart proportionnellement plus grand avec une grande résolution qu'avec une petite, mais bon…

Sinon, il me semble que dans CSS3 il y a une propriété pour passer un bloc en modèle de boîte. Ça s'appelle box-sizing, mais je ne sais pas si on en verra la couleur un jour. Il me semble que Gecko a un -moz-box-sizing, et que Safari/WebKit a quelque chose aussi. À voir. Mais pas exploitable actuellement.

Enfin, dernière solution : même sans bloc conteneurs supplémentaires, se débrouiller pour éviter de donner des largeurs fixes aux blocs. Des fois ça n'est pas si dur, en jouant avec les margin.
clb56 a écrit :
C'est à cette adresse :
http://clb56.freezee.org/fluide_et_padding/

Très bon, à bookmarker !

Quelques observations :
– Quelques titres pour découper cette page en plusieurs sections logiques ne seraient pas du luxe.
– Le texte « On peut également contourner le problème en déduisant la largeur du conteneur au lieu de l'appliquer directement » ne m'a pas semblé très clair. Heureusement que je connaissais la méthode, sinon j'aurais été perdu. D'ailleurs, c'est l'exemple qui m'a fait comprendre le sens de la phrase. Il manque sans doute une formulation moins technique… et le rappel de la propriété des éléments de type bloc à prendre toute la largeur disponible quand on ne leur attribue pas de largeur fixe.
– Pour la solution que tu utilises à la fin pour donner une largeur maximale au bloc dans IE via javascript, c'est peut-être trop compliqué/hors-sujet pour la détailler, mais un lien vers ta source me semble nécessaire pour ceux qui veulent s'y plonger.
mpop a écrit :

mais un lien vers ta source me semble nécessaire pour ceux qui veulent s'y plonger.

vivivi Smiley lol

Je m'étais bien dit qu'il fallait le faire mais comme je suis fainéant comme un poux ben je l'ai pas fait, je corrige...

a écrit :

– Quelques titres pour découper cette page en plusieurs sections logiques ne seraient pas du luxe.

Oui effectivement, je ne sais pas ce qui m'a pris de laisser l'exposé sous forme de liste, dès qu'il a pris un peu de consistance j'aurai du modifier cela.

a écrit :

– Le texte « On peut également contourner le problème en déduisant la largeur du conteneur au lieu de l'appliquer directement » ne m'a pas semblé très clair. Heureusement que je connaissais la méthode, sinon j'aurais été perdu.

Mmmm...

Je doute un peu que cela suffise à te perdre Smiley cligne

C'est en quelque sorte mon péché mignon ce genre de phrase un peu sibylline. Ce d'autant plus que j'ai toujours la faiblesse de croire que ça pousse un peu les gens à penser et à sortir du mode de l'évidence (pour les css en l'occurence c'est très utile).
Ce texte étant immédiatement suivi d'exemples de code ben il me va bien comme ça (Je sais ! Je suis têtu Smiley biggol )

mpop a écrit :

quand on ne leur attribue pas de largeur fixe.

Non ! Pas fixe, déterminée.

<Pensée du jour>
La sibyllinité de l'expression ne doit pas empêcher la précision du langage. Halte à la polysémie ! Smiley biggrin
</pensée du jour>
Bonjour,
J'avais complètement oublié ça...
Clb56 > Ca m'a l'air très intéressant ton truc... mais j'ai du mal à tout comprendre.
Si j'ai bien compris, la meilleure solution pour moi serait presque celle de mettre un deuxième div entourant, donc un div pour fixer la taille globale en % et l'autre pour fixer le padding.
Je sais pas pourquoi, mais j'aime pas trop beaucoup ça : j'ai l'impression que c'est de la divite...

Je venais par ici surtout pour vous donner quelques nouvelles de mon site. Aujourd'hui il n'est pas question de design (bien que le problème soit encore entier) ni de code, c'est simplement une petite news.

J'ai lancé il y a déjà quelques temps un nouveau jeu RPG sur mon site, programmé intégralement en php et mysql.
Toutes les fonctions prévues ne sont pas encore en jeu, car il vient de commencer (25 inscrits)).
Comme d'habitude pas de graphismes, pas de fioritures, seulement un jeu basé sur du texte et des simples formulaires.
Comme quoi, on peut faire des choses vraiment complexes avec des éléments de base... et là ça ne fait que commencer, c'est encore relativement facile.

Si ça vous intéresse : RPG.
Ceci va clore la partie divertissement de ce post.

Plus récemment, j'ai ajouté une astuce PC qui est suceptible de vous intéresser davantage car plus lié à l'accessibilité et aux standards.
Ayant fait la découverte de jaws 6.20.72 en version française, je me suis aperçu que les touches de navigation rapide sur le web avaient complètement changé par rapport à mon ancienne version 5.0.855.
Ayant également testé la 7.10 en anglais* (pendant mon absence d'une semaine en fin d'été), j'ai remarqué que les touches étaient les même que dans la version 5.0.855.
J'en ai déduit que cela dépendait de la langue...
Je me suis donc permis d'écrire un petit résumé des raccourcis de navigation rapide utilisables avec Jaws et IE6.

* Info : Jaws 7.x n'a pas encore été traduit en français.

Si ça vous intéresse : Liste des racourcis de navigation rapide avec Jaws et Internet Explorer

Voilà, histoire de vous tenir un peu au courant.
Vos avis sont toujours les bienvenus, cela va sans dire.

Merci.
Modifié par QuentinC (02 Sep 2006 - 11:12)
salut Quentin,

je ne vois pas trop où est le problème pour ta page.

avec la css

#contenu {
margin-left:24%;
padding-left:25px; 
/* donc sans width pour cet élément */
}


ça roule.

Effectivement le doublage de <div id="contenu"> par <div id="page"> n'est pas utile de ce point de vue.
Merci clb56, content de savoir que le problème s'est résolu seul alors, car je n'ai pas effectué de modif dans la CSS depuis mon dernier post en juin.
Ou alors je n'ai pas compris, ton code est une suggestion ?
QuentinC a écrit :

Ou alors je n'ai pas compris, ton code est une suggestion ?


Oui c'est une suggestion pour remplacer :

#contenu {
margin-left:24%;
padding-left:8px; 
width:73%;
}
Ah, j'avais pas tilté sur le fait que tu as enlevé l'indication width. C'est tout ce qu'il y a à faire donc, et augmenter un petit peu le padding.

Je trouve étrange le fait de ne pas indiquer de taille. Comment le navigateur est-il censé savoir ce qu'il peut prendre ? Il prend automatiquement ce qui reste juste pour éviter les scrollbars horizontales ou est-ce que c'est plus compliqué ?
Tu confirmes que ça roule bien sur fox et sur IE ?
Salut,

C'est toute la différence entre width:auto; qui prend toute la largeur disponible du parent mais sans que l'élément lui même soit dimensionné et le width:100%; (ou autre) où c'est l'élément lui même dont la largeur est déterminée.

Dans le premier cas (width:auto;) l'idée de :

"valeur de width" + "valeur de padding" + "valeur de border" n'a pas vraiment de sens parce que "valeur de width" n'a pas de signification numérique. C'est dans le calcul que nous déduisons ce que cela représente d'un point de vue numérique.
Modifié par clb56 (04 Sep 2006 - 19:38)
Pages :
Sujet clos
Aller à