background preloader

Gérer les débordements de contenus grâce à CSS

Gérer les débordements de contenus grâce à CSS
Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Exemple (HTML) : Partie CSS :

http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html

Related:  CSS/CSS3

Empêcher les flottants de dépasser de leur conteneur Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables. Par exemple, avec ce code HTML et CSS les «colonnes» flottantes dépasseront de leur conteneur: Le merdier du “stacking context” en CSS (aka “pourquoi mon z-index marche pas bordel de merde” ?) C’est une règle en CSS que beaucoup de designers connaissent, mais la première fois qu’on s’y frotte on se sent très con: on ne peut pas appliquer z-index à un élément dont le parent possède déjà un “stacking context”. Ce n’est pas un bug, c’est comme ça que c’est supposé fonctionner. Qu’est-ce qu’un “stacking context” ?

Mise en page CSS avancée via propriété display L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:

Ovale et forme elliptique avec CSS3 sans image La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS 3. Comme le présente très bien cet article de Raphaël sur le border-radius, son utilisation est plutôt aisée. Une utilisationp plus poussée La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes très variées, voire elliptiques. CSS display: inline-block La propriété display permet d'indiquer explicitement le mode de rendu d'un élément HTML. Les valeurs les plus connues sont none, block et inline. Pourtant il y en a beaucoup d'autres et en particulier la valeur inline-block

Comment cacher un titre (derrière un logo par exemple) ? Le but étant, par exemple, d'afficher en mode graphique un logo ou une bannière, tout en fournissant un texte « en dur » dans le code HTML, texte qui sera visible lorsque le site est visité avec un navigateur non graphique. Il existe plusieurs méthodes, utilisant généralement une image de fond CSS (background-image). À noter que la règle "display: none" pose des problèmes aux lecteurs d'écran. Le code html : Tutoriel sur le sitemap Google pour les images Par Olivier Duffez, Lundi 12 avril 2010 Depuis le temps qu'on attendait un moyen de faciliter le crawl et l'indexation des images, voilà qu'enfin Google rajoute la possibilité d'indiquer des URL de fichiers image dans les sitemaps XML. Explications...

Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. Exemples

Related: