Espace indésirable sous les images

Question

Jazou

28 Dec 2010 à 21:15

Je suis en train de réaliser mon premier site web et je bloque sur la gestion des div...

Pour me rendre compte de la position de mes div dans la page, j'ai divisé le background en 6 images. Pour reconstituer le puzzle, j'ai besoin de pouvoir redimensionner les images contenues dans les div et de supprimer la marge qui apparait en dessous.

Malgré que ce problème soit récurent et à priori facile à régler (grâce à un vertical-align: bottom ou encore un display: block;) aucune de ces solutions n'a fonctionné chez moi Smiley decu

Je n'arrive pas non plus à redimensionner mes images (le width:100%; fonctionne pourtant très bien tant qu'elles sont hors des div)...

En espérant que quelqu'un m'aidera à trouver la solution, je joint mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>J.Gomes | Portfolio</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style media="screen">
 
	body {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	
	#div1 {
	z-index: 1;
	border: 0px solid #CCCCCC;
	position: relative;
	}
	
	#1 {
	position: absolute;
	z-index: 0;
	vertical-align: bottom;
	width: 100%;
	overflow: visible;
	}
	
	#div2 {
	z-index: 2;
	border: 1px solid #CCCCCC;
	position: relative;
	width: 100%;
	}
	
	#2 {
	position: absolute;
	z-index: 0;
	width: 100%;
	overflow: visible;
	}
	
	#div3 {
	z-index: 3;
	border: 1px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#3 {
	position: absolute;
	z-index: 0;
	width: 27%;
	overflow: visible;
	}
	
	#div4 {
	z-index: 3;
	border: 1px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#4 {
	position: absolute;
	z-index: 0;
	width: 12%;
	overflow: visible;
	}
	
	#div5 {
	z-index: 3;
	border: 1px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#5 {
	position: absolute;
	z-index: 0;
	width: 30%;
	overflow: visible;
	}
	
	#div6 {
	z-index: 3;
	border: 1px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#6 {
	position: absolute;
	z-index: 0;
	width: 100%;
	overflow: visible;
	}
	
 </style>
</head>

<body>
	
	<div id="div1">
		<img id="1" alt="" src="1.png" />
	</div>
	<div id="div3">
		<img id="3" alt="" src="3.png" />
	</div>
	<div id="div4">
		<img id="4" alt="" src="4.png" />
	</div>
	<div id="div5">
		<img id="5" alt="" src="5.png" />
	</div>
	<div id="div6">
		<img id="6" alt="" src="6.png" />
	</div>
	<div id="div2">
		<img id="2" alt="" src="2.png" />
	</div>
	
</body>

</html>

Modifié par Jazou (29 Dec 2010 - 11:55)

Mabelle

28 Dec 2010 à 22:44

Bonjour, voici peut-être une piste à suivre:
Espaces sous les images

position: absolute; ne sert à rien sans top, bottom, right ou left.

Raphael

Administrateur

28 Dec 2010 à 22:53

Hello,

C'est une énorme coïncidence mais ton titre de sujet correspond au mot près à l'astuce correspondante, que tu aurais pu trouver en faisant une recherche Smiley cligne

http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html

Bonne chance Smiley smile

Jazou

28 Dec 2010 à 23:30

L'astuce devait être ouverte dans un onglet quand j'ai nommé mon sujet, c'est justement parce que je n'y ait pas trouvé de réponse que je suis venue poster ici, ou plutôt il est possible qu'elle y soit mais comment l'appliquer à mon cas Smiley sweatdrop

? J'ai essayé sans succès de changer le comportement de mes images puis leur alignement vertical mais ça n'a rien donné Smiley confus

oliviadox

29 Dec 2010 à 00:18

Hello...
Il me semblait qe les espaces sous les images à régler à coup de vertical align étaient surtout dans le cas de tableaux.

Ici ce sont des divs et peut être qu'un simple

*{ 
margin:0; 
padding:0;
}

pourrait suffire à régler ce problème (il ne me semble pas en avoir vu dans le code au dessus). Après j'ai lu vite fait... Smiley lol

A+

oliviadox

29 Dec 2010 à 00:25

Et pour le width 100%, ça fonctionne bien quand pas dans des div j'imagine que dans ce cas, les images prennent toute la place disponible (donc s'étirent sur tout l'écran) alors que dans des divs, ça prend toute la place disponible... DE LA DIV Smiley cligne

Vu que la div est remplie par une image (et qu'une div s'adapte en général à son contenu), si ta div est à 100% alors elle occupe la largeur de l'image.

Je sais pas si je suis très claire mais en tout cas bon courage !

Jazou

29 Dec 2010 à 00:31

Ce n'est pas un problème de marges puisque ça ne concerne que le dessous de l'image, je crois que ça vient du fait qu'elle soit considérée comme un caractère de texte, d'ailleurs j'ai résolu mon problème moi même pendant que je répondais en mettant un font-size:0; dans le body { }
merci !

edit :

oliviadox a écrit :
Et pour le width 100%, ça fonctionne bien quand pas dans des div j'imagine que dans ce cas, les images prennent toute la place disponible (donc s'étirent sur tout l'écran) alors que dans des divs, ça prend toute la place disponible... DE LA DIV cligne

Vu que la div est remplie par une image (et qu'une div s'adapte en général à son contenu), si ta div est à 100% alors elle occupe la largeur de l'image.

Je sais pas si je suis très claire mais en tout cas bon courage !

J'ai compris ce que tu voulais dire mais est-ce qu'il est possible de changer les dimension d'une image en fonction de la page quand elle se trouve à l'intérieur d'une div ?
Modifié par Jazou (29 Dec 2010 - 00:34)

oliviadox

29 Dec 2010 à 01:58

font-size=0 n'est pas une bonne idée car le alt ne s'affichera pas correctement.Dans ce cas un display:block ou encore inline-block sur tes images devrait fonctionner. Tu as une page en ligne pour voir ce qui coince ? Pour les dimensions j'ai pas tout compris... Tu peux appliquer un redimensionnement à tes images en pixel ou pourcentage mais il est conseillé de les mettre directement à la bonne dimension. Si tu expliques ou montres par une image ce que tu veux obtenir je pourrais peut être t'aider Smiley cligne

Et désolé pour le texte tout collé mais j'arrive pas à sauter une ligne quand j'écris cette réponse !?!

Raphael

Administrateur

29 Dec 2010 à 07:40

A vrai dire il y a plusieurs problèmes dans ta structure, qu'il faudrait peut-être résoudre auparavant :
- quel est l'intérêt de tes éléments <div> dans cette page ? S'ils ne servent qu'à contenir un seul élément (<img>), autant se contenter des img
- les id commençant par un chiffre (#1 par exemple) ne sont pas autorisés avant HTML5

Et pour finir, le lien vers l'astuce que je t'ai donné fonctionne très bien, je viens de tester avec un display: block sur les images et les espaces disparaissent Smiley cligne

Modifié par Raphael (29 Dec 2010 - 07:44)

Jazou

29 Dec 2010 à 11:08

En fait il faut impérativement que je redimensionne mes images en pourcentage par rapport à ma page car le but de l'opération était de faire une page qui s'adapte à toutes les résolutions.
Voici ce que j'aimerais obtenir :
http://img4.hostingpics.net/pics/770120Sanstitre5.jpg
L'image complète occuperait 100% de la largeur de la fenêtre.

Raphael, comme je l'ai expliqué dans mon premier message j'ai débarrassé les div de leur contenu pour y voir plus clair pour l'instant, le rôle des images ici est de redimensionner correctement les div. Il est évident que ma page ne contiendra pas qu'une image (dans ce cas autant appliquer l'image directement sans la découper).

Je n'ai pas changé l'id des images car cela mettait ma page sans dessus dessous, je ne comprends pas pourquoi Smiley ohwell

Voici mon code avec les display-block qui ne fonctionnent pas.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>J.Gomes | Portfolio</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
 <style media="screen">
 
	body {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	
	#div1 {
	z-index: 1;
	border: 0px solid #CCCCCC;
	position: relative;
	}
	
	#1 {
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 0;
	vertical-align: bottom;
	width: 100%;
	overflow: visible;
	}
	
	#div2 {
	z-index: 2;
	border: 0px solid #CCCCCC;
	position: relative;
	width: 100%;
	}
	
	#2 {
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 0;
	width: 100%;
	overflow: visible;
	}
	
	#div3 {
	z-index: 3;
	border: 0px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#3 {
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 0;
	width: 27%;
	overflow: visible;
	}
	
	#div4 {
	z-index: 3;
	border: 0px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	
	#4 {
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 0;
	width: 12%;
	overflow: visible;
	}
	
	#div5 {
	z-index: 3;
	border: 0px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#5 {
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 0;
	width: 30%;
	overflow: visible;
	}
	
	#div6 {
	z-index: 3;
	border: 0px solid #CCCCCC;
	position: relative;
	float: left;
	}
	
	#6 {
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 0;
	width: 100%;
	overflow: visible;
	}
	
	
 </style>
 

 
 
</head>

<body>
	
	<div id="div1">
		<img id="1" alt="" src="1.png" />
	</div>
	<div id="div3">
			<img id="3" alt="" src="3.png" />
		</div>
	<div id="div4">
		<img id="4" alt="" src="4.png" />
	</div>
	<div id="div5">
		<img id="5" alt="" src="5.png" />
	</div>
	<div id="div6">
		<img id="6" alt="" src="6.png" />
	</div>
	<div id="div2">
		<img id="2" alt="" src="2.png" />
	</div>
	
</body>

</html>

Modifié par Jazou (29 Dec 2010 - 11:54)

oliviadox

29 Dec 2010 à 14:31

A mon avis tu t'y prends mal pour définir la structure de ta page. A ce que j’en vois, le but est d’obtenir une image de fond en largeur fluide avec un conteneur central qui a un effet de cadre rectangulaire aux coins arrondis reprenant l’image de fond.

La question est de savoir si tu veux que ton effet de cadre central s’étire lui aussi en largeur ou ait une largeur fixe. Le plus simple serais t’intégrer ton image en une seule fois en tant qu’image de fond (en css sur body par exemple) et de faire une div qui centrera ton contenu reprenant en image de fond l’image de l’effet de cadre en transparence (si tu as fait cet effet sur photoshop il doit être séparé sur un autre calque auquel cas tu enregistre les 2 images séparément).

Après pour un truc pixel perfect qui ne modifie pas l’arrondi des angles de l’effet de cadre il te faudrait dans l’idéal découper ton image ‘effet de cadre en transparence’ pour l'intégrer :
- soit en plusieurs images avec les 4 coins et bordures séparés pour un cadre étirable en tout sens largeur et hauteur,
- soit en 3 images pour un cadre étirable seulement en hauteur :
1. Une image pour le haut avec les 2 coins et ligne supérieurs,
2. Une image du bas avec les 2 coins et ligne inférieurs,
3. Une image pour les bordures droite et gauche qui se répétera sur y pour s’adapter à la taille de ton contenu uniquement en hauteur.

Le design et le zoning / découpage en div d’un site web doit être plutôt basé sur le contenu que sur l’image de fond, après il est toujours possible de rajouter des div uniquement pour la forme Smiley cligne

Il faudrait savoir ce que tu veux faire précisément, si tu a une image sans « structure » en transparence ça serait plus simple pour voir quel effet tu souhaite vraiment, et surtout quelles parties doivent pouvoir s’adapter au contenu ? Uniquement le cadre central ? En largeur ? En hauteur ? Ce sont les questions que tu dois te poser pour faire ta structure proprement. Bonne chance !

oliviadox

29 Dec 2010 à 14:33

Et pour les id si tu les change dans le css il faut bien sur penser à les changer dans le code html Smiley lol

Sujet clos

CSS et mise en forme, CSS3

Espace indésirable sous les images