probleme d'affichage de contenu sous IE7

**titounnette** · 30/01/2008, 10h13

Salut tout le monde,

Je suis en ce moment en train de finaliser un site pour l'entreprise qui m'accueille et je viens de me rendre compte d'un gros défaut sous IE7: lorsque je passe à une résolution de navigateur plus petite, le contenu de ma page descend.

Je travaille en php: j'ai donc 3 parties différentes dans mon index : le bandeau, le menu et l'index (qui contient le contenu de mon site) et utilise du CSS pour toute la mise en page.

J'ai déjà essayé d'utiliser la propriété "position" avec les attributs "fixed, absolute, static, relative" et cela à pour conséquence de me défaire toute ma mise en page.

Si quelqu'un avait une idée ou une autre propriétés à me suggérer, cela m'aiderait beaucoup.

Voilà comment se présente mon index.php

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
 
<body>	
	<tr>
	<td>
 
			<div id="haut">
				<?php
					include('haut.php');
				?>	
			</div>
 
	</td>
	</tr>
 
	<tr>
	<td>
 
			<div id="menu_index">
				<?php
					include('menu.php');
				?>
			</div>
 
	</td>
	<td>
 
			<div id="index">
			<?php
 
				//referencement dans un tableau des pages autorisées du site
 
 
 
				if ( (isset($_GET['lien'])) && isset($page[$_GET['lien']]) )//si la page demandée se trouve dans le tableau des pages autorisées
					{
						include ($page[$_GET['lien']]);//chargement de la page autorisée
					}
				else
					{
						include('presentation.php');//chargement de la page par défaut
					}
 
			?>
 
			</div>
 
	</td>
	</tr>

et voici la partie concernée du 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
 
 
/*CSS du contenu*/
 
#index
{	
	margin:0px 0px 0px 350px;
	width:800px;
	text-align:justify;
	font-weight:600;
 
}
#index2
{	
	margin:50px 0px 0px 0px;
	width:800px;
	text-align:justify;
}
#contenu
{
text-align:justify;
text-indent:50px;
width:800px;
}
 
 
/*CSS du menu*/
#menu_index
{
	float:left;
	vertical-align:middle;
	position:static;
	width:300px;
	height:200px;
}

Merci d'avance.

**Dionyzos** · 02/10/2009, 13h04

Bonjour titounnette,

1ere chose, ton code HTML est faux car tu utilises des TR/TD directement dans le BODY sans aucune TABLE. D’autre part, il n’est pas recommandé d’utiliser des TABLE pour structurer une page. Le TABLE ne doit être utiliser que pour afficher des données de type tableau.

2eme chose, si tu veux que ton site garde toujours le même agencement qu’elle que soit la taille de la fenêtre du navigateur, il est conseillé de mettre un DIV conteneur avec une largeur fixe.

Autre info, la propriété CSS vertical-align ne fonctionne que pour des cellules de tableau. Donc dans ton cas, elle n’a aucun effet.

Du coup ton code HTML devrait être plus simple, et ressembler à ça :

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
<body>
    <div id="conteneur">
        <div id="haut">
<?php include('haut.php'); ?>
        </div>

        <div id="menu_index">
<?php include('menu.php'); ?>
        </div>

        <div id="index">
<?php
//referencement dans un tableau des pages autorisées du site
if ( (isset($_GET['lien'])) && isset($page[$_GET['lien']]) ) //si la page demandée se trouve dans le tableau des pages autorisées
{
    include ($page[$_GET['lien']]); //chargement de la page autorisée
}
else
{
    include('presentation.php'); //chargement de la page par défaut
}
?>
        </div>
    </div>
</body>

Et ainsi ton code CSS devrait ressembler à ça :

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
#conteneur { width: 1100px; }
#haut { clear: both; }
#menu_index
{
    float:left;
    width:300px;
    height:200px;
}
#index
{
    width: 800px;
    text-align: justify;
    font-weight: bold;
    float: right;
}

Voilà, j’espère avoir répondu à ta question

probleme d'affichage de contenu sous IE7

CSS

Discussions similaires

Partager

Partager