Comment positionner des images ?

**darcy** · 18/12/2006, 17h35

Bonsoir

j'aimerai réaliser une page avec une présentation dans quinze cadres de 100px sur 190 px, les communes de mon canton. (une image et un lien à cliquer pour découvrir en détail la ou les communes)
Mais je ne sais pas comment m'y prendre.
J'ai essayé vainement cet après midi mais cela ne donnait rien de très beau entre les différents navigateurs et il y avait de gros bugs sous dreamweaver
Faut il déclarer toutes les boites que je vais créé en : float?
Ou est ce que je passe plutôt avec la commande <table>?
Merci pour vos réponses

**landryx** · 18/12/2006, 17h50

salut

je pense qu'effectivement tu pourrais utiliser un tableau pour inclure tes images dans ta page(et penser à les redimensionner en fonction de ce que tu voudrais avoir),ça te fait le plus gros du travail parcequ'elles s'allignent automatiquement...

**darcy** · 18/12/2006, 18h17

Merci je vais esssayer toussa

**darcy** · 18/12/2006, 20h25

Hum, le tableau se centre sous IE et pas sous Firefox
Vous avez une idée?

merci

**darcy** · 18/12/2006, 22h19

Bon donc une barre sous IE (overflow?)
cela me décalle tout mon tableau d'image sous IE alors que sous Firefox, tout est bien cadré dans la page

Si vous aviez une idée

Et de plus je n'arrive pas à centrer les titres des photos (toujours sous IE)

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
*{
   margin:0;
   padding:0;
}
 
#en-tete 
	{
 
	position: relative;
	height: none;
	background-image: url(../images/essaiban1.jpg);  
    padding: 30px;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:center;
	background-position:center;
	margin-top:20px;
	width: auto;
 
 
 
	}
 
body 
	{
	font-size:small;
	width: auto;
	height: auto;
	background-color:#5fa62b; 
   	background-image: url(../images/beauce12.jpg);
    background-position:top left;
	background-position-x:top;
    background-position-y:top;
    background-repeat:no-repeat;
	border: 1px solid #fef0b2;
 
	}
 
#navigation { 
 
	width:800px;
	margin:0 auto;
	margin-top:3px;
 
 
 
 
}
 
 
 
 
#conteneur { 
 
	width:720px;
	height:660px;
	margin:auto;
	margin-top:20px;
	padding:30px;
	background-color: #EFEFEF;
    border-top:3px solid #00CC33;
    font-style: normal;
	line-height: normal;
	letter-spacing:0,1mm;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align: center; 
	color: #333333;
	background-image:url(../images/LOGO.jpg);
	background-position:left-top;
	background-repeat:no-repeat;
 
 
 
	}
 
 
#bloc  {
 width:500px;
 height:700px;
 margin-top:15px;  
 border-top: 0px solid orange; 
 margin-left:95px; 
 margin-right:30px; 
}
 
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute;
	z-index:100;
	margin-left:auto;
	margin-right: auto;
	 width:; 
	text-align: center;
 
}
 
 
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: 100;
background:#c5e373;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background :#fef0b2;
}
#menu li a, #menu dt a {
color:  #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background:#ecae20;
}
#pied-de-page 
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color: #6b6c5a;
	text-align: center;
	letter-spacing: 6px;
	height: 16px;
	clear: left

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
 
<div id="conteneur">
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
 
 
<table width="400" border="1" align="center" cellpadding="5" cellspacing="15" bgcolor="#5fa62b">
  <tr>
    <td scope="col"><p align="center" class="Style1">Allaines</p>
      <p><img src="../images/allainespor.jpg" width="120" height="90" /></p>
	  <td scope="col"><p align="center"><span class="Style1">Barmaiville</span><img src="../images/barpor.jpg" width="120" height="89" /> </p>
    <td scope="col"><span class="Style1">Baudreville</span><img src="../images/beaudrepor.jpg" width="120" height="90" /></td>
    <td scope="col"><span class="Style1">Gommerville</span><img src="../images/gommerport.jpg" width="120" height="90" /> </td>
    <td scope="col"><span class="Style1">Gouillons</span><img src="../images/gouillonsport.jpg" width="120" height="90" /></td>
 
  </tr>
  <tr>
    <td><span class="Style1">Intreville</span><img src="../images/intrevilleport.jpg" width="120" height="90" /></td>
    <td><span class="Style1">Janville</span><img src="../images/janvilleport.jpg" width="120" height="90" /></td>
    <td><span class="Style1">Levesville-La-Chenard</span><img src="../images/levesport.jpg" width="120" height="90" /></td>
    <td><span class="Style1">M&eacute;rouville</span><img src="../images/merouport.jpg" width="120" height="90" /></td>
    <td><span class="Style1">Oinville-saint-Liphard</span><img src="../images/oinvilleport.jpg" width="120" height="90" /></td>
  </tr>
  <tr>
    <td><span class="Style1">Poinville</span><img src="../images/poinville1port.jpg" width="120" height="90" /></td>
    <td><span class="Style1">Le Puiset</span><img src="../images/lepuisetport.jpg" width="120" height="90" /> </td>
    <td> <span class="Style1">Rouvray-Saint-Denis</span><img src="../images/rouvray1port.jpg" width="120" height="90" /> </td>
    <td><span class="Style1">Santilly</span><img src="../images/santilly1port.jpg" width="120" height="90" /></td>
    <td><span class="Style1">Trancrainville</span><img src="../images/trancrainport.jpg" width="120" height="90" /></td>
  </tr>
 
 
</table>
 
</div>
 
 
 
</div>
 
</body>
</html>

**darcy** · 19/12/2006, 09h38

Voilà ce que cela donne sous IE et sous Firefox

Sous firefox tout est bien positionné

Mais sous IE

tout déborde du conteneur !

**darcy** · 19/12/2006, 10h02

En fait, j'ai refait le tableau et je l'ai scindé en deux
Sous firefox il n'est pas centré mais sous IE cette fois ci il est centré

tanpis pour ceux qui auront le navigateur Firefox...

**landryx** · 19/12/2006, 11h29

je sais pas si tu as assez de temps mais tu pourrais faire deux pages dont l'une qui fonctionnerait sous IE et l'autre sous firefox en incluant ceci dans l'entete de ta page:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
<!-- Debut
// source : "http://www.lesite.com"
var name = navigator.appName
if (name == "Microsoft Internet Explorer")
url=("msie.html");
else
url=("mozilla.html"); // fin du script -->
</script>

ça devrait marcher

Comment positionner des images ?

Positionnement en CSS

Discussions similaires

Partager

Partager