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