Problème de mise en page avec IE [Résolu]

zitox · 29/12/2011, 09h49

Bonjour,
Voila, tout simplement j'ai crée plusieurs blocs sur une page où je veux qu'ils soient alignés et de taille (largeur et longueur) fixe. Je suis arrivé à le faire sur tous les navigateurs sauf évidemment sur les versions inférieur à IE7. Je vous met mon code CSS pour ceux qui voudraient bien m'aider :

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
}
body {
color: #636363;
}
 
.box {
padding-top: 35px;
width: 200px;
float: left;
height: 150px;
margin-left: auto;
margin-right: auto;
text-align:left;
left:0
}
{
overflow: hidden;
}
 
.content-box {
padding-bottom: 30px;
}
 
.content-box P{
margin: 0 30px 0 30px;
}

J'ai déjà essayé de changer "px" par "em" et "rem"
Pour info : je suis un peu novice

jreaux62 · 29/12/2011, 11h08

Bonjour,
Pour info : le code html associé n'est pas facultatif...

zitox · 29/12/2011, 11h17

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
 
 
 
<style type="text/css">
/*<![CDATA[*/
<!--
* {margin: 0;padding: 0;}
h2 {
  text-align: center;
  color: #696969;
  font-weight:bolder;
  font-family: MS Courier New;
}
body {
    color: #636363;
}
 
.box {
    padding-top: 35px;
    width: 200px;
    float: left;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    left:0
}
{
overflow: hidden;
}
 
.content-box {
    padding-bottom: 30px;
}
 
.content-box P{
    margin: 0 30px 0 30px;
}
 
-->
/*]]>*/
</style>
 </head>
 
 <body>
  <div class="box">
   <div class="content-box">
    <p><b><center>COM</center></b></p>
<br> </br>
<p><ul><li><a href=[...]</a></li> 
<li><a href=[...]>[...]</a></li>
<li><a href=[...]>[...]</a></li>
<li><a href=[...]>[...]</a></li></ul>
 </p>
   </div>
  </div>
 
    <div class="box">
   <div class="content-box">
    <p><b><center>RH</center></b></p>
<br> </br>
<p><ul><li><a href=[...]>[...]</a></li> 
<li><a href=[...]>[...]</a></li>
<li><a href=[...]>[...]</a></li></ul>
 </p>
   </div>
  </div>
 
<div class="box">
   <div class="content-box">
    <p><b><center>DDI</center></b></p>
<br> </br>
<p><ul><li><a href=[...]>[...]</a></li> 
<li><a href=[...]>[...]</a></li> 
<li><a href=[...]>[...]l</a></li> 
</ul>
<br> </br>
 </p>
   </div>
  </div>
 
<div class="box">
   <div class="content-box">
    <p><b><center>DRQ</center></b></p>
<br> </br>
<p><ul><li><a href=[...]>[...]</a></li> 
<li><a href=h[...]>[...]</a></li>
<br> </br>
 </p>
   </div>
  </div>
 
  <div class="box">
   <div class="content-box">
    <p><b><center>[...]</center></b></p>
<br> </br>
<p><ul><li><a href=[...]>[...]</a></li>
<li><a href=[...]>[...]</a></li>
<li><a href=h[...]>[...]</a></li></ul>
<br> </br>
 </p>
   </div>
  </div>

Voilà en espérant que tout sa vous permettent de me sauver, je reste à votre disposition si vous avez besoin d'autre chose

jreaux62 · 29/12/2011, 12h58

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="box">
	<h4>COM</h4>
	<ul>
		<li><a href=[...]>[...]</a></li>
		<li><a href=[...]>[...]</a></li>
		<li><a href=[...]>[...]</a></li>
		<li><a href=[...]>[...]</a></li>
	</ul>
</div>

Avec :

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
.box {
	overflow:hidden;
	width: 200px;
	float: left;
	height: 150px;
	text-align:left;
}
.box h4 {
    overflow:hidden;
	padding: 30px 30px 10px 30px;
	text-align:center;
	font-weight:bold;
}
.box ul {
	overflow:hidden;
	padding: 0 30px 0 30px;
}

zitox · 29/12/2011, 13h19

Génial tout fonctionne merci beaucoup pour ton aide et pour l'ajout de la balise h4 c'est vrai que je n'y avait pas pensé

29/12/2011, 11h08	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, Pour info : le code html associé n'est pas facultatif... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

29/12/2011, 13h19	#5
zitox Invité de passage Consultant communication & réseaux Inscription : décembre 2011 Messages : 6 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Consultant communication & réseaux Secteur : Communication - Médias Informations forums : Inscription : décembre 2011 Messages : 6 Points : 0 Points : 0	Génial tout fonctionne merci beaucoup pour ton aide et pour l'ajout de la balise h4 c'est vrai que je n'y avait pas pensé
	00

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