Héritage CSS d'un texte dans class="divbox"

Version imprimable

Bonjour,

Je rencontre un problème d’héritage dans mon codage CSS pour gérer séparément la présence d’un texte dans un cadre contenant une image fixée au centre … (Dessin d’une diapositive)

En fait :
1- Fixer l’image au centre de la class divbox pour qu’elle ne bouge pas en présence ou absence de texte au dessus ou au dessous de l'image dans cette même divbox.
2- Gérer séparément la position du texte haut et bas. Par exemple à droite au dessus et centré en dessous…

Où se trouve ma bévue ?

Merci pas avance !

Code 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
 /*
#tablebox {
	margin: 5px;
}
*/
.divbox {
	text-align: center; 
	height: 180px;
	width: 180px;
	border-radius: 8px;
	background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
}
 
.divbox b {
	color: #0000ff;
	font-weight: normal;
}
 
.divbox img {
	/* position: relative; */
	vertical-align:middle;
	max-width:160px;
	max-height:107px;
	border: 1px solid #777;
	box-shadow: inset 1px 1px 5px 1px #000000;
}
 
 
/* Gestion des liens */
 
a.Exif:link {
	text-align: right;
	text-decoration: none; /* lien non souligné - class Exif */
	color: black;
	font-weight: bold;
	background-color: #FFFFCC;
}
 
a.Exif:hover {
	text-align: right;
	text-decoration: none; /* lien non souligné - class Exif */
	color: red;
	font-weight: bold;
	background-color: #FFFFCC;
}

Code HTML "simplifié" mettant en évidence le problème…

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css" />
</head>
<body>
<td><table id="tablebox"><tr>
<td class="divbox"><a href="#"><img src="1.jpg" alt="MyDia"></a><b>AAAAMMJJ&nbsp;&nbsp;&nbsp;</b><a class="Exif" href="'+ UrlExif +'">[EXIF]</a></td>
<td class="divbox"><a class="Exif" href="'+ UrlExif +'">[EXIF]</a><a href="#"><img src="1.jpg" alt="MyDia"></a><b>AAAAMMJJ&nbsp;&nbsp;&nbsp;</b></td>
<td class="divbox"><a href="#"><img src="1.jpg" alt="MyDia"></a><b>AAAAMMJJ</b></td>
</tr></table>
</body>
</html>

07/03/2014, 19h52
rodolphebrd
Bonjour,

S'il s'agit dans le cas présent de cibler le deuxième élément alors un nth-of-type fera l'affaire.
Code:

1 2 .divbox:nth-of-type(2) a.Exif{ text-align: right; }
Il serait intéressant d'utiliser le modèle tabulaire et non un tableau.
Et de placer les textes dans des balises P de même que de définir les liens (textes) en display: block;
http://codepen.io/anon/pen/fcAig
07/03/2014, 21h08
jpe54

Bonsoir,

Merci beaucoup pour cette commande CSS que je ne connaissais pas et qui répond à la problématique d'isoler le texte.

Reste 1 point : L'image ne reste pas parfaitement centrée (figée) dans le conteneur divbox du moins dans le sens horizontal...

Ah oui en effet...

Je pense qu'on peut repasser un tableau pour ne pas trop se casser la tête. :aie:

http://codepen.io/anon/pen/BlzqE

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table id="tablebox">  <col  class="divbox" />
  <col  class="divbox" />
  <col  class="divbox"/>
  <thead>
   <tr>
  <td class=""></td>
  <td class="bord"><a class="Exif droite" href="'+ UrlExif +'">[EXIF]</a><a href="#"></td>
  <td class=""><a href="#"></td>
 </tr>
   <tr>
  <td class="frame"><a href="#"><img src="http://lorempixel.com/food/50/50" alt="MyDia"></a></td>
  <td class="frame bord"><a href="#"><img src="http://lorempixel.com/food/50/50" alt="MyDia"></a></td>
  <td class="frame"><a href="#"><img src="http://lorempixel.com/food/50/50" alt="MyDia"></a></td>
 </tr>
   <tr>
  <td class=""><b>AAAAMMJJ&nbsp;&nbsp;&nbsp;</b><a class="Exif " href="'+ UrlExif +'">[EXIF]</a></td>
  <td class="bord"><b>AAAAMMJJ&nbsp;&nbsp;&nbsp;</b></td>
  <td class=""><b>AAAAMMJJ</b></td>
 </tr>
</thead>
</table>

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
table{  text-align: center;
  border-spacing:0;
  border:1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.frame {
	height: 180px;
	width: 180px;
}
 .bord{
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
 }
.divbox b {
	color: #0000ff;
	font-weight: normal;
}
 .Exif{
  display:block;
  text-decoration: none; 
	color: black;
	font-weight: bold;
 }
 
a.Exif:hover {
	text-decoration: none; 
	color: red;
	font-weight: bold;
	background-color: #FFFFCC;
}
 .droite{
  text-align: right;
}

11/03/2014, 08h29
jpe54

Bonjour,

Effectivement votre proposition est la bonne ! J'ai honte de ne pas y avoir pensé...

1000 Mercis