[nv tuto][en ligne]Design à 2 colonnes

(reprise du message précédent)

ça passe sous firefox, IE6 et Opera. Si quelqu'un peut jeter un coup d'oeil pour savoir ce que ça donne sous KHTML, ce serait bien.

J'ai corrigé la plupart des points qui ont été soulevés, à part l'intro et le menu. Je t'ai même dégotté un tournevis de derrière les fagots

a écrit :
Oui j'y ai pensé aussi, mais je pense que si c'est bien expliqué, ça peut être un plus.

Je pense que je vais rajouter une page dédiée à ce sujet, pour plus de clarté. Et peut-être exposer les 2 solutions, filter:blabla ou une image alternative.

Sopo a écrit :
Je pense que je vais rajouter une page dédiée à ce sujet, pour plus de clarté. Et peut-être exposer les 2 solutions, filter:blabla ou une image alternative.

Moui pourquoi pas, mais une page dédiée est peut-être de trop puisque cela ne servira plus à grand chose avec IE7.
Peut-être une simple explication et des liens vers des pistes plus complètes ?

Pour le reste, je vais pouvoir me pencher à nouveau sur le tuto dès demain après-midi.
En attendant, si d'autres ont des avis, ils sont les bienvenus.

PS : merci encore pour ton initiative, Sopo

Ok. je vais tâcher de retrouver le sujet du forum qui en parlait, en plus du lien vers le site de Microsoft (qui est des plus obscurs, il faut bien le dire).

P.S. : Pas de quoi

Edit : y a-t-il un iMac dans l'avion ? Est-ce que quelqu'un pourrait jeter un oeil sous Safari ? http://sopo.freezee.org/alsa/etape5.html

Merci !

Edit again : testé sous Swift, ça passe (mais bon, Swift est tjrs en version pré-pré-alpha ...)
Modifié par Sopo (07 Nov 2006 - 23:17)

Dernière petite chose : dans l'étape 5 et la partie qui traite des "em", un lien vers ce tuto pourrait être une bonne chose je pense, car il explique pourquoi un % au body et le reste en em

Bon, je crois avoir tenu compte de toutes les remarques. J'ai étoffé l'introduction en essayant de clarifier les objectifs et la relative difficulté.

Un bug d'IE (double marge des flottants) que je n'avais pas avant de passer les 2 colonnes en float a été corrigé & ajouté à la liste.

J'ai essayé d'introduire subrepticement et en douceur les notions de contexte de formatage et de hasLayout (juste un petit peu, faut pas effrayer le client ).

L'apparence du menu a été modifiée, il était vraiment trop moche, ça va un peu mieux.

J'ai placé un picto dans les remarques pour faire plaisir à Raphael, mais je n'étais pas très inspiré si quelqu'un a mieux que mon tournevis, je suis preneur.

Il me manque un ou deux liens de référence sur la méthode "filter:blabla" pour les PNG transparents en arrière-plan. Personne n'a ça dans ses favoris ?

edit : Je vous remets le lien : Introduction
Modifié par Sopo (08 Nov 2006 - 02:04)

Pour le PNG, les liens en bas de cette page sont peut-être exploitables : http://www.antp.be/PNG/

* http://sopo.freezee.org/alsa/etape1.html
Je pense qu'il faudrait définir une largeur au bloc <pre> car le scroll horizontal est plutôt gênant

* http://sopo.freezee.org/alsa/etape2.html
Petite coquille, cette phrase n'a plus de sens : "Evidemment, pour placer la colonne de l'autre côté, il suffit de remplacer "right" par "left" dans cette partie de la feuille de style.'

Même page : "Voici pourquoi : en passant les colonnes en flottants, nous les avons sorties du flux de la page. Dès lors, elles n'interviennent plus dans le calcul de la hauteur de leur conteneur, #center. Tout se passe comme si celui-ci était vide, et le navigateur vient donc placer le pied de page en bas du premier écran (en bas de l'écran quand la barre de défilement vertical est tout en haut, quoi)."
-> Ici, je verrai bien un lien vers ce point de la FAQ : http://forum.alsacreations.com/faq/#item6

Pour le reste, rien à ajouter : c'est extra !

Je peux m'occuper de mettre ça en ligne aujourd'hui. Indique moi les informations que tu veux communiquer en ce qui te concerne : nom / pseudo / email / site web

* Etape 1 : J'ai ajouté une largeur pour la balise <pre> et je l'ai rendu scrollable.
* Etape 2 : La coquille est rectifiée, il suffisait d'inverser "right" & "left" mais j'en ai profité pour ajouter une note . J'ai ajouté un lien vers la FAQ, mine de rien.
* Etape 6 : J'ai retrouvé un sujet du forum où Laurent Denis explique clairement et avec concision la méthode pour les background PNG transparents, et j'ai rajouté un de tes liens (qui concerne les images dans le code html, mais ça peut servir).
* J'ai revalidé un coup toutes les pages (heureusement, y'avait des esperluettes dans un lien vers ... Alsacréations )

Pour mes informations, je préférerais utiliser mon vrai nom (Thomas Dedericks) que mon pseudo (qui ne fait pas très sérieux). Je n'ai pas de site à proposer en lien, à part le blog de ma copine qui ne va pas intéresser les gens , tu n'as qu'à renvoyer vers mon profil sur le forum (qui comprend déjà une adresse email).

Je suis content que ça plaise, en tous cas

Edit : dernières minuscules modifs : ajout d'un point d'exclamation dans la "brève" et petite phrase pour signaler la fin du tuto, que les gens ne cherchent pas partout l'étape 7. Maintenant, si il n'y a plus de suggestions, je n'y touche plus (on n'a jamais fini, sinon )
Modifié par Sopo (08 Nov 2006 - 12:11)

Sopo a écrit :
Edit : dernières minuscules modifs : ajout d'un point d'exclamation dans la "brève" et petite phrase pour signaler la fin du tuto, que les gens ne cherchent pas partout l'étape 7. Maintenant, si il n'y a plus de suggestions, je n'y touche plus (on n'a jamais fini, sinon )

Une dernière modif peut-être :
Au lieu du lien vers la version anglaise, ce lien pourrait être plus adapté pour le haslayout : http://www.test.blog-and-blues.org/haslayout/trad_temp.html ?

Si tu peux m'envoyer le dossier complet (pages web + images), je m'occupe aujourd'hui de la mise en ligne sur Alsa

EDIT : mail à envoyer à forum@alsacreations.com stp
Modifié par Raphael (08 Nov 2006 - 13:03)

Ok, je vais ajouter le lien. Mais je préfère garder le lien vers MSDN, plus concis. La traduction de Laurent, plus précise, est assez longue

Edit : le mail est en chemin.
Modifié par Sopo (08 Nov 2006 - 13:26)

Hopla, on dirait que le tuto est en ligne

Une dernière relecture / débugage avant que j'enchaîne sur un billet de blog ?

Dans l'étape 5, au premier paragraphe, j'ai écrit "postionnement" au lieu de positionnement. Et il manque un point à la fin du premier paragraphe de l'étape 6.

C'est tout ce que j'ai vu.

Par ailleurs, il y a un petit bug sous Firefox 2.0 avec un lien, tout à la fin de l'étape 5 ... le lien passe à la ligne, mais chez moi, Fx souligne l'espace vide jusqu'au bord du paragraphe. Mais bon, on s'en fout un peu

On dirait que les autres se sont donnés le mot, sur le forum :
* Blocage de l'interface dû à des PNG transparents sous IE
* Header/2 colonnes/footer

J'éditerai au fur et à mesure mais déjà:

1ère page:

a écrit :
La page occupera toujours AU MINIMUM 100% de la hauteur de la fenêtre, quel que soit le contenu ;

a écrit :
Nota : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser l'auteur (Thomas Dedericks) et la source (Alsacreations). Ceci veut dire que vous n'êtes pas autorisé à vous approprier le travail d'autrui.

CC-BY donc? Une mention explicite peut-être? (pas de lien vers la page Alsa qui va bien, car les graphismes d'Alsa ne sont PAS sous CC sauf exception - comme ici)


2ème page:
Et oui -> Eh oui
entête -> en-tête nom masculin donc l'en-tête (identifié), destiné

---
edit: (à corriger 2 fois: dans le texte et dans le <_pre>)

3ème page:

a écrit :
La position "top: 0px, left: 0px"

Ca me paraissait confus à la 1ère lecture: est-ce que c'est la meilleure notation pour dire "en haut à gauche", vu que c'est utilisé nulle part ... Mais finalement à la 2ème lecture, je pense que ça va.

j'ai envie, na. Interjection donc ce serait na! avec le point d'exclamation (mouais bon )

suffisament -> suffisaMMent

encart qui suit: choisir avec ou sans point-virgule les notations "float: left" vs "float: right;". Perso, j'en mettrais partout (et dans le top/left dont il était question ci-dessus)

(en bas de l'écran quand la barre de défilement vertical est tout en haut, quoi)
(c'est à dire en bas de l'écran quand la barre de défilement vertical est tout en haut)

4ème page:
horizontalement : -> le ':' va à la ligne chez moi (Fx 1.5; 1024x768) à cause de l'espace. Y en a partout de ces espaces ou bien?

---
edit2:
5ème page:
nous ajountons -> nous ajoUTons

Le soulignement des liens ne me semble pas -> utilisation de 'Je' dans tout le § contrairement à tout le reste du tuto. Effet bof


6ème page (Etape 5):
on peut utiliser le postionnement absolu sans risques -> sans risque (?? mais osef)

Lien vers typographie web: -> un ÿ vendredÿste majuscule qui traîne

---
edit3:
7ème et dernière page:
rien


En général:
Est-ce opportun de rajouter un laïus sur l'utilisation des notations CSS raccourcies?


(fini)
Modifié par Felipe (08 Nov 2006 - 16:27)

Hop, corrections effectuées et billet de blog posté

Bravo à toi !

EDIT : euh ok je prend les modifs de Felipe au fur et à mesure.
Modifié par Raphael (08 Nov 2006 - 16:02)

Merci, merci. Y'a plus qu'à espérer que personne ne découvre un bug monstrueux

done_txttc

Felipe a écrit :
Est-ce opportun de rajouter un laïus sur l'utilisation des notations CSS raccourcies?

C'est-à-dire ?

Au fait, tu n'aurais pas été prof, dans une autre vie ?

border regroupe border-color + -style + -width par exemple. Tu précises bien dans l'introduction qu'il faut "une base minimale en CSS" donc on est censé le savoir je pense.

edit: prof> euh non, j'ai juste donné quelques TD mais ça fait pas de moi un enseignant et surtout pas en français! C'est juste que je lis vite et que mon oeil reste comme "accroché" à chaque fois qu'un truc lui plaît pas.
Modifié par Felipe (08 Nov 2006 - 16:45)

Felipe a écrit :
border regroupe border-color + -style + -width par exemple. Tu précises bien dans l'introduction qu'il faut "une base minimale en CSS" donc on est censé le savoir je pense.

Ou se renseigner un minimum quand on tombe dessus. Il y a assez de tutoriels sur la syntaxe CSS disponibles, non ? (sans parler de la spécification, mais il ne faut pas rêver, presque personne ne va voir dedans )

Merci à ton oeil pointilleux pour les corrections
Modifié par Sopo (08 Nov 2006 - 16:46)

De rien

---

C'est pour un site marchand en fait?