[RESOLU] Problème d'ajustement sur IE

J'ai redimenssionné mes photos pour en faire des vignettes.
Une fois mises en place, je m'aperçois des pb de débordements.
Je clique droit sur l'une d'entre elle pour l'enregistrer. Et je m'aperçois que la photo enregistrée est de dimension différente de celle qui a servie pour le site!!!

Je ne comprend pas ce pb. C'est très gênant dans la mesure où je veux placer ces photos dans des <div> dimensionné pour les contenir.

Comment faire?
Modifié par brunocaccio (11 Jul 2005 - 12:00)

une petite url de test ?

J'aimerais placer des photos au centre de cadres avec une marge de 10px pour chaque côté.

Les photos ont une résolution de 130x97px. Alors j'ai fabriqué des cadres de 150x117px de cette manière :

.paysage, .portrait {
	height: 117px;
	width: 150px;
	
	float: left;
	margin: 5px;	
	border: 1px solid #fff;	
}
.paysage {	
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;		
}
.portrait {
	padding-top: 10px;	
	padding-left: 29px;
	padding-right: 29px;		
}

L'ennui est qu'il surdimenssionne les cadres (172x129px). Alors pour réajuster, j'ai mis une résolution de 130x107px. Et là, les photos sont bien centrées sauf pour les portraits.
Mais pourquoi donc, il me change la résolution des cadres?

C'est simple, les paddings et le border sont ajoutés aux largeur et hauteur car ton image n'est pas contenue dans quelque chose de taille définie.
Exemple:
Si tu fait une div 100X100px avec padding de 10px ta div mesurera 120px.
Si tu fait une div 100X100px et que tu mets dedans un paragraphe avec padding de 10px ta div mesurera 100px. Les paddings ne s'étendront pas car ils sont "bridés" par la taille de la div.
Donc, ce n'est pas vraiment dans css qu'il y à problème mais dans html :
il faut <div><p><img /></p></div> et non <div><img /></div>

Une url ! Une url ! Une url !

(Qu'on y comprenne enfin quelque-chose)



(Aureance : ça m'a l'air déjà assez obscur comme cela. Es-tu sûr que l'intervention des <p>...</p> va éclaircir la chose ? J'ai comme un doute, là. Sans compter que cela n'a aucun rapport et que l'ajout d'un élément parent ne changera rien au bidule, à par le complexificationer.</>
Modifié par Laurent Denis (10 Jul 2005 - 14:11)

Merci de vos interventions!
J'ai partiellement résolu le pb!

.cadre {
	width: 170px;
	height: 119px;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;	
}
.paysage, .portrait {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	float: left;		
}
.paysage {
	margin-left: 10px;	
	background:url(paysage.png) 0 0 no-repeat;
}
.portrait {
	margin-left: 39px;	
	background:url(portrait.png) 0 0 no-repeat;
}

Effectivement, le pb était le padding. Maintenant, c'est mieux.
En revanche, l'affichage n'est pas correcte sur IE :
Les portraits ne sont pas centrés,
le cadre centrale qui contient la galerie ne garde pas la couleur de haut en bas.

http://brunocaccio.ifrance.com
Modifié par brunocaccio (10 Jul 2005 - 18:38)

a écrit :
Laurent Denis
(Aureance : ça m'a l'air déjà assez obscur comme cela. Es-tu sûr que l'intervention des <p>...</p> va éclaircir la chose ? J'ai comme un doute, là. Sans compter que cela n'a aucun rapport et que l'ajout d'un élément parent ne changera rien au bidule, à par le complexificationer.</>

Oui, j'en suis certain car ( je répète et c'est simple ) le padding s'ajoute au conteneur si celui ci n'est pas dans un autre conteneur de taille précise.
Fais l'expérience d'une div 100X100px + padding placée directement dans body, dans ce cas le padding s'ajoutera aux 100px.
Puis, toujours dans body, une autre div 100X100px sans padding contenant un paragraphe qui aura du padding. Dans ce cas la div conservera ses 100px et le padding jouera uniquement pour le paragraphe.

<edit> J'ajoute un exemple en ligne pour me faire bien comprendre.
Modifié par Aureance (10 Jul 2005 - 23:41)

Sur Firefox, les différents cadres (header, menu, centre, pied) sont bien ajustés. Sur IE, c'est du brouillon :
la couleur du centre (frame) ne va pas jusqu'en bas,
les titres et les textes dans le centre (frame) sont invisibles.

Je ne vois pas où est le pb. Voici la feuille de style :

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;	
	background:url(./Images/fond.png) 0 0 no-repeat;
	color: #FFFFFF;	
	margin: 0;
	padding: 0;			
}
#conteneur {
	position: absolute;
	width: 750px;
	height: auto;	
	background:url(./Images/conteneur.png) 0 0 no-repeat;
	left: 50%;
	margin-left: -375px;
	border: 1px solid #000;
}
#frame {	
	background:url(./Images/frame.png) 0 0 no-repeat;
	margin-left: 150px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	overflow: auto;	
}
.cadre {
	width: 170px;
	height: 119px;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;	
}
.paysage, .portrait {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;		
}
.paysage {
	margin-left: 10px;	
	background:url(./Images/paysage.png) 0 0 no-repeat;
}
.portrait {
	margin-left: 39px;
	margin-right: 39px;	
	background:url(./Images/portrait.png) 0 0 no-repeat;
}
#header {
	height: 75px;	
	background:url(./Images/banniere.png) 0 0 no-repeat;
	font-size: 30px;
	color: #FFCC99;
	font-weight: bold;
	text-align: center;
}
#gauche {
	position: absolute;
	left:0;
	width: 150px;
	padding-left: 1px;	
}
#pied {
	height: 30px;
	background-color: #000000;
	font-size: 12px;	
}
#aDroite {
	float: right;
	width: 300px;
	text-align: right;		
}

p {
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 15px;
	text-align: justify;
}

a:link {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent; 
}
a:hover {
	color: #FFFF00;
	text-decoration: underline;
	background-color: transparent;
}
a:active {
	color: #99CC00;
	text-decoration: underline;
	background-color: transparent;
}

img {
	border: 1px solid #fff;
}
h3 {
	color: #000099;
}
h4 {
	color: #FFCC99;
}

.menugauche {
	list-style-type: none;
	font-size: 11px;
	margin: 0;
	padding:0;	
}
.menugauche li {
	margin-bottom: 5px;	
}

Voici un exemple de page où se trouve une galerie de photos :

<html>
	
<head>
	<link rel="stylesheet" type="text/css" href="style_sheet.css" />
</head>

<body>
	
	<h3>Randonnée à Domène en Octobre 2003</h3>
	
	<p><?php include("gallerie_domene.txt");?></p>
	
	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_01.htm"><img src="./03_10_12_Domene/01_vignette.jpg"></a>
</div></div>

	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_02.htm"><img src="./03_10_12_Domene/02_vignette.jpg"></a>
</div></div>	

	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_03.htm"><img src="./03_10_12_Domene/03_vignette.jpg"></a>
</div></div>

	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_04.htm"><img src="./03_10_12_Domene/04_vignette.jpg"></a>
</div></div>
	
	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_05.htm"><img src="./03_10_12_Domene/05_vignette.jpg"></a>
</div></div>	

	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_06.htm"><img src="./03_10_12_Domene/06_vignette.jpg"></a>
</div></div>

	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_07.htm"><img src="./03_10_12_Domene/07_vignette.jpg"></a>
</div></div>
	
	<div class="cadre"><div class="paysage">
<a href="./03_10_12_Domene/photo_08.htm"><img src="./03_10_12_Domene/08_vignette.jpg"></a>
</div></div>
		
</body>

</html>

http://brunocaccio.ifrance.com
Modifié par brunocaccio (11 Jul 2005 - 11:11)

Aureance a écrit :

Oui, j'en suis certain car ( je répète et c'est simple ) le padding s'ajoute au conteneur si celui ci n'est pas dans un autre conteneur de taille précise.

Non, pas du tout
Dans le modèle de boîte standard, le padding d'un élément s'ajoute dans tous les cas à sa largeur spécifiée par la propriété width. En d'autres termes, la largeur visible d'un élément est la somme de sa largeur spécifiée, de ses padding latéraux (et de ses bordures latérales). Le fait que l'élément soit placé ou non dans un conteneur n'y change rien.

Ton exemple n'a pas de rapport avec ce que tu souhaites montrer, car dans un cas tu appliques le padding à l'élément enfant, et dans l'autre cas à l'élément parent. Ce n'est donc pas le même padding qui se "comprime dans la forme" ou qui "s'exprime au-delà de la forme" : ce sont deux padding différents appliqués à deux éléments différents

Pour un exemple pertinent, prends un paragraphe p {width: 300px; padding: 0 50px}, et compare son comportement selon qu'il est ou non placé dans un élément conteneur div {width: 300px;} : le comportement est identique, fort heureusement pour la cohérence de CSS2
Modifié par Laurent Denis (11 Jul 2005 - 08:22)

Au delà du débat animé par nos amis Laurent Denis et Aureance, qqn pourrait-il me donner une piste au pb que j'ai soulevé, à savoir, une différence d'affichage entre Firefox et IE.

Le cadre central (fait par le div "frame") n'est pas colorié jusqu'au pied de page. C'est comme si les photos mis dans le frame n'étaient pas pris en compte.

Dans la page index.php, il y a :

<div id="conteneur">
		<div id="header">Souvenirs, souvenirs...</div>	
		<div id="gauche">
			<p></p><p>
	  	
			<ul class="menugauche">			
				<li><a href="index.php?page=accueil">Accueil</a></li>
				<li><img src="./Images/separateur_menu.png"></li>
				<li><a href="index.php?page=gallerie_musique_03">Fête de la musique 2003</a></li>
				<li><a href="index.php?page=gallerie_musique_05">Fête de la musique 2005</a></li>
				<li><a href="index.php?page=gallerie_sassenage">Rando à Sassenage</a></li>
				<li><a href="index.php?page=gallerie_domene">Rando à Domène</a></li>
				<li><a href="index.php?page=gallerie_ski">Ski à Lans en Vercors</a></li>
				<li><img src="./Images/separateur_menu.png"></li>
				<li><a href="index.php?page=liens">Liens</a></li>
			</ul>
		</div>
		<div id="frame">
			<?php include("menu.inc.php");?>
		</div>	
		<div id="pied">			
			<div id="aDroite"><?php include("liens.inc.php");?></div>
			Mise à jour : 10/07/2005
			<div>Créé le : 26/06/2005</div>
		</div>
	</div>

J'ai donné un exemple de page de galerie et la feuille de style dans mon précédent post.

Hello,

Rapidement (je n'ai pas tout suivi à la discussion), n'est-ce pas le problème résolu dans le point de FAQ suivant ?
http://forum.alsacreations.com/faq/#item6

Ouiiiiiii, c'est exactement ça!
Il fallait rajouter dans la feuille de style un spacer :

.spacer {
	clear: both;
}

Et insérer ce spacer dans chacune des galeries, après la dernière photo, autrement dit, après le dernier flux flottant.

Et pour faire afficher le titre et le texte d'intro de chaque galerie, il fallait rajouter position: relative dans la feuille de style :

p {
	position: relative;
}
h3 {
	position: relative;
	color: #000099;
}

Merci Raphaël! Tu m'enlèves une épine du pied!
Modifié par brunocaccio (11 Jul 2005 - 11:59)

a écrit :
Laurent Denis
Pour un exemple pertinent, prends un paragraphe p {width: 300px; padding: 0 50px}, et compare son comportement selon qu'il est ou non placé dans un élément conteneur div {width: 300px;} : le comportement est identique, fort heureusement pour la cohérence de CSS2

Oui, oui. C'est exactement le contraire que je démontre dans cet exemple. ( mis plus haut en lien ) Je crois que tu as oublié d'en faire l'expérience par toi même.
Expansion et compression du padding

Aureance a écrit :
Laurent Denis
Pour un exemple pertinent, prends un paragraphe p {width: 300px; padding: 0 50px}, et compare son comportement selon qu'il est ou non placé dans un élément conteneur div {width: 300px;} : le comportement est identique, fort heureusement pour la cohérence de CSS2

Oui, oui. C'est exactement le contraire que je démontre dans cet exemple. ( mis plus haut en lien ) Je crois que tu as oublié d'en faire l'expérience par toi même.
Expansion et compression du padding

Ma foi, je n'en ai jamais fait l'expérience que quelques milliers de fois depuis quelques années, et lorsque je me permets de dire à quelqu'un qu'il se trompe, c'est en ayant malgré cela re-vérifié et refait la manip

Pour "démontrer" que :

Aureance a écrit :

Oui, j'en suis certain car ( je répète et c'est simple ) le padding s'ajoute au conteneur si celui ci n'est pas dans un autre conteneur de taille précise.

... il faut comparer le comportement d'un élément doté de padding (un paragraphe) , dans deux cas:
- dans un conteneur de taille déterminée
- sans conteneur ou dans un conteneur sans taille déterminée

Or ton exemple compare :
- un paragraphe avec padding dans un conteneur de taille déterminée
- et un paragraphe sans padding dans un conteneur doté, lui de padding : quel est le rapport avec le problème posé ?
Modifié par Laurent Denis (11 Jul 2005 - 20:14)

a écrit :
Laurent Denis
Or ton exemple compare :
- un paragraphe avec padding dans un conteneur de taille déterminée
- et un paragraphe sans padding dans un conteneur doté, lui de padding : quel est le rapport avec le problème posé ?

Le rapport est que si tu regardes son code tu vois qu'il à créé deux sortes de div ( paysage et portrait ) dotées d'un padding tournant de 10px et qu'a l'intérieur il place ses images. il posait la question de savoir pourquoi les cotes qu'il donnait se trouvaient amplifiées. Il imaginait qu'une div ayant une taille fixe bien définie avec un padding non moins défini gardait sa taille et offrait en son sein une surface d'accueil réduite par la taille du padding.
J'ai répondu que non, le padding ne se retranche pas mais s'ajoute s'il est appliqué à une dimension ou une balise libre de contrainte. Pour qu'il ait un effet de rétraction, il doit être (le padding) appliqué à une balise sans indications de taille contenue dans une autre balise qui elle à une taille.
C'est pourquoi je disais que le padding s'étendait au dela s'il n'était pas contenu ( contraint à ne pas dépasser les limites )
Je ne trouvais pas idiote sa question car on parle souvent de "marges intérieures" pour désigner les paddings. Il va de soit ( sauf en css ) qu'une marge intérieure n'est pas extérieure. Imaginons une affiche ayant un bord tournant et qu'il faille ajouter des planches autour du panneau pour coller le papier ou que l'allée entourant un jardin doive empiéter chez le voisin .
Pour terminer, un court extrait d'un de mes posts sur MacBidouille :
"Certains disent qu'il faut absolument éviter le padding, bien souvent; c'est parce qu'ils n'ont pas compris comment il agit suivant qu'il est appliqué au conteneur ou au contenu"
Comme quoi ce que tu dis rejoint parfaitement... ce que je dis.

A propos, vu qu'il n'utilise pas d'images d'arrière plan ( ombre portée par exemple ) dans ses div mais de simples couleurs; il aurait dû utiliser des bordures de 10px au lieu d'en créér l'illusion avec du padding.
Modifié par Aureance (11 Jul 2005 - 23:53)

Aureance a écrit :
Laurent Denis
Or ton exemple compare :
- un paragraphe avec padding dans un conteneur de taille déterminée
- et un paragraphe sans padding dans un conteneur doté, lui de padding : quel est le rapport avec le problème posé ?

Le rapport est que si tu regardes son code...

je ne parle pas du code de ce pôvre brunocaccio, à qui tout ceci est totalement inutile, mais du code de la page d'exemple que tu m'as assené deux fois dans ce fil et une fois en privé

Mais laissons plutôt tomber cette très sombre histoire

Laurent Denis a écrit :

Mais laissons plutôt tomber cette très sombre histoire

C'est poutant clair comme histoire !
Salut.

Qu'est-ce qu'il a mon code? Il est normal mon code.

C'est vrai que j'aurais pu utiliser des bordures de 10px pour reprendre Aureance. J'ai fait justement des paddings dans le but d'utiliser par la suite une image frangée comme fond d'arrière plan pour chacune des photos. Ce que j'ai fait était un essai comme tous les essais que l'on peut faire quand on code! Et comme mon souhait était de centrer ces photos en utilisant des paddings, je m'étais confronté au pb soulevé par Aureance. D'ailleurs, je remercie Aureance pour ses explications fortes utiles pour la suite. Il est vrai que vu comme ça, les choses sont plus compréhensibles, quoique pas très logiques mais on n'y peut rien.

Maintenant, nous pouvons clore le dossier une bonne fois pour toute .