<div class="clear"></div>

.clear {clear:both;}

Dans certains cas précis, j’utilisais un div vide¹, ce qui forcément n’était pas vraiment très sexy et clean…

Exemple avec et sans un div « clear »

<div id="container">
  <div class="left">Float Left</div>
  <div class="right">Float Right</div>
  <div class="clear"></div> <!-- Bouh, pas bien! :) -->
</div>
 
<div id="footer">
  <p>Pellentesque habitant morbi tristique senectus.</p>
</div>

.clear {clear:both;}
 
#container {
	width:420px; 
	border:1px solid #C00; 
	margin:20px auto 0 auto; 
	padding:10px;
	}
 
.left, 
.right {
	float:left; 
	border:1px solid #000;
	margin:0 10px 0 0;
	padding:10px;
	}
 
#footer {
	width:420px; 
	border:1px solid #000; 
	margin:10px auto 0 auto;
	padding:10px;
	}

Résultat sans le div clear :

Résultat avec le div clear :

Alors certes, cela marche très bien et il suffit de faire une recherche sur Google pour s’apercevoir que c’est encore très utilisé! Mais faut avouer que ce n’est pas très sémantique et que cela peut, à force, fortement alourdir votre code…

L’utilisation d’un overflow

Ce n’est pas nouveau, ni récent, mais il existe une solution bien plus intéressante en utilisant la propriété CSS « overflow » sur le container.

<div id="container">
  <div class="left">Float Left</div>
  <div class="right">Float Right</div>
</div>
 
<div id="footer">
  <p>Pellentesque habitant morbi tristique senectus.</p>
</div>

#container {
	width:420px; 
	border:1px solid #C00; 
	margin:20px auto 0 auto; 
	padding:10px;
	overflow:hidden;
	height:100% /*IE*/
	}

Pour un résultat parfaitement identique et compatible avec tous les navigateurs. C’est tout même plus propre!

Je précise que ce billet n’est pas complet sur le sujet et qu’il y aurait de quoi apporter des précisions dans certains cas.

Cette solution est sûrement connu par les plus experts d’entre vous, mais peut-être pas (encore) de tous !?

• Voir l’exemple de ce billet

1. Le cas sur ce blog…

Cliquer ici pour voir la vidéo.

Si vous êtes en train de bosser sur un nouveau projet¹ qui va révolutionner le web et que vous ne savez pas comment présenter la page des différentes offres de votre « business plan », je vous conseille vivement cette liste publiée sur vandelaydesign.com!

Si vous avez d’autres listes sur ce thème, n’hésitez pas à les laisser en commentaire, ça m’intéresse.

1. Charter Discount, private joke inside

Il est souvent fastidieux de tester un site sur les différents navigateurs existants. C’est particulièrement le cas avec la gamme Microsoft… J’utilisais Multiple IE pour tester un site sur Internet Explorer 6. Mais depuis l’installation de la version 8 de ce même navigateur, la version 6  « standalone » est devenue bancale et ne fonctionne plus très bien.

Microsoft a récemment sorti Expression Web SuperPreview, disponible gratuitement en téléchargement. Ce logiciel permet de tester dans la même fenêtre l’affichage d’un site sur les différentes versions d’Internet Explorer. Plusieurs modes d’affichages sont disponibles. Le chargement de la prévisualisation est un peu long à mon goût, mais il fait très bien ce que l’on lui demande, sans fioritures.

Du coup, plus besoin d’ouvrir le moindre Internet explorer, tout se passe dans le même logiciel¹ et c’est assez pratique après quelques essais. Le bémol, c’est qu’il n’est bien sûr pas disponible sur Mac ou Linux…

Et vous, quelles sont vos méthodes pour tester un site sur les différentes versions d’Internet Explorer ?

1. Attention tout de même, IE8 doit être installé sur votre ordinateur pour utiliser la prévisualisation de cette version.

Il y a des fois, même quand on n’a pas le temps, où il est important de poster son désespoire face à ce dinosaure de navigateur encore imposé et utilisé par beaucoup de personnes / agences… Je ne sais pas trop quelle part de marché il peut encore avoir à travers le monde, mais pitié, que ça cesse, c’est une perte d’énergie et de temps incroyable! Je fais donc suivre l’excellent article de Jeremy à ce sujet : Mais arrêtez avec IE6!.

Allez, vite fait, un petit coup de pub pour cuisine-saine.fr, le blog de Karen Chevallier sur la « bonne » cuisine. Un blog avec de très bonnes recettes et un joli design¹ réalisé par mon ami Shemu.

(..) J’ai eu envie de créer ce blog pour vous faire partager mes recettes bio avec ingrédients de saison (mes proches se régalent parait-il !) et vous permettre de tester vous même dans votre cuisine ces recettes inédites. J’ai aussi trouvé intéressant de penser aux personnes comme l’une de mes amies, allergique à certains éléments présents dans de très nombreux aliments (gluten, lait, soja…) : vous pouvez sélectionner spécifiquement les recettes ne comprenant pas certains éléments. (…)

1. Top ce design, mais il y a tout de même des ombres portées à revoir non ? Comme celle de « trouver une recette » :)

On retrouve dans cette longue liste de blogs, les grands classiques du genre, mais aussi, dans la masse, des blogs moins connues, plus spécialisés. De quoi varier et compléter ça liste de ressources et de flux RSS traitant des arts graphiques et du design.

• The Biggest Ever List of Graphic Design Blogs?

Pas le temps depuis plus de deux mois pour écrire quelque chose ici, mais un peu de temps tout de même pour changer le thème de ce blog, va comprendre… Ca change non ? :)

J’aimerai bien dans un prochain billet, publier l’original de cette photo et vous montrer les étapes pour arriver à ce résultat sous lightroom.

La seconde, un traitement complètement différent, en N & B. Que j’aurais pu appeler l’oeil du mordor non ? Ou pas… :)

1. Pour la première, non, ce n’est pas du HDR.