Discussion :

[PascalAC21]

Bonjour,

je rencontre 2 problèmes distints avec mon positionnement centré.

Pour centrer mes pages dans l'écran, j'utilise une classe déclarée dans ma feuille de style

Code :

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

1
2
3
4
5
6
7
8
9
 
.Alphacopy {
		z-index: 0;
		margin-left: auto;
		margin-right: auto;
		width: 1260px;
		position: relative;
		top: 0;
		}

1- J'ai un menu qui est lui-même positionné centré dans ce bloc général, et qui apparaît après un "décalage" inexplicable d'un demi-centimètre environ.

voilà les css :

Code :

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

1
2
3
4
5
6
7
8
9
 
		#BandeauSup   { visibility: visible; margin-left: auto; margin-right: auto; position: relative; z-index: 1; top: 0; width: 752px; height: 70px; }
		#AlphaCopy { visibility: visible; position: absolute; top: 0px; left: 52px; width: 280px ; height: 166px ; z-index: 2; }
		#Infographie { visibility:visible; position: absolute; top: 30px; left: 332px; width: 98px ; height: 97px; z-index: 2; }
		#Photocopies { visibility:visible; position: absolute; top: 30px; left: 430px; width: 98px; height: 97px; z-index: 2; }
		#Faconnage { visibility:visible; position: absolute; top: 30px; left: 528px; width: 98px; height: 97px; z-index: 2; }
		#GrandFormat { visibility:visible; position: absolute; top: 30px; left: 626px; width: 98px; height: 97px; z-index: 2;}
		#Souligne   { background-color: #900; visibility: visible; position: absolute; z-index: 3; top: 125px; left: 635px; width: 70px; height: 4px; overflow: hidden; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px }
		#Titre {visibility: visible; position: absolute; z-index: 3; top: 140px; left: 341px; width: 392px; height: 40px;}

et le html :

Code HTML :

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
 
<div class="Alphacopy">
 
		<div id="BandeauSup">
			<img src="Elements/Pages%20Interieures/BandeauCiel.jpg" alt="" height="70" width="752" border="0">
				<div id="AlphaCopy">
					<a href="index.html"><img src="Elements/Pages%20Interieures/logo_alpha_INT.png" alt="Alpha Copy Dijon" height="166" width="280" border="0"></a>
				</div>	
				<div id="Infographie">
					<a href="infographie_scans.html"><img src="Elements/Pages%20Interieures/B_crea.png" alt="Infographie Cr?ation Graphisme Num?risation" height="97" width="98" border="0"></a>
				</div>
				<div id="Photocopies">
					<a href="Impression_photocopies.html"><img src="Elements/Pages%20Interieures/B_copie.png" alt="Photocopies couleurs" height="97" width="98" border="0"></a>
				</div>
				<div id="Faconnage">
					<a href="Reliures_faconnage.html"><img src="Elements/Pages%20Interieures/B_faconnage.png" alt="Pliage Reliures Agrafage" height="97" width="98" border="0"></a>
				</div>
				<div id="GrandFormat">
					<a href="Grand_format_affiches.html"><img src="Elements/Pages%20Interieures/B_GrandFormat.png" alt="Posters Affiches Plans" height="97" width="98" border="0"></a>
				</div>
				<div id="Souligne"></div>
				<div id="Titre">
				<h1>Grand Format<br>Affiches - Plans</h1>
				</div>
		</div>

Bien évidemment, l'image de fond ne présente pas de marge "blanche".

Il y a un autre bloc positionné en absolute sur la gauche du BandeauSup, mais les 2 ne se touchent pas.
Comment faire pour enlever ce "blanc" ?

2- Ces positionnements centrés fonctionnent parfaitement sur firefox et chrome, mais pas du tout sur Ie 9 : les blocs se retrouvent collés à gauche, et les éléments en absolute ne sont plus positionnés par rapport à eux...

Comment puis-je faire pour obtenir un bon positionnement dans Ie également ?

Petite question bonus :
mes pages comportent également un bloc qui a un dégradé css en fond, qui n'apparaît pas du tout sur 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
 
#FichiersAcceptes {visibility: visible; position: absolute; z-index: 2; left: 17px; top: 0px; width: 220px; height: 325px;
			background-image: linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -o-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -moz-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -webkit-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
			background-image: -ms-linear-gradient(left bottom, rgb(221,224,222) 35%, rgb(189,189,189) 66%);
 
			background-image: -webkit-gradient(
								linear,
								left bottom,
								right top,
								color-stop(0.35, rgb(221,224,222)),
								color-stop(0.66, rgb(189,189,189))
			);
		}

Y-a-t-il quelque chose à faire pour le récupérer (enfin, le voir) sous Ie sans passer par une image de fond ?

Merci.

[NoSmoking]

Bonsoir,
difficile de dire comme cela, une première étape et de rajouter le traditionnel

Code :

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

1
2
3
4
html, body{
  margin:0;
  padding:0;
}

Un autre bonne et sage résolution est de ne pas oublier de mettre un DOCTYPE, bien des soucis viennent de ces points là.

[PascalAC21]

Bonjour,

J'ai rajouté le html, body dans ma feuille de style.
Mais le problème est le même.

J'ai déjà un DOCTYPE (je n'avais pas mis toute la page, mais simplement sélectionné les passages qui me semblaient en relation).
Le voici :

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Il vient directement de GoLive (version CS), que j'utilise sur mon mac comme éditeur de code.
Je joins une page complète pour que vous vous rendiez compte.
(on ne se moque pas du javascript pour afficher le texte des liens au survol...)