[css] padding "negatif"

**gorgonite** · 10/06/2006, 17h07

Salut,

Je souhaiterais faire un padding "négatif" afin de faire disparaitre le petit trait blanc en dessous des blocs en bleu

voilà le code :

Code :

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

1
2
3
4
5
<div class="gorgonsection"><div>
<span class="padd">Articles<a name="articles"></a></span>
<div><div>
&nbsp;
</div></div></div></div>

avec cette css

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
.gorgonsection {
	background: transparent url(./images/blue_top_left.png) no-repeat top left;
	margin-top: 30px;
	padding: 0px;
	width: auto;
}
 
.gorgonsection div {
	background: transparent url(./images/blue_top_right.png) no-repeat top right;
	padding-top: 5px;
	color: #ffffff;
}
 
.gorgonsection div div {
	background: transparent url(./images/grey_bottom_left.png) no-repeat bottom left;
	padding: 0px;
	margin: 0px;
}
 
.gorgonsection div div div {
	background: transparent url(./images/grey_bottom_right.png) no-repeat bottom right;
	text-align: left;
	border: 0px solid #cccccc;
	color: #000000;
	padding: 15px;
}

voilà l'url :
http://gorgonite.developpez.com/

Merci par avance

**Swoög** · 10/06/2006, 17h15

et ton problème est ?

**gorgonite** · 10/06/2006, 17h19

Envoyé par gorgonite

Je souhaiterais faire un padding "négatif" afin de faire disparaitre le petit trait blanc en dessous des blocs en bleu

déjà dit...

**Kerod** · 10/06/2006, 17h20

Tu es sur que c'est pas un probleme de margin tout simplement ?
et le css de ton span n'est pas là

**Swoög** · 10/06/2006, 17h21

et alors ? qu'est-ce qui t'empêche de faire un padding négatif... je ne comprends vraiment pas ton problème...

**Kerod** · 10/06/2006, 17h23

Je vais répondre à sa place...Il a deux blocs qui doivent etre l'un contre l'autre...Or c'est pas le cas vu qu'il y a un espace entre les deux et donc il veut retirer l'espace...

**Swoög** · 10/06/2006, 17h27

Et je ne vois pas où est le problème...

Il suffit d'utiliser (il le dit lui-même) un padding (ou un margin) négatif

**gorgonite** · 10/06/2006, 17h30

Envoyé par Swoög

Et je ne vois pas où est le problème...

Il suffit d'utiliser (il le dit lui-même) un padding (ou un margin) négatif

mais ça ne validera pas... selon Firebug

@Kerod: voilà sans les espaces

Code :

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

1
2
3
<div class="gorgonsection"><div><span class="padd">Articles<a name="articles"></a></span><div><div>
&nbsp;
</div></div></div></div>

et pour le span

Code :

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

1
2
3
4
5
#gorgon .padd {
	font-size: 15pt;
	padding: 15px;
	margin: 0px;
}

**Swoög** · 10/06/2006, 17h34

Envoyé par gorgonite

mais ça ne validera pas... selon Firebug

arf, exact.... les padding négatifs sont interdits (au temps pour moi, sincèrement)

par contre les margin négatifs sont autorisés (je viens de vérifier dans la doc histoire de pas dire de connerie supplémentaire)

**Loceka** · 10/06/2006, 17h48

J'ai déjà eu ce problème (posté sur ce forum d'ailleurs ^^) et c'était dû à une mauvaise gestion de la hauteur de ligne.

Il faut que tu spécifies un "line-height" de la hauteur de ta police (10 pt par exemple). Seulement je ne crois pas que ce soit possible directement sur ton code parce que ton imbrication de "div" est pour le moins... peu orthodoxe.

Si tu fais ça, ça marche :

HTML :

Code :

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

1
2
3
4
5
6
7
8
<div class="gorgonsection">
   <div class="gorgonsection_titre">
      <span class="padd">Articles<a name="articles"></a></span>
   </div>
   <div class="gorgonsection_info">
      &nbsp;
   </div>
<div>

CSS :

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
gorgonsection_titre {
background: transparent url(http://gorgonite.developpez.com/images/blue_top_right.png) no-repeat top right;
padding: 0px;
margin: 0px;
line-height : 10pt;
padding-top: 5px;
color: #ffffff;"
}

gorgonsection_info {
background: transparent url(http://gorgonite.developpez.com/images/grey_bottom_left.png) no-repeat bottom left;
padding: 0px;
margin: 0px;"
}

[edit]
Je ne comprends pas non plus pourquoi tu utilises une balise "a" comme ancre au lieu de le faire avec un attribut "ID"...
[/edit]

**Kerod** · 10/06/2006, 17h50

Exact pour la modification ca fonctionne parfaitement.

Mais tu peux aussi enlenver le padding-top à 5px

**Loceka** · 10/06/2006, 17h54

Oui, je viens de voir que la taille de police était en fait de 15pt et l'image de 10px.

Le mieux serait de mettre une taille de police de 10px et un line-height de 10px, tout en supprimant le padding-top, comme le dit Kerod.

**gorgonite** · 10/06/2006, 18h03

Envoyé par Swoög

arf, exact.... les padding négatifs sont interdits (au temps pour moi, sincèrement)

par contre les margin négatifs sont autorisés (je viens de vérifier dans la doc histoire de pas dire de connerie supplémentaire)

en effet, w3c me jette méchamment

Code :

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

1
2
3
4
5
URI : http://gorgonite.developpez.com/accueil.css
 
    * Ligne: 50 Contexte : #gorgonmenu div div
 
      Propriété érronée : padding-top Les valeurs négatives de -1.0 ne sont pas autorisées : -1px

les margin négatives passent... mais ça marche pas

**Swoög** · 10/06/2006, 18h07

pour les margin négatives je suis plus surpris déjà, avec quel navigateur tests-tu ? (personnellement, j'ai vérifié,

) je les ai déjà utilisé sous IE, FF et Opéra sans problème... s'ils ont l'air de ne pas fonctionner, ça vient peut-être d'ailleurs, dans ce cas, regarde la solution de Loceka

**gorgonite** · 10/06/2006, 18h40

Envoyé par Loceka

Je ne comprends pas non plus pourquoi tu utilises une balise "a" comme ancre au lieu de le faire avec un attribut "ID"...

c'est fait... je ne savais tout simplement pas que ça marchait aussi
(mon truc, c'est plutôt le mode console... donc le côté webdesign, je connais juste les bases du css2)

le seul truc potable que j'ai fait est http://www.ensta.fr/~clubinfo/new/
c'est pour te dire que ça craint

**gorgonite** · 10/06/2006, 18h50

bon c'est fait... avec vos conseils

pour la page

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
<?php echo "<!-- debut accueil perso  -->"; ?>
 
<div id="gorgon">
 
<div class="centre"><div id="gorgontitle">
Zone d'hébergement du Gorgonite
</div></div>
 
 
<div class="centre"><div class="gorgonsection">
<div id="gorgonmenu">
<div class="gorgon_menu1"><div class="gorgon_menu2"><div class="gorgon_menu3"><div class="gorgon_menu4">
<a href="#faq">FAQ</a>&nbsp;&nbsp;|&nbsp;&nbsp;
</div></div></div></div>
</div>
</div></div>
 
 
<div class="gorgonsection" id="faq">
<div class="gorgon_titre1"><div class="gorgon_titre2">
<span class="padd">FAQ</span>
</div></div>
<div class="gorgon_info1"><div class="gorgon_info2">
&nbsp;
</div></div>
</div>
 
 
</div>
 
 
<?php echo "<!--  fin de accueil perso  -->"; ?>

et pour la css

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
#gorgon { 
	margin-top: 50px;
	padding-left: 5%;
	padding-right: 5%;
}
 
#gorgontitle {
	font-size: 30pt;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
}
 
#gorgon .centre {
	text-align: center;
}
 
#gorgon .padd {
	padding: 15px;
	margin: 0px;
}
 
#gorgon .engras {
	font-weight: bold;
}
 
#gorgon span.section {
	font-size: 15pt;
	text-decoration: underline;
}
 
div.gorgonsection {
margin-top: 30px;
}
 
#gorgonmenu {
	width: 60%;
	margin-top: 80px;
	margin-right: auto;
	margin-left: auto;
}
 
div.gorgon_menu1 {
background: transparent url(./images/grey_top_left.png) no-repeat top left;
padding: 0px;
margin: 0px;
}
 
div.gorgon_menu2 {
padding: 0px;
margin: 0px;
padding-top: 5px;
background: transparent url(./images/grey_top_right.png) no-repeat top right;
}
 
div.gorgon_menu3 {
background: transparent url(./images/grey_bottom_left.png) no-repeat bottom left;
padding: 0px;
margin: 0px;
}
 
div.gorgon_menu4 {
background: transparent url(./images/grey_bottom_right.png) no-repeat bottom right;
padding: 5px;
margin: 0px;
}
 
 
div.gorgon_titre1 {
background: transparent url(./images/blue_top_left.png) no-repeat top left;
padding: 0px;
margin: 0px;
}
 
div.gorgon_titre2 {
padding: 0px;
margin: 0px;
padding-top: 5px;
color: #ffffff;
line-height : 15pt;
font-size: 15pt;
background: transparent url(./images/blue_top_right.png) no-repeat top right;
}
 
div.gorgon_info1 {
background: transparent url(./images/grey_bottom_left.png) no-repeat bottom left;
padding: 0px;
margin: 0px;
}
 
div.gorgon_info2 {
background: transparent url(./images/grey_bottom_right.png) no-repeat bottom right;
padding: 15px;
margin: 0px;
}

si vous voyez des choses à améliorer... n'hésitez pas

**Loceka** · 11/06/2006, 00h00

Encore une fois, l'inclusion de "div" est bizarre. Bon, il faut avouer que ça marche très bien, ce qui est déjà pas mal en HTML !

Mais je n'ai jamais vu de code de la sorte :

Code :

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

1
2
3
4
5
6
7
<div>
   <div>
      <div>
         &nbsp; // ou autre
      </div>
   </div>
</div>

alors qu'un seul "div" suffirait.

Ainsi, pour ton fond, tu peux faire :

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
// CSS :
.titre {
   background: transparent url(./images/grey_top.png) repeat-y;
   /* grey_top.png est une image de 10px de haut sur 1px de large représentant juste une bande bleue. */
   padding: 0px;
   margin: 0px;
}

.img_gauche {
   float : left;
}

.img_droite {
   float : right;
}

.spacer { sert à éviter les bugs d'affichage normalement, mais j'ai jamais testé, donc ça peut ne pas s'utiliser comme ça...
   clear : both;
}


// HTML :
<div class="titre" id="ton_titre">
   <img class="img_gauche" src="blue_top_left.png" /> <!-- cette image est similaire à celle que tu utilises actuellement pour le bord droit -->
   <span class="padd">ton_titre</span>
   <img class="img_droite" src="blue_top_right.png" />
   <span class="spacer"></span>
</div>

Cette façon de faire est plus propre, du moins c'est celle que l'on retrouve le plus souvent.

Edit : en effet, ça marche pas... autant pour moi, j'avais pas testé. Mais bon, c'est l'esprit quand même, ne pas trop multiplier les div.

**gorgonite** · 11/06/2006, 10h24

Envoyé par Loceka

Cette façon de faire est plus propre, du moins c'est celle que l'on retrouve le plus souvent.

ça ne marche pas du tout...

[css] padding "negatif"

CSS

Partager

Partager