En fait, c’est un peu plus compliqué que ce que le titre indique. ;)
J’inaugure par cet exercice une série de billets présentant des cas « pratiques » d’application des CSS à une structure html.
Je fais plein de tests dans mon coin, sur des comportements, des rendus, des compatibilités et j’ai décidé d’en publier sur l’AJblog, mais sous la forme d’exercice.
Par contre, ne vous attendez pas à des tutoriels tous faits ou de simples pages de code commentées. Je laisse ça à d’autres qui font ça très bien.
Voyez ça plutôt comme des articles d’auto formation.
Un corrigé sera bien sur fourni à la suite, soit le mien, soit celui d’un visiteur si la technique appliquée est plus propre, plus simple, mieux en clair. Je n’ai pas la prétention d’être un « gourou ».
Un bloc de texte chevauchant deux colonnes
- Objectif : à la fin de cet exercice, vous serez capables de créer un bloc de texte chevauchant deux colonnes également remplies de texte.
- Niveau de difficulté : moyen
- Difficulté détectée : il faut que le texte des deux colonnes principales « habille » le bloc les chevauchants (voir visuel joint). Il faut de plus que le rendu soit le même (à peu près) quel que soit le navigateur (récent, c’est à dire à partir de IE6 ;) ).
- Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement est un plus (des sources sont fournies en bas de page).
- Matériel nécessaire : un simple éditeur de texte peut suffire
- Informations complémentaires : Vous avez droit à 5 conteneurs neutres (div) au maximum (n’oubliez pas il y a un footer ;) ). Vous avez droit à 7 ids d’objets différentes, les classes ne sont pas autorisées. Le code html et le CSS doivent être le plus propres possibles et bien sur Valides.
L’exemple en image :
Si vous avez besoin d’informations complémentaire, n’hésitez pas à en demander.
Précisez dans les commentaires si vous avez fini l’exercice en mettant un lien vers la page, ou si vous n’avez pas d’hébergement, envoyez moi vos fichiers je les hébergerai.
Les sources :
- Balises HTML : http://www.laurent-bernat.com/
- Balises (X)HTML : http://www.siteduzero.com/
- Propriétés CSS : http://www.siteduzero.com/
- positionnement des éléments via CSS : http://css.alsacreations.com/
EDIT : Pour vous permettre de pouvoir donner l’URL de vos fichiers, j’ai temporairement désactivé l’antispam sur .htm et .html (bilan : 2 spams de commentaires dans la nuit).
Bon exercice.
Les réponses actuelles :
- 20cent : 20cent.net/docs/divers/ex…
- Florent V. : web.covertprestige.info/d…
Merci à vous de participer.
La correction de l’exercice : Correction d’exercice : un bloc de texte chevauchant deux colonnes
Cordialement,
Aymeric Jacquet
Articles similaires
- Exercice CSS : un pied de page qui dépasse sur le contenu
- Exercice CSS : un menu en "rollover façon "Dock Mac"
- Correction d’exercice : un menu en rollover façon "dock" Mac
- Correction d’exercice CSS : un pied de page qui dépasse sur le contenu
- Quelques nouvelles du programme de formation (X)HTML/CSS
25 Commentaires pour Exercice CSS : un bloc de texte chevauchant deux colonnes
Bravo
Sympa comme idée ;o))
Je sens qu’on va se faire mal à la tête
Le 17 janvier 2007 Ã 15 h 48 min
Hmm… après une bonne heure dessus à essayer des trucs un peu au pif (oui je sais, c’est pas vraiment la meilleure méthode !), je suis toujours bloqué sur des chevauchements de texte. Dès le début, je savais que c’était le seul point qui allait me donner du fil à retordre (le reste étant très gentil globalement).
Rassure-moi : la solution à trouver est bien censée être adaptable quel que soit le contenu des deux colonnes ou la longueur de l’encart central ? Parce que s’il s’agit de bricoler une page qui marche pour un contenu donné et pour la taille de texte « standard » non agrandie ou réduite, je peine depuis 40 minutes pour rien.
Mais je suppose que tu as une vraie solution et pas simplement quelque chose d’aussi bêtement inadaptable et peu robuste ?
Le 17 janvier 2007 Ã 18 h 54 min
Pour info, au mieux j’obtiens des choses qui ressemblent à ça :
pix.nofrag.com/ca/66/29d9…
Le 17 janvier 2007 Ã 18 h 58 min
Comme je suis un peu sadique sur les bords, j’ai fait passer l’info sur le forum d’Alsacréations :
forum.alsacreations.com/t…
Désolé si ça devait rester « confidentiel »…
Le 17 janvier 2007 Ã 19 h 44 min
Hé ben, faut pas mettre des URL dans ses messages sur ce blog… déjà deux qui me passent à la trappe. :(
Le 17 janvier 2007 Ã 19 h 44 min
@Dadoo : c’est le but. ;)
@Florent : pour l’instant la "seule" obligation c’est que le "bloc" ne peut se positionner qu’au début ou fin des colonnes. Mais je crois que je viens d’avoir une idée qui solutionne ce problème. :)
Attention, je ne dis pas qu’il faut que votre code soit dans la parfaite logique sémantique, on peut quand même se permettre des écarts.
Le 17 janvier 2007 Ã 19 h 12 min
Voici ma version… qui sera sans doute améliorée au fil du temps : 20cent.net/docs/divers/ex…
Bonne soirée. :)
Le 17 janvier 2007 Ã 20 h 48 min
Ah oui j’ai oublié de préciser ce petit truc de mon spamplemousse, j’ai collé .html en mot spam. Bizarrement, j’ai presque plus de spam qui passe. :)
Bon je viens de libérer tes commentaires de l’odieux et despotique Antispam.
Euhh pour Alsacreations, aucun problème, c’est un petit peu de la triche non? ;) D’un autre côté, en formation on conseille toujours aux stagiaires de chercher l’info ou elle peut se trouver.
Le 17 janvier 2007 Ã 20 h 17 min
Une petite piste : un des habitués du blog m’a contacté pour me dire qu’il allait travailler à partir d’un modèle alistapart.com, ce qui est une bonne idée, c’est clair, mais la "grande difficulté" de cet exercice tient principalement dans les backgrounds et le modèle alistapart ne fonctionne qu’avec un background uni.
Le 17 janvier 2007 Ã 21 h 33 min
Difficulté dans les background ? On parle du même exercice là ?…
Enfin bref, je bute toujours sur l’habillage de l’encart. J’ai exploré la solution de 20cent, mais c’est justement le genre de petit bidouillage qui me semble peu intéressant… même si les hauteurs en EM donne l’illusion dans un premier temps lorsqu’on agrandit le texte (mais le texte de l’encart fout le camp, et on comprend qu’il y a anguille sous roche).
Pour info, je me suis arrêté là :
web.covertprestige.info/d…
4 divs (même si j’aurais pu descendre à 3, avec un paragraphe pour l’encart… ah tiens, en fait on peut descendre à 2, maintenant que j’y pense), 5 identifiants (on peut descendre à 4).
Le 18 janvier 2007 Ã 0 h 33 min
20cent : checked, préviens moi dés que tu penses avoir fini.
Florent : Checked, idem préviens moi dés que tu penses avoir fini.
Pour autres précisions : comme je viens de le préciser à Alan sur Alsacreations, à partir du moment ou l’on essaie de créer un effet qui n’est pas prévu initialement avec les outils utilisés, on est obligé de faire appel à des trucs et astuces "borderline", certains plus "borderline" que d’autres.
Tel que je te vois venir, tu seras surement déçu de la solution proposée. :D Espèce d’ayatollah. ;)
Le 18 janvier 2007 Ã 9 h 29 min
Bon, je ne pensais pas continuer, mais j’ai eu une petite idée. Voici donc…
Рma version non bidouill̩e (m̻me page que pr̩c̩demment) :
web.covertprestige.info/d…
– ma version avec grosse bidouille pas belle :
web.covertprestige.info/d…
J’ai laissé de côté les grosses bidouilles de l’article d’A List Apart (rien ne résistait au test suprême : l’augmentation de la taille du texte). J’ai donc pondu une version qui permet d’atteindre le graal, mais au pris d’un code HTML encore moins « sémantiquement correct » que tout ce que j’ai pu voir jusqu’ici.
J’attends donc toujours la solution ultime. ;)
Pour information : testé avec succès sur IE 6+7, FF 2, Opera 9 et Konqueror 3.5. Pas pu tester sous Safari, mais je pense que le rendu sera semblable à celui de Konqueror. Pour information : le seul à poser problème (hors IE6 et le bug des marges doublées pour les flottants) était Konqueror, qui a eu besoin d’un petit coup de z-index.
Le 18 janvier 2007 Ã 10 h 30 min
Pour info : je pense que je vais m’arrêter là . :)
Le 18 janvier 2007 Ã 10 h 33 min
Exercice intéressant, je vais essayer de m’y mettre !
Juste un petit conseil de terminologie française, on dit pied de page et non ‘footer’.
Le 18 janvier 2007 Ã 9 h 36 min
Pareil pour moi, j’arrête.
Le 18 janvier 2007 Ã 10 h 43 min
Allez, un de plus pour la route :
web.covertprestige.info/d…
En gros c’est la solution de 20cent/alistapart/etc., mais avec une petite subtilité pour une meilleure adaptabilité à l’agrandissement du texte. Note : Opera n’a pas l’air très fan, par contre, mais j’ai du mal à comprendre la gestion de la taille du texte par ce navigateur. ^_^;
Le 18 janvier 2007 Ã 13 h 41 min
(Si je peux me permettre) le principal souci de ta solution Florent reste que l’article principal est coupé lors de sa lecture par celle de l’encart gris. Il n’y a pas de continuité.
Le 18 janvier 2007 Ã 13 h 59 min
20cent > Ça, ça dépendra du contenu. Les colonnes de gauche et de droite représentent-elles un contenu unique, ou deux contenus fortement liés ? Dans ce cas, on placera l’encart au début. Ou encore : si on veut utiliser deux éléments vides pour repousser le texte, et avec la solution du bloc d’encart en hauteur fixe (en EM), on pourra le mettre n’importe où et ensuite le positionner en absolu.
Mais là ça va dépendre du contexte, du contenu, etc.
Le 18 janvier 2007 Ã 15 h 24 min
Hop, avec du positionnement absolu :
web.covertprestige.info/d…
(4 div + un paragraphe pour le pied de page, 5 identifiants, une classe pour les éléments vide… la classe n’était pas du tout indispensable, mais je trouve ça plus propre).
Le 18 janvier 2007 Ã 15 h 44 min
Il est à fond le Florent. Il faudra me préciser au final quelle version te semble la mieux.
Le 18 janvier 2007 Ã 15 h 50 min
Si le « final » c’est maintenant, je dirais celle du positionnement absolu (exo1d).
Elle est visuellement moins efficace, mais c’est le meilleur compromis accessibilité/design, avec la possibilité de placer l’encart où l’on veut dans le code (au début, au milieu, à la fin… suivant le type de lecture linéarisé dont on aura besoin).
Le 18 janvier 2007 Ã 17 h 35 min
En passant : je pourrais la modifier pour avoir 0 classes et 7 identifiants, mais l’utilisation de classes me semble plus logique pour ce que j’ai fait, donc tant pis pour les règles. :D
Le 18 janvier 2007 Ã 17 h 36 min
Je propose qu’on fasse le corrigé d’ici une semaine, le temps de laisser le temps à toutes les personnes intéressées de rendre leur copie. ;)
Le 18 janvier 2007 Ã 20 h 17 min
bon ben pour moi ça donne ça :
mais si l’on change la taille de police, ben ça casse :(
Le 5 mai 2007 Ã 19 h 04 min
Bonjour ben, j’ai regardé ta page et ta feuille de style.
En fait ton problème vient du fait que tu as donné une largeur en « em » à tes blocs de texte intérieurs et une taille en pixels à ton conteneur global.
Du coup, quand tu agrandis la taille d’affichage des polices de caractere, cette unité de taille (les « em ») grandit proportionnellement, donc tes blocs deviennent trop grands poru rester l’un à côté de l’autre.
Pour ce type de mise en page, il faut de préférence utiliser un taille de blocs en pixels, ou alors mettre une taille du conteneur global également en « em ».
Le 7 mai 2007 Ã 13 h 58 min