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
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.
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; }
voilà les css :
et le html :
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;}
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.
Y-a-t-il quelque chose à faire pour le récupérer (enfin, le voir) sous Ie sans passer par une image de fond ?
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)) ); }
Merci.
Partager