[Browsers] positionner un div

**pp51** · 26/11/2005, 18h53

Bonjour à tous,

J'ai crée un div#page qui centre l'ensemble sur un navigateur, cela fonctionne bien.

J'ai ensuite un menu qui se positionne bien en haut.

Mon problème est maintenant de positionner mon logo en dessous du menu, en essayant de le positionner à qq pixels à gauche et qq pixels en dessous du menu.

J'ai de grosses différences entre ie et firefox comme l'atteste la page:
http://www.princessedunjour.com

sur ff, mon bloc "Page" n'est plus en blanc... bref je pige rien !

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="identifier-url" content="http://www.princessedunjour.com" />
<title>Princesse d'un Jour - Bijoux et accessoires pour le mariage</title>
<meta http-equiv="content-language" content="fr" />
<meta name="description" content="Princesse d'un Jour propose des bijoux et accessoires pour le mariage. Colliers de mariage en cristal Swarovski et perles, pics à cheveux pour votre chignon et votre coiffure de mariée." />
<meta name="keywords" content="bijoux mariage, bijoux fantaisie, accessoires mariage, accessoire mariage, bijoux fantaisie mariage, salon du mariage, bijoux fantaisies, collier mariage, recherche accessoire mariage, accessoire robe de mariee, coiffure mariage, coiffure mariee, mariage, accessoire coiffure, bijou mariage, bijoux swarovski, bijoux en perle swarovski, chignon de mariee, coiffure de mariee, vente bijoux fantaisie, princesse d'un jour, robe de mariee" />
<meta name="Author" content="princessedunjour.com" />
<meta name="copyright" content="princessedunjour.com" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="nouveau2.css" />
<style type="text/css">
</style>
</head>
<body>
     <div id="page">
                    <div id="nav">
                       <ul id="menu_haut">
                           <li><a id="menu1" title="Colliers mariage" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
		                   <li><a id="menu2" title="Bracelets mariage" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
		                   <li><a id="menu4" title="Boucles d'oreilles mariage" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
		                   <li><a id="menu3" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
		                   <li><a id="menu5" title="Tiares mariage" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
		                   <li><a id="menu3" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">CONTACT</a></li>
                           <li><a id="menu6" title="Princesse d'un Jour" href="index_eng.htm">ESPACE PRO</a></li>
                        </ul>
                        </div>
					 <div id="logo">
					 <a href="http://www.princessedunjour.com">
                     <img id="logo" src="logo2.gif" alt="Princesse d'un Jour" /></a>
					 </div>
	</div>
 
</body>
</html>

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
 
body {
margin: 0;
text-align: left; /* pour corriger le bug de centrage IE */
background-color: #EBEBEB;
}
img {
border-width: 0;
border-style: none;
}
#page {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 920px;
text-align: left;
background-color: #FFFFFF;
}
div#nav {
	float: left;
	height: 25px;
	top: 90px;
	right: 100px;
	width: 100%;
	border-style: solid;
	border-width: 0;
	border-color: #CCCCCC;
}
ul#menu_haut {
margin-top: 8px;
margin-bottom:8px;
padding: 0;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 10px;
margin: 15px 10px;
text-align: center;
}
#menu_haut li {
display: inline;
margin: 0 15px;
}
#menu_haut a {
color: #999999;
text-decoration: none;
text-align: left;
}
#menu_haut a:hover {
color: #000000;
}
div#logo {
float:left;
height: 66px;
top: 50px;
right: 100px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
}

**balu** · 26/11/2005, 21h31

Envoyé par pp51

Mon problème est maintenant de positionner mon logo en dessous du menu, en essayant de le positionner à qq pixels à gauche et qq pixels en dessous du menu.

Que veux-tu dire exactement? Sur ta page, ton logo est déjà sous le menu.

Envoyé par pp51

sur ff, mon bloc "Page" n'est plus en blanc... bref je pige rien !

Pourtant, je le vois bien en blanc. Actualises et/ou vides le cache du navigateur.

**frochard** · 27/11/2005, 17h50

Je suppose que tu veux parler du problème du DIV blanc qui dans le cas de MSIE va jusqu'au bas des 3 photos (camelia, orchidee et cristal) et pas de le cas de Firefox ...
(Si ce n'est pas cela, la suite sera sans doute hors sujet)

Ci c'est bien cela, je répond : Et oui ! Vive Firefox !

MSIE redimentionne les DIV conteneurs au contenu. FIREFOX ne le fait pas
dans certains cas (surtout quand il y a du positionnement dans l'air) ... Pire dans certains cas, il adapte le contenu au conteneur, même si aucune taille n'a été définie pour le conteneur. On se dit : je crée mon div, je met le texte à l'intérieur, et le navigateur dimensionnera le div comme il veut ... Et bien, MSIE peut être, Firefox, probablement pas.

Pour corriger le problème, il faudrait déjà donner une taille à tout ce qui est connu (les photos, puis les div qui contiennent les photo ...)

Ce n'est pas une page bien complexe cela doit être faisable.

Un conseil, développe et test sous Firefox ... PUIS teste et adapte avec MSIE, tu auras moins de surprises désagréables, et cela t'obligera à avoir un code plus propre et mieux écrit ... Ensuite, tu en viendra à crier contre MSIE qui ne respecte pas toujours les normes : Si cela marche sous FF, cela marche dans les autres navigateurs (avec éventuellement des variantes). Si cela marche sous MSIE, on ne peut rien dire concernant les autres. Enfin, si tu veux un navigateur à hair encore plus que MSIE, teste sous Opera !

Dans le cas de pages très complexes, dont aucune taille ne peut être connue d'avance, ce qui risque fort d'arriver à lorsque le contenu ne dépend pas du concepteur, mais de l'utilisateur, je crée la page entièrement par script, en mesurant les objets par scripts, et en remontant la hiérarchie des objets pour tout fixer.

[Browsers] positionner un div

HTML

Discussions similaires

Partager

Partager