mai 15

Menu déroulant en CSS

Merci à G Cyrillus pour ce menu en CSS, sans JavaScript et compatible Firefox, IE et Chrome.
Perso, le contexte de formatage ne me sert à rien dans mon test mais je ne suis pas expert.

CSS

/* Menu Déroulant sans float CSS3 et centré , GCyrillus */

/* Base CSS sans float et centrage du menu */
ul#menu-gc {
	display:table; /* contexte de formatage : alternative = inline-block */
	margin:auto;   /* centrage pour element similaire a block, si inline-block, alors text-align:center; sur le parent  */
	padding:0;		/* reset marge interne */
	}
#menu-gc li {
	display:inline-block; /* alternative à float avec contexte de formatage */
	}
#menu-gc ul {
	padding:0;			 	/* reset marge internes */
	position:absolute;		/* extraction du flux , peut necessité un z-index selon contexte des styles */
	}
#menu-gc ul li {
	display:block;			/* retour a un comportement de type block */
	}

/* gestion des menus */

/* on cache au repos les menus */
#menu-gc ul {
	left:-9999px;			/* on ejecte le menu de l'écran sans le rendre totalement inaccessible */
	}
/* on affiche le menu au survol de son ITEM parent */
#menu-gc li:hover ul {
	left:auto;				/* on laisse le navigateur faire si pas de positionement relatif impliqué dans un parent  */
	}
	
/* un peu de mise en forme */
#menu-gc, #menu-gc ul {
	box-shadow:inset 0 0px 2px  #333;
	background:#999;
	color:white;
	}
#menu-gc  li {
	min-width:60px;
	text-indent: 0.5em;
	padding: 0.25em 0.5em 0.25em 0;
	}
#menu-gc li:hover {
	background:#ccc;
	}
#menu-gc li li:hover {
	background:#eee;
	}

HTML

<ul id="menu-gc">
	<li>item 1
		<ul>
			<li><a href="#">lien item 1.1 </a></li>
			<li><a href="#">lien item 1.2 </a></li>
			<li><a href="#">lien item 1.3 </a></li>
			<li><a href="#">lien item 1.4 </a></li>
		</ul>
	</li>
	<li>item 2
		<ul>
			<li><a href="#">lien item 2.1 </a></li>
			<li><a href="#">lien item 2.2 </a></li>
			<li><a href="#">lien item 2.3 </a></li>
			<li><a href="#">lien item 2.4 </a></li>
		</ul>
	</li>
	<li>item 3 
		<ul>
			<li><a href="#">lien item 3.1 </a></li>
			<li><a href="#">lien item 3.2 </a></li>
			<li><a href="#">lien item 3.3 </a></li>
			<li><a href="#">lien item 3.4 </a></li>
		</ul>
	</li>
	<li>item 4
		<ul>
			<li><a href="#">lien item 4.1 </a></li>
			<li><a href="#">lien item 4.2 </a></li>
			<li><a href="#">lien item 4.3 </a></li>
			<li><a href="#">lien item 4.4 </a></li>
		</ul>
	</li>
	<li>item 5
		<ul>
			<li><a href="#">lien item 5.1 </a></li>
			<li><a href="#">lien item 5.2 </a></li>
			<li><a href="#">lien item 5.3 </a></li>
			<li><a href="#">lien item 5.4 </a></li>
		</ul>
	</li>

Catégorie : WEBMASTERING | Commenter
septembre 9

Une class CSS sur mesure

WordPress dispose de  plusieurs tags PHP qui, couplé à une class CSS, permettent d’avoir une class unique, selon des cas précis.

Le titre

<div class="post" id="post-<?php the_title(); ?>">

Une class au nom du titre de la page ou de l’article

La date

<div class="post" id="post-<?php the_date(); ?>">

Par rapport à la date, pratique pour un fond de page qui varie selon les saisons.

La catégorie

<div class="post" id="post-<?php the_category(); ?>">

Différent pour chaque catégories

Catégorie : WORDPRESS | Commenter
février 23

Ajouter des styles CSS dans l’éditeur de WordPress

La fonction « add_editor_style ( ) » doit être inclus dans le fichier « functions.php » et un fichier « editor-style.css » doit être présent dans le dossier du thème actif de WordPress.

Installer le plugin TinyMCE Advanced, qui permet, en autre, de rajouter un bouton à liste déroulante « style » dans l’éditeur de WordPress.

Dans WordPress, apparence/editeur :
Editer le fichier : editor-style.css et ajouter des class CSS (les ID ne seront pas visibles) avec les paramètres de style souhaité.

 

PS: certains thèmes de WordPress contienne déjà des class intégrées, exemple:

.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #f1f1f1;
	border: none;
	-khtml-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	color: #888;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 20px;
	max-width: 632px !important; /* prevent too-wide images from breaking layout */
	padding: 4px;
	text-align: center;
}
.wp-caption img {
	margin: 5px;
}
.wp-caption p.wp-caption-text {
	margin: 0 0 4px;
}
.wp-smiley {
	margin: 0;
}

..

Catégorie : WORDPRESS | Commenter
janvier 25

Artisteer et WordPress

Artisteer (V3 en 2012, la version V4 est pour bientôt et apportera beaucoup de nouveauté) est un logiciel (payant) permettant de créer facilement des thèmes pour wordpress.
On exporte un fichier ZIP qui contient tous les éléments du thèmes et meme le fichier qui a servi à le construire dans Artisteer.

Quelques trucs sont quand même à savoir.

Mise en forme

Définir : largeur, position de l’entête et le nombres et positions des colonnes souhaité

La zone « primary » ou « zone principal de Widget » est la colonne de gauche
La zone « secondary » ou « zone secondaire de widget » est la colonne de droite.

Zones d’artisteer

Dans Worpress, sa donne ça :

Zones de widget de wordpress

 

Choix des menus

Artisteer appel les menus horizontale de wordpress « menu » et les menus des colonnes « menu vertical ».
On peut choisir dans fichier/exporter/options d’export si les menus affichent les pages ou les catégories (articles)

Les menus peuvent aussi être créé/modifier par la suite, dans les paramètres de WordPress

Menu de base

Artisteer crée un thème WordPress avec un menu vertical qui affichera des catégories.
Il intègre aussi un menu (page ou article) non modifiable dans l’admin de WP.

Les pages se rajouteront automatiquement à ce menu, par ordre alphabétique  sans possibilité de modifier cette ordre.

Menu personnalisé

Pour avoir un menu personnalisable (et faire disparaitre le titre « pas de catégories » de la sidebar), il faut donc créer un nouveau menu dans thème/menu et ajouter ce que l’on veut dedans.

Ensuite, il faut éditer les widgets, ajouter « menu vertical » à la sidebar et choisir le menu précédemment créé.

Problème de « non-classés »

Dans mon cas, au dessus du contenu, j’avais un lien « non-classé » fort déplaisant et pas voulus.

Pour le faire disparaitre, ajouter ce code au fichier CSS du thème.

li.menu-item-1 /*ne pas afficher catégories non-classés*/
{
display: none;
}

Options de thème

 

Quelques styles CSS à connaitre

  • .art-header = l’entête
  • .art-footer-body = le pied de page
  • .art-layout-cell = la sidebar
  • .art-box-body = le bloc qui contient les pages
  • .art-logo = div du bloc titre et slogan dans l’entête
  • .art-logo-name = titre du site H1 dans l’entête
  • .art-logo-text = slogan H2 de entete
  • .art-postheader = titre des pages

Les pages

Artisteer crée des thèmes qui permettent de sélectionner qu’une page s’affichera sans avoir les colonnes (sidebar) (penser à sélectionner « attributs de la page » dans les options d’écran).
On peut aussi indiquer un titre au menu différent de celui de la page.

Les articles

Artisteer crée des articles qui intègrent une fonction (post format) permettant de sélectionner le type d’article : par defaut, en passant, galerie (standard, rapide, galerie).

Ces types sont créés par la fonction »add_theme_support ».

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
	add_theme_support( 'nav-menus' );
	add_theme_support( 'automatic-feed-links' );
	add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
}

Cette fonction permet de rajouter des mise en page spécifique selon le contenu.

Les post format correspondent aux fichiers du thèmes : single.php, content-aside.php, content-gallery.php. Chaque fichier et donc format aura une mise en page (titre, meta, contenu, image..) différente, MAIS cette différence ne sera visible que lors de l’affichage par catégorie (les articles sur 1 page, les un au dessus des autres). Bizz

Quand on appel un article, c’est les fichiers « content.php » et « content-single.php » qui sont chargés.

Les styles éditeur

Le fichier style.css créé par Artisteer incorpore certaines classes recommandées par WordPress.

/* Recommended by http://codex.wordpress.org/CSS */
/* Begin */
.aligncenter, div.aligncenter, .art-article .aligncenter img, .aligncenter img.art-article, .aligncenter img, img.aligncenter
{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

p.aligncenter , p.center 
{
   text-align: center;
}

.alignleft
{
   float: left;
}

.alignright
{
   float: right;
}

.alignright img, img.alignright
{
   margin: 1em;
   margin-right: 0;
}

.alignleft img, img.alignleft
{
   margin: 1em;
   margin-left: 0;
}

.wp-caption
{
   border: 1px solid #ddd;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   text-align: center;
}

.wp-caption img
{
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text
{
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

.wp-caption p
{
   text-align: center;
}

.gallery {
   margin: 0 auto 18px;
   clear:both;
   overflow:hidden;
   letter-spacing: normal;
}

.gallery .gallery-item {
   float: left;
   margin-top: 0;
   text-align: center;
   width: 33%;
}
.gallery img {
   border: 10px solid #f1f1f1;
}

.gallery .gallery-caption {
   color: #888;
   font-size: 12px;
   margin: 0 0 12px;
}

.gallery dl {
   margin: 0;
}

.gallery br+br {
   display: none;
}
/* End */

.

Supprimer des infos

Pour enlever par exemple les infos de date et auteur (metadata) il suffit d’éditer le fichier « content-single.php » qui contient le tableau « global $post » et de mettre en commentaire certaines lignes :
/*’before’ => theme_get_metadata_icons(‘date,author,edit’, ‘header’),*/
ou
/*’after’ => theme_get_metadata_icons(‘category,tag’, ‘footer’)*/


Plus d’infos sur le site artisteer

Le forum spécial WordPress


décembre 11

Explanatory dictionary

Lexique avec ajout d’une info bulle sur chaque mot des articles contenus dans le lexique.

Exclure un mot de son info bulle

entourer le mot avec les balises [no explanation] [/no explanation]

Séparer les blocs de définitions

La page « lexique » d’origine  n’est pas très glamour.

Editer le fichier « plugins\explanatory-dictionary\explanatory-dictionary.php » à la ligne 463
après « $explanatory_dictionary_content » rajouter une class « explanatory_dictionary » à la balsie DIV.

Editer le fichier « plugins\explanatory-dictionary\css\explanatory-dictionary-style.css »
Rajouter le code(à votre grès)

.explanatory_dictionary, div.explanatory_dictionary_first{
  padding: 1em 0 1em 0;
  border-bottom: solid #435DC5 thin;
}

Personnaliser le bloc des lettres

Editer le fichier « plugins\explanatory-dictionary\css\explanatory-dictionary-style.css »
Rajouter le code(à votre grès)

.explanatory_dictionary_alphabet {
border: solid #CC6700 2px;
padding: 10px;
}

*

novembre 7

Style CCS pour lien actif

Par defaut, WP ne crée pas de class ou id particulière pour le lien actif d’une page.

Pour résoudre ça, il suffit d’insérer dans le fichier functions.php du thème ce code :

add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

function additional_active_item_classes($classes = array(), $menu_item = false){
	if(in_array('current-menu-item', $menu_item->classes)){
		$classes[] = 'LienActif';
	}
	return $classes;
}

Il suffira alors de styliser la class .LienActif

Catégorie : WORDPRESS | Commenter
novembre 1

Créer un style CSS pour TinyMCE

1- Tout d’abord rendez-vous dans la partie plugins de l’administration, et séléctionner Editor –
TinyMCE 2.0.
2- Mettre Non à Classes CSS du template
3- Rentrer en chemin absolu dans le champ Classes CSS du template l’adresse de la feuille des style CSS que vous souhaitez voir s’afficher dans l’éditeur
4- Ne pas oublié de créer un lien vers le CSS de l’éditeur dans index.php du template concerné.

Par exemple :
<link rel= »stylesheet » href= »<?php echo $this->baseurl >/templates/NomduTemplate/css/editor.css » type= »text/css » />

Catégorie : Joomla - Astuces | Commenter
juillet 29

Background étirable

Une image mise en arrière-plan (background-image) ne s’étire pas, elle ne fait que se dupliquer.

Pour réaliser un arrière-plan étirable, il faut utiliser une image (élément HTML img) et non une image de fond en CSS. Voici une méthode…
Le principe général est de donner les dimensions (hauteur et largeur) 100% à l’image, qui occupera alors toute la place de son conteneur (div, cellule,…). Ensuite, pour pouvoir afficher un texte par dessus, il faut donner une position à ce texte (absolu ou relatif).

Attention: avec cette méthode, l’image risque d’être très déformée puisque les proportions (hauteur / largeur) ne sont pas respectées. Si vous voulez que les proportions soient gardées, il vous suffit de ne spécifier que la dimension qui devra s’agrandir (width ou height)… l’autre dimension va s’adapter proportionellement, mais dans ce cas n’occupera plus 100% de l’espace.

1) Un arrière plan sur le document entier (body)

Exemple: /xmedia/billets/arriere-plan2.htm

Le code CSS:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#arriere {
	/* l'image occupe toute la place du body */
	width : 100%;
	height: 100%;
}

Le code HTML:

<img id="arriere" alt="" src="araignees.jpg" />

2) Un arrière plan sur un autre élément

Exemple: /xmedia/billets/arriere-plan.htm

Le code CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#arriere {
position: absolute;	/* dimension et positionnement du bloc conteneur de l'image */
left: 10em;
top: 5em;
height : 20em;
width : 30em;
}
#arriere img {/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#arriere p {
position: absolute; /* placement du texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
color: white;
}

Le code HTML:

<div id="arriere">
<img alt="" src="image.png />
<p>titre sur une image en arrière-plan étirée Modifiez la taille du texte avec votre navigateur: l'image suit la cadence!</p></div>

Code testé avec succès sur Windows IE5, IE5.5, IE6, Mozilla Firebird 0.7, Mozilla Firefox 0.8 et Opera 7.23.

Ressources

Catégorie : WEBMASTERING | Commenter
juillet 27

La fusion des marges

D’où viennent les écarts étranges que l’on observe parfois entre certains blocs d’une page? Comment se fait-il que des marges disparaissent? Et pourquoi cette marge-là semble-t-elle s’appliquer à mon conteneur et pas à mon titre ou mon paragraphe?

La fusion des marges pourrait bien être derrière tous ces mystères.

Article par Florent V. (Chef de projet, intégrateur web, Lyon, France)
Mis à jour le 02 Juillet 2009. 20120 lectures.
Tags : css, standards, fusion des marges, marges

Qu’est-ce que la fusion des marges?

La fusion des marges est un mécanisme décrit dans la spécification CSS (CSS 2.1: Collapsing Margins). Il concerne les marges verticales (margin-top et margin-bottom) des éléments de type bloc.

De quoi s’agit-il? Eh bien c’est un mécanisme qui, pour deux blocs qui se suivent, «fusionne» la marge inférieure du premier et la marge supérieure du deuxième. C’est-à-dire qu’au lieu d’additionner les deux marges, le navigateur va garder la plus grande des deux.

Ainsi, dans l’exemple suivant l’écart entre les deux paragraphes ne sera pas de 50 pixels (20 + 30), mais de 30 pixels:

<code>&lt;p style="margin-bottom: 20px;"&gt;      Premier paragraphe  &lt;/p&gt;  &lt;p style="margin-top: 30px;"&gt;      Deuxième paragraphe  &lt;/p&gt;</code>

Pourquoi ce mécanisme?

La fusion des marges est très utile pour obtenir des espaces harmonieux entre les portions de texte. Grâce à la fusion des marges, on peut considérer que pour chaque paragraphe, titre, liste ou autre élément contenant une portion de texte:

  1. la marge supérieure correspond au retrait minimal souhaité avant l’élément;
  2. la marge inférieure correspond au retrait minimal souhaité après l’élément.

Voici par exemple un code CSS simple qui exploite ce mécanisme, pour obtenir des espaces harmonieux entre les paragraphes:

<code>h1, h2, h3, h4, h5, h6 {      margin-top: 1.5em;  /* soit 150% de la taille du texte */      margin-bottom: .5em;  /* ...50% de la taille du texte */  }  ul, ol, p {      margin-top: .75em;      margin-bottom: .75em;  }</code>

Avec ce code, on utilise un retrait identique avant et après les contenus «simples» (paragraphes, listes), pour qu’ils s’enchainent de manière régulière. Par contre, on souhaite que les titres soient éloignés des contenus qui les précèdent, et pas trop éloignés des contenus qui les suivent, vu que chaque titre décrit les contenus qui le suivent.

Fusion des marges entre un élément et son parent

La fusion des marges ne se limite pas aux éléments frères (par exemple deux paragraphes qui se suivent), mais s’applique aussi aux éléments parents et enfants (par exemple un paragraphe dans un conteneur div).

Exemple simple de fusion des marges enfant—parent

Si nous plaçons un paragraphe avec des marges inférieures et supérieures dans un élément div:

<code>&lt;div style="background: skyblue; margin: 10px;"&gt;      &lt;p style="background: red; margin: 50px;"&gt;          Un paragraphe (fond rouge)      &lt;/p&gt;  &lt;/div&gt;</code>

Nous obtenons le résultat suivant:

Un paragraphe (fond rouge)

Que constate-t-on? Les marges verticales du paragraphe, au lieu de créer un espace vide entre les bords du div et ceux du paragraphe, fusionnent avec les marges verticales du div. Le retrait au-dessus du div sera donc de 50 pixels, au lieu de 10 pixels.

Ce comportement est normal, même s’il peut être surprenant.

Exemple avec un texte qui fait obstacle à la fusion des marges

Notons que la fusion des marges ne se produit que pour la marge supérieure du premier enfant et la marge inférieure du dernier enfant d’un bloc. De plus, si le bloc contient du texte au début ou à la fin, la fusion des marges ne se produit pas. C’est ce que démontre l’exemple suivant:

<code>&lt;div style="background: skyblue; margin: 10px;"&gt;      Ce div a un fond bleu ciel.      &lt;p style="background: red; margin: 50px;"&gt;          Un paragraphe (fond rouge)      &lt;/p&gt;      &lt;p style="background: red; margin: 50px;"&gt;          Un deuxième paragraphe      &lt;/p&gt;  &lt;/div&gt;</code>

Ce qui nous donne:

Ce div a un fond bleu ciel.Un paragraphe (fond rouge)

Un deuxième paragraphe

Seule la marge inférieure du dernier paragraphe fusionne avec la marge du conteneur (élément div). Les marges entre les deux paragraphes fusionnent entre elles pour donner un retrait de 50 pixels.

Fusion des marges sur plusieurs niveaux

Si rien ne l’empêche, le mécanisme de fusion des marges peut jouer sur plusieurs niveaux:

Un paragraphe (fond rouge)

Parent du paragraphe

Grand-père du paragraphe

Arrière-grand-père du paragraphe

Dans cet exemple, la marge supérieure du paragraphe (50px) fusionne avec la marge supérieure du bloc vert (10px), qui fusionne avec la marge supérieure du bloc rose (10px), qui à son tour fusionne avec la marge supérieure du bloc bleu (10px). Au final, on n’a qu’une marge unique de 50 pixels!

Empêcher la fusion des marges entre parent et enfant

Dans certains cas, la fusion des marges n’est pas souhaitable. C’est surtout le cas pour les conteneurs et leurs éléments enfants: une marge qui s’applique au mauvais niveau peut «casser» l’affichage d’une page web.

1. Avec du padding

La technique la plus simple pour éviter la fusion des marges entre un élément et son parent est d’utiliser du padding sur l’élément parent. Reprenons notre premier exemple de fusion entre parent et enfant:

<code>&lt;div style="background: skyblue; margin: 10px;      padding: 1px 0;"&gt;      &lt;p style="background: red; margin: 50px;"&gt;          Un paragraphe (fond rouge)      &lt;/p&gt;  &lt;/div&gt;</code>
On a juste rajouté un pixel de padding en haut et en bas de notre <code>div</code> conteneur. Et là, magie, plus de fusion des marges:

Un paragraphe (fond rouge)

Utilisez du padding (et notamment la déclaration padding: 1px 0;) dès que vous avez besoin d’empêcher une fusion de marges. Vous pouvez aussi l’utliser de manière préventive pour vos principaux conteneurs. Ce n’est pas une solution miracle, mais le padding fera l’affaire dans 95% des cas.

2. Avec des bordures (propriété border)

Les bordures ont le même effet que le padding:

<code>&lt;div style="background: skyblue; margin: 10px;      border: 1px solid blue;"&gt;      &lt;p style="background: red; margin: 50px;"&gt;          Un paragraphe (fond rouge)      &lt;/p&gt;  &lt;/div&gt;</code>
Un paragraphe (fond rouge)

3. Avec un contexte de formatage (propriété overflow)

La notion de contexte de formatage est définie ici: Float, clear et contextes de formatage – qu’est-ce qu’un contexte de formatage ?.

L’utilisation d’un contexte de formatage, via la propriété overflow et les valeurs auto ou hidden, empêche la fusion des marges.

<code>&lt;div style="background: skyblue; margin: 10px;      overflow: hidden;"&gt;      &lt;p style="background: red; margin: 50px;"&gt;          Un paragraphe (fond rouge)      &lt;/p&gt;  &lt;/div&gt;</code>

Un paragraphe (fond rouge)

Cette solution est intéressante, mais a d’autres conséquences (empêche le dépassement des flottants, peut cacher les contenus qui dépassent ou faire apparaitre des barres de défilement). À utiliser avec prudence.

Note: si vous utilisez déjà un overflow: hidden; pour empêcher le dépassement des flottants, cela aura pour effet «secondaire» d’empêcher la fusion des marges également.

4. Avec les principales propriétés de positionnement

Les marges des éléments flottants, positionnés en absolu ou en fixe, ne fusionnement pas. Dans la pratique, on ne va pas utiliser le positionnement absolu ou flottant pour empêcher la fusion des marges, mais il peut être utile de savoir que, lorsque vous utilisez ces types de positionnement, la fusion des marges entre le bloc positionné et ses enfants ne se produira pas.

Dans certains cas, cette absence de fusion des marges peut être gênante. Par exemple, si on crée deux colonnes avec deux éléments div, où seul le premier est flottant:

Colonne de gauche (flottante). Un premier paragraphe.

Et un deuxième paragraphe.

Colonne de droite. Un premier paragraphe.

Et un deuxième paragraphe.

Un paragraphe simple placé juste avant les deux colonnes suivantes.

Colonne de gauche (flottante). Un premier paragraphe.

Et un deuxième paragraphe.

Colonne de droite. Un premier paragraphe.

Et un deuxième paragraphe.

On voit que dans les deux cas (colonnes en haut et en bas), les marges des paragraphes sont contenues par le bloc flottant (en rose), mais pas par le deuxième bloc (en bleu, non flottant). Dans le premier cas, les blocs ne sont pas à la même hauteur, mais les textes sont alignés; dans le deuxième cas, les blocs sont au même niveau mais les textes ne sont plus alignés.

Pour obtenir un rendu plus égal, il faudra donc: soit faire flotter les deux blocs, soit empêcher la fusion des marges dans les deux cas, par exemple avec un padding: 1px 0;.

Note: le rendu de cet exemple n’est pas correct dans Internet Explorer 6 et 7. C’est dû à un bug polymorphe d’Internet Explorer (jusqu’à sa version 7), qui tend à faire disparaitre purement et simplement certaines marges. Pour voir le rendu correct, utilisez Firefox, Safari, Opera, ou encore Internet Explorer 8.

Fusion des marges, Internet Explorer et HasLayout

Le HasLayout est un mécanisme propre au moteur de rendu de Internet Explorer jusqu’à sa version 7. Il est décrit dans l’article suivant: L’étrange HasLayout de Monsieur Internet Explorer

Dans Internet Explorer 6 et 7 notamment, conférer le layout à un élément empêche la fusion des marges entre parent et enfant. Par contre, cela n’empêche pas la fusion des marges entre éléments frères.

Dans l’exemple suivant, l’élément div et les deux paragraphes ont tous le layout, via la déclaration zoom: 1. Les paragraphes ont des marges de 50px.

Un paragraphe

Un deuxième paragraphe

Dans Internet Explorer 6 ou 7, on constate que la fusion des marges a bien lieu entre les deux paragraphes (on a bien un écart de 50 pixels), mais pas entre les paragraphes et leur conteneur.

Note: le mécanisme de HasLayout n’existe plus dans Internet Explorer 8. Ce problème ne se présente donc plus.

Catégorie : WEBMASTERING | Commenter