28172 sujets

CSS et mise en forme, CSS3

Marges images selon le float présent dans le HTML (script ?... CSS ?)

Bonjour,

Mon problème est tout simple : les rédacteurs du site vont pondre des articles avec des images positionnées soit à gauche, soit à droite dans les paragraphes. dans le code HTML, la différence ne se verra que par l'attribut "float=xxx" de la balise image. Je n'ai pas le choix là dessus.

Moi je voudrais que selon si l'image est à gauche ou à droite, je puisse dire quelle marge gauche ou droite mon CSS doit appliquer. Or, un fichier CSS ne sait pas tester la propriété float de l'image.

Connaissez-vous une astuce ou un script js pour régler ça ?
Salut,


.gauche{
float: left;
margin-left: ce que tu veux
}

.droite{
float: right;
margin-right: ce que tu veux
}

<img src="mon_image.jpg" alt="mon image" class="droite" />


ça doit le faire Nan ?
Ce que tu propose le fait si je pouvais changer la manière dont ma page html est écrite. Sauf que dans mon cas, non. c'est une simple balise img , sans class, sans rien, juste avec l'attribut float:xxxx .

Smiley decu Une idée ?
Re,

Détail qui à son importance ... Smiley lol je me disais aussi!

img{
margin: 0 20px 0 20px;
}

En espérant que les autres images puissent être stylées
Oui, sauf que quand elle est à gauche, je ne veux pas de marge à gauche, et quand elle est à droite, c'est l'inverse. En fait, les valeur des marges doivent dépendre de l'attribut float du code html. Et là, il me semble que seul un script peut en venir à bout. non ?
Re,

A part demander à revoir le moteur de rendu pour les IEs, FF, Opera etc concernant le float et ce n'est pas gagné d'avance Smiley cligne , je ne vois pas un script capable de modifier une balise non stylé dans le code.
Mais bon ce n'est que mon avis.
Si, un script peut facilement tester la valeur de float et modifier celles de margin en conséquences. Mais bon. Pas très robuste, tout ça. On en fait pas de bonnes choses en se servant mal des outils (ici, pas de classe).
Modifié par Laurent Denis (11 Mar 2008 - 18:12)
Brouillon de piste:
		
	function margesLaterales() {

		var aImgs,marginValue,iI,j;

		aImgs = document.getElementsByTagName('img');
		marginValue = '20px';

		for (iI=0; iI<aImgs.length; iI++) {	
			j = aImgs[iI].getAttribute('style');
			(j=='float:right')
			? aImgs[iI].style.marginLeft=marginValue
			: aImgs[iI].style.marginRight=marginValue;
		};

	}

	window.onload=function() {margesLaterales();}
Effectivement c'est un excellent début !

Mas je m'apperçois très logiquement qu'il applique ça a toutes les images de la page... la solution serait alors à mon avis de simplement ajouter un nom de class par exemple "aligndroite" ou "aligngauche" grace à ton code, et ensuite, c'est dans mon CSS que tout aura été prévu pour n'agir sur les marges que dans tel ou tel conteneur.

Sauf que... comment ajoute-t-on un nom de classe en javascript ?
Vinc26 a écrit :
agir sur les marges que dans tel ou tel conteneur.

Tu peux englober le contenu au sein duquel les images doivent bénéficier de ces marges dans une division "conteneur".
Il te suffira de n'agir que sur les images comprises dans ce div, dans le style:

		function margesLaterales() {

			var [#darkred]oConteneur[/#],aImgs,marginValue,iI,j;

			[#darkred]oConteneur = document.getElementById('conteneur');[/#]
			aImgs = [#darkred]oConteneur[/#].getElementsByTagName('img');
			marginValue = '20px';

			for (iI=0; iI<aImgs.length; iI++) {	
				j = aImgs[iI].getAttribute('style');
				(j=='float:right')
				? aImgs[iI].style.marginLeft=marginValue
				: aImgs[iI].style.marginRight=marginValue;
			};

		}

		window.onload=function() {margesLaterales();}
Et voilà ! Ca marche ! J'ai simplement du modifier un tout petit peu ton truc :

 getAttribute('style')


est devenu

 getAttribute('align')


et ensuite je teste si c'est "left" ou "right"

MERCI !!!
Je me disais aussi, un éditeur «WYSIWYG» qui écrit du code avec style="float:left", j'en ai pas vu des masses.

Pour info, à partir du moment où c'est l'attribut align qui est utilisé on pourrait utiliser le sélecteur d'attribut directement dans la feuille de styles:
#content img[align=left] {
	margin: 5px 20px 5px 0;
}
#content img[align=right] {
	margin: 5px 0 5px 20px;
}

Ça marche dans IE7 et tous les navigateurs récents. Seul IE6 (et à fortiori le presque décédé IE5) ne supporte pas ce type de sélecteur.

Exemple de page de test utilisant ce principe:
<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
	body {
		width: 500px;
		margin: 50px auto;
		font-family: Verdana, sans-serif;
		font-size: .8em;
	}
	img[align=left] {
		margin: 5px 20px 5px 0;
	}
	img[align=right] {
		margin: 5px 0 5px 20px;
	}
	</style>
</head>

<body>

<h1>Un titre</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>

<img src="http://www.covertprestige.net/blog/images/2008/mediapart-info.png" align="left" alt="" />

<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>

<img src="http://www.covertprestige.net/blog/images/2008/mediapart-info.png" align="right" alt="" />

<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.</p>

<p>Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.</p>

<img src="http://www.covertprestige.net/blog/images/2008/mediapart-info.png" align="left" alt="" />

<p>Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
<p>Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p>

</body>
</html>


Du coup l'utilisation d'un script JS n'est nécessaire que pour IE6, et on pourra n'appeler ce script que pour ce navigateur via un commentaire conditionnel.
En effet ! Très intéressant. Je vais regarder ce que je préfère.

A propos de fichier .js, bizzarement, ça ne fonctionne que si je mets le code directement dans le head de la page html. Si je fais appel à ce même code dans un fichier externe .js, ça ne fonctionne plus dutout. T'as une idée d'où ça viens ?

Le code complet en question :

function margesLaterales() {

	var oConteneur,aImgs,marginValue,iI,j;

	oConteneur = document.getElementById('main');
	aImgs = oConteneur.getElementsByTagName('img');
	marginValue = '10px';
	for (iI=0; iI<aImgs.length; iI++) {	
		j = aImgs[iI].getAttribute('align');
		if (j=='right') {
			aImgs[iI].style.marginLeft=marginValue;
		} else if (j=='left') {
			aImgs[iI].style.marginRight=marginValue;
		}
	};

}

window.onload=function() {margesLaterales();}
Sujet clos
Aller à