[css] padding "negatif"

Version imprimable

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:

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:

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

10/06/2006, 17h15
Swoög

et ton problème est ?
10/06/2006, 17h19
gorgonite

Citation:

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...
10/06/2006, 17h20
Kerod

Tu es sur que c'est pas un probleme de margin tout simplement ?
et le css de ton span n'est pas là :(
10/06/2006, 17h21
Swoög

et alors ? qu'est-ce qui t'empêche de faire un padding négatif... je ne comprends vraiment pas ton problème... :mouarf:
10/06/2006, 17h23
Kerod

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...
10/06/2006, 17h27
Swoög

Et je ne vois pas où est le problème... :mouarf:
Il suffit d'utiliser (il le dit lui-même) un padding (ou un margin) négatif
10/06/2006, 17h30
gorgonite
Citation:

Envoyé par Swoög

Et je ne vois pas où est le problème... :mouarf:
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:

1 2 3 <div class="gorgonsection"><div><span class="padd">Articles<a name="articles"></a></span><div><div>   </div></div></div></div>
et pour le span
Code:

1 2 3 4 5 #gorgon .padd { font-size: 15pt; padding: 15px; margin: 0px; }
10/06/2006, 17h34
Swoög

Citation:

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) ;)

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:

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">   </div> <div>
CSS :
Code:

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]

10/06/2006, 17h50
Kerod

Exact pour la modification ca fonctionne parfaitement.

Mais tu peux aussi enlenver le padding-top à 5px
10/06/2006, 17h54
Loceka

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.

Citation:

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:

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 :cry:

10/06/2006, 18h07
Swoög

pour les margin négatives je suis plus surpris déjà, avec quel navigateur tests-tu ? (personnellement, j'ai vérifié, :lol:) 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 ;)
10/06/2006, 18h40
gorgonite

Citation:

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 :cry:

bon c'est fait... avec vos conseils ;)

pour la page

Code:

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:

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 ;)

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:

1 2 3 4 5 6 7 <div> <div> <div>   // ou autre </div> </div> </div>
alors qu'un seul "div" suffirait.

Ainsi, pour ton fond, tu peux faire :
Code:

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" />  <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.

11/06/2006, 10h24
gorgonite

Citation:

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...