28172 sujets

CSS et mise en forme, CSS3

Bonjour,

voici mon code HTML



	<div class="marginl150 floatl dislpayin">
		<img src="images/enveloppe_48_48.png">
	</div>



et voici mon CSS




.marginl150
{
margin-left:150px;
border:none;
}


 
.floatl
{
  float:left;
}


.displayin
{
display:inline;
}



Malgré le display inline, j'ai une différence de marge en FF et IE, la marge est plus grande sur IE6...
Bonjour.
La page possède-t-elle un DOCTYPE ?

Et petite remarques en passant : le display: inline; ne semble pas utile ici. Et pourquoi ne pas simplement regrouper toutes ces propriétés dans une seule et même classe ?
- Quitte à appliquer des classes, pourquoi ne pas les appliquer directement sur ton IMG ?
- Il manque un alt="" et une fermeture de balise /> à ton IMG.
- Sinon tu peux tenter de regrouper toute cette portion de code sur une seule ligne, sans espace entre les balises. C'est plus chiant à lire mais sous IE ça peut jouer.
Modifié par Ziltoid (28 Apr 2010 - 16:57)
Voici mon doctype



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >



ben, si je les regroupe dans une même class, ça va changer le comportement ?
Ok pour le DocType. En général peu importe lequel, l'essentiel est d'en avoir un (et bien écrit évidemment).
J'ai testé en appliquant tes classes directement sur l'image et ça corrige le problème.
Ha oui effectivement ça marche...

Par contre je ne comprends pas il n'aime pas les class cumulées...

je trouvait ça très pratique...

je pensais que ça fonctionnait tout le temps...

Il va falloir que je me méfie.

Merci.
Je pense que tu utilises les "class cumulées" à mauvais escient.

Ici tu fais pratiquement ta mise en forme dans ton HTML. Tu aurais mis :
<img src="truc.gif" style="margin-left:150px;border:none;float:left;display:inline" alt="" />

ça serait revenu au même... Smiley confus

Tu dois créer une class CSS par "type d'objet" (ex: images pour tel contenu, images du footer, etc.).