Un padding CSS

Logyin · 24/10/2011, 13h50

Bonjour tout le monde.

Comme indiqué dans le titre j'ai un problème sur un padding que j'essaye de régler mais toutes mes tentatives sont veines. J'ai donc besoin d'un petit coup de pouce!

Code :

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

1
2
3
4
<li id="gourd">
		<h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3>
		<p>Gourds were the earliest plant species domesticated by humans and were originally used by man as containers or vessels before clay or stone pottery, and is sometimes referred to as 'nature's pottery'. The original and evolutional shape of clay pottery is thought to have been modeled on the shape of certain gourd varieties.</p>
	</li>

Voici mon html, je souhaite ajouter un padding de 0.5em sur l'ensemble mais pas sur l'image. Donc dans mon css j'ai fait :

Code :

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

1
2
3
4
5
6
7
8
 
li#gourd {
	padding: 0.5em;
}
 
li#gourd img{
	padding: 0em;
}

Mais ça ne fonctionne pas. J'obtiens ceci:

La première image de la deuxième ligne est légérement décalée sur la droite alors que je voudrais qu'elle soit alignée comme les autres.

J'espère avoir été assez clair.

Merci de votre aide, bonne journée.

NoSmoking · 24/10/2011, 18h48

Bonjour,
un peu plus de code de l'enchainement, conteneur des tes images ne serait pas de refus.

Un petite remarque néanmoins sur cette ligne

Code :

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

<h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3>

le H3 dans un LI ???? cela me paraît moyen !

Logyin · 25/10/2011, 09h15

Bonjour,

Merci de votre réponse.
Voici le reste du 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" media="all" href="css/init.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/layout.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/typoColor.css" />
<title>Presentation d'une liste</title>
 
 
 
</head>
 
<body>
 
<ul>
 
	<li id="pomegranate">
		<h3><a href="#pomegranate"><img src="images/1-1.jpg" alt="" />Pomegranate</a></h3>
		<p>The Pomegranate (Punica granatum) is a fruit-bearing deciduous shrub or small tree growing to 5-8 m tall. The pomegranate is believed to have originated in eastern Iran and eastward, but its true native range is not accurately known because of millennia of extensive cultivation.</p>
	</li>
 
	<li id="carrot">
		<h3><a href="#carrot"><img src="images/1-2.jpg" alt="" />Carrot</a></h3>
		<p>The carrot (Daucus carota) is a root vegetable, usually orange or white in color with a woody texture. The edible part of a carrot is a taproot. It is a biennial plant which grows a rosette of leaves in the spring and summer while building up the stout taproot, which stores large amounts of sugars for the plant to flower in the second year.</p>
	</li>
 
	<li id="onion">
		<h3><a href="#onion"><img src="images/1-3.jpg" alt="" />Onion</a></h3>
		<p>Onion in the general sense can be used for any plant in the genus Allium but used without qualifiers usually means Allium cepa, also called the garden onion. Onions (usually but not exclusively the bulbs) are edible with a distinctive strong flavour and pungent odour which is mellowed and sweetened by cooking.</p>
	</li>
 
	<li id="gourd">
		<h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3>
		<p>Gourds were the earliest plant species domesticated by humans and were originally used by man as containers or vessels before clay or stone pottery, and is sometimes referred to as 'nature's pottery'. The original and evolutional shape of clay pottery is thought to have been modeled on the shape of certain gourd varieties.</p>
	</li>
 
	<li id="strawberry">
		<h3><a href="#strawberry"><img src="images/1-5.jpg" alt="" />Strawberry</a></h3>
		<p>The strawberry (Fragaria) is a genus of plants in the family Rosaceae, and the fruit of these plants. There are more than 20 named species and many hybrids and cultivars. The most common strawberries grown commercially are cultivars of the Garden strawberry, a Fragaria ananassa hybrid. Strawberries are a valuable source of vitamin C. See Garden Strawberry for information about the fruit as a food.</p>
	</li>
 
	<li id="lily">
		<h3><a href="#lily"><img src="images/1-6.jpg" alt="" />Lily</a></h3>
		<p>Lilies are native to the northern temperate regions. Their range in the Old World extends across much of Europe, the north Mediterranean, across most of Asia to Japan, south to the Nilgiri mountains in India, and south to the Philippines. In the New World they extend from southern Canada through much of the United States. </p>
	</li>
 
	<li id="fig">
		<h3><a href="#fig"><img src="images/1-7.jpg" alt="" />Fig</a></h3>
		<p>A fig fruit is derived from a specially adapted flower. The fruit (an accessory fruit called a syconium) has a bulbous shape with a small opening (the ostiole) in the end and a hollow area inside lined with small red edible seeds. The fruit/flower is pollinated by small wasps that crawl through the opening to fertilise the fruit.</p>
	</li>
 
	<li id="wine">
		<h3><a href="#wine"><img src="images/1-8.jpg" alt="" />Wine</a></h3>
		<p>Wine is an alcoholic beverage produced by the fermentation of the juice of fruits, usually grapes. Although a number of other fruits - such as plum, elderberry and blackcurrant - may also be fermented, only grapes are naturally chemically balanced to ferment completely without requiring additional sugars, acids, enzymes or other nutrients. Non-grape wines are called fruit wine or country wine.</p>
	</li>
 
	<li id="bean">
		<h3><a href="#bean"><img src="images/1-9.jpg" alt="" />Bean</a></h3>
		<p>Bean originally meant the seed of the broad bean, but was later broadened to include members of the genus Phaseolus such as the common bean or haricot and the runner bean and the related genus Vigna. The term is now applied in a general way to many other related plants such as soybeans, peas, lentils, vetches and lupins.</p>
	</li>
</ul>
 
</body>
</html>

Et le css pour le layout :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
ul {
	width: 520px;
	margin: auto;
	padding-top: 510px;
	position: relative;
	}
 
 
#pomegranate img{
	position: absolute;
	top: 0px;
}
 
#carrot img{
	position: absolute;
	top:0;
	left: 170px;
}
 
#onion img{
	position: absolute;
	top:0;
	left:340px;
}
 
#gourd img{
	position: absolute;
	top: 170px;
}
 
#strawberry img {
	position: absolute;
	top: 170px;
	left: 170px;
}
 
#lily img{
	position: absolute;
	top: 170px;
	left: 340px;
}
 
#fig img {
	position: absolute;
	top:340px;
}
 
#wine img {
	position: absolute;
	top: 340px;
	left: 170px;
}
 
#bean img {
	position: absolute;
	top: 340px;
	left: 340px;
}
 
h3, p {
	display: inline;
}
 
li#gourd img{
	padding: 0em;
}
 
li#carrot, li#lily, li#wine, li#gourd {
	padding: 0.5em;
}
 
li#gourd img{
	padding: 0em;
}

C'est un exercice de cours pour nous faire travailler le positionnement absolu, ce qui explique pourquoi il y en a partout ^^.

Pour le h3 dans le Li, ce fichier nous a été donné par notre prof, mais c'est une mauvaise méthode? Car c'est la deuxième fois qu'on l'utilise.

Merci

kirua99 · 25/10/2011, 15h34

Bonjour,

Pourquoi n'utilisez vous pas un tableau ?
vos images seront disposer et pour faire un padding par la suite

Logyin · 25/10/2011, 15h50

Bonjour,
Car dans l'énoncé de l'exercice, nous devons utiliser le positionnement ^^

kirua99 · 25/10/2011, 16h08

ah je vois.
Sinon tu utilises une classe dans tes balises image

tu pourrais te concentrer sur le css sur ta classe image

NoSmoking · 25/10/2011, 18h41

il y a moyen de factoriser tout cela, mais bon

concernant ton problème il te faut sûrement mettre à zéro du padding qui peut être différent suivant les navigateurs

Code :

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

1
2
3
4
5
6
7
ul {
  width: 520px;
  margin: auto;
  padding:0;            /* mise a 0 pour tous*/
  padding-top: 510px;
  position: relative;
}

cela devrait le faire.

http://css.developpez.com/faq/?page=...ltiples_styles, le reste est très loin d'être inintéressant

Logyin · 25/10/2011, 19h09

Merci de vos réponses je vais essayer de modifier tout ça.

Avez vous des conseils à me donner sur mon code? Autant prendre les bonnes habitudes dès le début.

J'avais également le question, peut-on exclure en css? Par exemple, appliquer cette règle sur toutes les images sauf celle avec la classe exclu.

J'ai fait des recherches mais je n'ai pas trouvé, donc je ne pense pas que ce soit possible.

Bonne soirée, merci.

NoSmoking · 25/10/2011, 19h57

Citation:

Avez vous des conseils à me donner sur mon code? Autant prendre les bonnes habitudes dès le début.

Lire les tutos http://css.developpez.com/cours/

Citation:

J'avais également le question, peut-on exclure en css? Par exemple, appliquer cette règle sur toutes les images sauf celle avec la classe exclu.

tu peux le faire par un moyen détourné, exemple

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.image {
  width : 200px;
  height : 200px;
  border : 1px solid blue;
}
.exclu {
  border : 1px solid red;
  height : 300px;
}
</style>
</head>
<body>
<div>
  <img class="image" src="image_1.jpg" alt="image #1">
  <img class="image exclu" src="image_2.jpg" alt="image #2">
  <img class="image" src="image_3.jpg" alt="image #3">
</div>
</body>
</html>

Logyin · 25/10/2011, 20h11

Ok merci pour vos réponses!

Mais pouvez vous m'expliquer pourquoi la padding modifie également l'image que dans le css ce n'est pas indiqué?

NoSmoking · 25/10/2011, 22h42

plusieurs remarques sur ton code
- lorsque l'on met des éléments en position absolute, les faire sortir du flux donc, il est nécessaire de maitriser ce que l'on fait, initialisation par défaut par exemple.

- toutes les images en absolute devraient avoir une initialisation du left et du top, ce qui pourrait être réalisé comme suit

Code :

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

1
2
3
4
5
6
img {
  margin : 0;
  padding : 0;
  left : 0;
  top : 0;
}

- le positionnement d'un élément en absolu ce fait par rapport au premier élément parent positionné

- j'aurais peut être fait ceci

Code html :

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

1
2
3
4
5
6
 
<a href="#gourd"><img src="images/1-4.jpg" alt="" /></a>
<li id="gourd">
  <h3>Gourd</h3>
  <p>Gourds were the earliest plant species domesticated by humans and were originally used by man as containers or vessels before clay or stone pottery, and is sometimes referred to as 'nature's pottery'. The original and evolutional shape of clay pottery is thought to have been modeled on the shape of certain gourd varieties.</p>
</li>

mais rien n'est moins sûr !!!!!

24/10/2011, 18h48	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, un peu plus de code de l'enchainement, conteneur des tes images ne serait pas de refus. Un petite remarque néanmoins sur cette ligne Code : Sélectionner tout - Visualiser dans une fenêtre à part <h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3> le H3 dans un LI ???? cela me paraît moyen !
	00

25/10/2011, 15h34	#4
kirua99 Membre du Club Sebastien Inscription : janvier 2011 Messages : 76 Détails du profil Informations personnelles : Nom : Sebastien Informations forums : Inscription : janvier 2011 Messages : 76 Points : 50 Points : 50	Bonjour, Pourquoi n'utilisez vous pas un tableau ? vos images seront disposer et pour faire un padding par la suite
	00

25/10/2011, 15h50	#5
Logyin Invité de passage Inscription : janvier 2011 Messages : 11 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 11 Points : 1 Points : 1	Bonjour, Car dans l'énoncé de l'exercice, nous devons utiliser le positionnement ^^
	00

25/10/2011, 16h08	#6
kirua99 Membre du Club Sebastien Inscription : janvier 2011 Messages : 76 Détails du profil Informations personnelles : Nom : Sebastien Informations forums : Inscription : janvier 2011 Messages : 76 Points : 50 Points : 50	ah je vois. Sinon tu utilises une classe dans tes balises image tu pourrais te concentrer sur le css sur ta classe image
	00

25/10/2011, 19h09	#8
Logyin Invité de passage Inscription : janvier 2011 Messages : 11 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 11 Points : 1 Points : 1	Merci de vos réponses je vais essayer de modifier tout ça. Avez vous des conseils à me donner sur mon code? Autant prendre les bonnes habitudes dès le début. J'avais également le question, peut-on exclure en css? Par exemple, appliquer cette règle sur toutes les images sauf celle avec la classe exclu. J'ai fait des recherches mais je n'ai pas trouvé, donc je ne pense pas que ce soit possible. Bonne soirée, merci.
	00

25/10/2011, 20h11	#10
Logyin Invité de passage Inscription : janvier 2011 Messages : 11 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 11 Points : 1 Points : 1	Ok merci pour vos réponses! Mais pouvez vous m'expliquer pourquoi la padding modifie également l'image que dans le css ce n'est pas indiqué?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email