Positionner des images

**ludojojo** · 15/09/2009, 17h18

Bonjour,
J'ai pas mal tourné sur le forum mais sans trouvé réellement ce que je voulais...

J'ai une page web contenant deux images, centrées dans la largeur.
Jusque là aucun pb !

En revanche j'aimerais qu'elles ne soient pas collées mais un peut écarter de façon à rendre cela plus esthétique.
J'aimerais aussi si possible positionner un texte juste au dessus de chacune de mes images.

voici mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en">
	<head>
		<title>DL @coss</title>
		<link rel="stylesheet" type="text/css" href="./design.css" title="default" media="screen" />
		<style type="text/css" media="screen,print"> 
		</style>
	</head>
	<body>
		<div class="center">
			<a href="http://monsite"><img src="./image1.png" /></a>
			<a href="http://monsite"><img src="./image2.png" /></a>
		</div>
	</body>
</html>

Voici mon code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.center 
{
	margin-top:150px ;
	text-align:center;
	padding: 100px
}
img
{
	border:0;
}

Merci par avance pour votre aide.

**12monkeys** · 15/09/2009, 19h22

Bonsoir

Pour séparer les images l'une de l'autre suffit d'utiliser padding ou margin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
img {
	border:0;
        padding : 10px;
}

Pour le texte au dessus des images, il faut voir si tu as des tailles d'images fixes ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  <div class="center">
    <div>
      <p>texte</p>
      <p>texte</p>
    </div>
    <a href="http://monsite"><img src="./fond.jpg" /></a>
    <a href="http://monsite"><img src="./fond.jpg" /></a>
  </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
p {
    display : inline;
    padding:0 200px;
}

**ludojojo** · 16/09/2009, 12h13

Ce code est parfait !
J'ai juste un petit soucis que je n'avais vu de prime abord... J'ai un logo qui est placé dans la partie supérieure de ma page, comment puis-je faire pour que celui-ci ne soit pas affecter par ce changement ?
Je souhaiterais qu'il reste collé tout en haut de mon écran !

**12monkeys** · 16/09/2009, 19h40

On peut voir le code avec le logo...

**ludojojo** · 17/09/2009, 11h20

Bien sur ! Voici le code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en">
	<head>
		<title>DL</title>
		<link rel="stylesheet" type="text/css" href="./design.css" title="default" media="screen" />
		<style type="text/css" media="screen,print"> 
		</style>
	</head>
	<body>
		<div class="logo">
			<img src="./logo.gif" padding="0px"/>
		</div>
 
 
		<div class="center">
			<div>
				<p>Déposer un fichier</p> 
				<p>/</p>
				<p>télécharger un fichier</p>
			</div>
			<div clas="images">
				<a href="monurl/index.html"><img src="./upload.png" /></a>
				<a href="monurl/index.html"><img src="./download.png" /></a>
			</div>
		</div>
		<div class="liens">
			<a href="monurl">Retour</a>
		</div>
	</body>
</html>

Merci par avance.

**12monkeys** · 17/09/2009, 18h51

En fait l'attribut padding pour l'élément img n'existe pas, si tu veux supprimer le padding fais ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="...." style="padding:0px" />

Ou encore mieux, mettre ce style dans un fichier css à part.

Pour le logo, en fait je n'avais pas compris ton problème...

C'est en fait ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
img {
	border:0;
        padding : 10px;
}

qui influe sur toutes tes images. Il te suffit de jouer sur la cascade :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div.images img {
	border:0;
        padding : 10px;
}

Qui n'attribuera ce style qu'aux éléments se trouvant dans la div pour laquelle est attribuée une classe de nom 'images'

Positionner des images

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager