Bonjour,
Bon j'ai testé cela sur mon site ...
voici l'url de test:
http://princessedunjour.com/
1er constat (je suis en 1024): le site est centré horizontalement et verticalement... parfait !
Je "m'amuse" ensuite à passer en 800x600 histoire de voir si tout est bon
Et hop, problème ! mon site est completement coupé, a tel point que le logo, et le menu horizontal ne s'affichent pas
Voir ici:
J'ai du loupé qq chose... si vous avez des tuyaux... merci d'avance
<body id="princessedunjour">
<div id="page">
<div id="header">
<div id="logo"> <a href="#" id="Logo"> <img src="Logo.gif" alt="Princesse d'un Jour" width="287" height="63" title="Logo Princesse d'un Jour"/></a>
</div>
<h1><img src="titre.gif" alt="Bijoux et accessoires pour le mariage" title="Bijoux et accessoires pour le mariage"/></h1>
<ul id="menu_langue">
<li><a id="langue" title="Langue">Langue</a></li>
<li><a id="english" title="English" href="#">EN</a></li>
<li><a id="français" title="Français" href="#">FR</a></li>
</ul>
</div>
<ul id="menu_haut">
<li><a id="menu1" title="Accueil" href="#">ACCUEIL</a></li>
<li><a id="menu2" title="Collections" href="#">COLLECTIONS</a></li>
<li><a id="menu3" title="Points de vente" href="#">POINTS DE VENTE</a></li>
<li><a id="menu4" title="Atelier de création" href="#">ATELIER DE CREATION</a></li>
<li><a id="menu5" title="A propos" href="#">A PROPOS</a></li>
<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
</ul>
<p id="ariane">Vous êtes ici: <a href="http://www.eternel.fr">Accueil</a></p>
<div id="contenu">
<img src="fleurdecristal.jpg" alt="Collection de bijoux pour le mariage" width="250" height="375" title="Collection de bijoux pour le mariage"/></a>
</div>
<div id="accroche">
<h2>Venez découvrir la douceur et la délicatesse des trésors Princesse d’un Jour entièrement confectionnés à la main et sur mesure. Des parures créées spécialement pour la mariée.</h2>
</div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">RECHERCHER DANS LA COLLECTION</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Cristal Swarovski</a></li>
<li><a href="#">Perles de rocaille</a></li>
<li><a href="#">Perles de bohême</a></li>
<li><a href="#">Perles nacrées</a></li>
<li><a href="#">Guipure</a></li>
</ul>
</dd>
</dl>
</div>
<div id="footer">
<p id="mentions">Copyright © 2006 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>
</div>
</div>
</body>
</html>
et ma css
* {
padding: 0;
margin: 0;
}
body {
background: url(background2.gif) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
position:absolute;
left: 50%;
top: 50%;
width: 770px;
height: 600px;
margin-top: -300px; /* moitié de la hauteur */
margin-left: -385px; /* moitié de la largeur */
border: 1px solid #000;
}
#logo {
float: left;
}
h1 {
float: left;
}
#menu_langue {
float: left;
font-family: Arial, Times, serif;
font-size: 70%;
list-style-type: none;
width: 100px;
margin: 25px 0 0 20px;
padding: 0 0 0 0;
line-height: 20px;
}
#menu_langue li {
float: left;
}
#menu_langue a {
float: left;
color: #ACACAC;
text-decoration: none;
text-align: center;
line-height: 12px;
}
#english {
width: 20px;
border-right: 1px solid #A6A5A5;
}
#français{
width: 20px;
}
ul#menu_haut {
clear: both;
margin: 0 0 0 5px;
padding: 0 0 0 0;
letter-spacing: 3px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
text-align: center;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #ACACAC;
text-decoration: none;
text-align: center;
line-height: 20px;
}
#menu1 {
width: 100px;
background: url(menu1-off.png) no-repeat;
}
a#menu1 {
color: #6C3089;
}
a#menu1:hover {
background-color: #E8E8E8;
}
#menu2 {
width: 130px;
background: url(menu2-off.png) no-repeat;
}
a#menu2:hover {
background: url(menu2-on.png) no-repeat;
}
#menu3 {
width: 160px;
background: url(menu3-off.png) no-repeat;
}
a#menu3:hover {
background: url(menu3-on.png) no-repeat;
}
#menu4 {
width: 190px;
background: url(menu4-off.png) no-repeat;
}
a#menu4:hover {
background: url(menu4-on.png) no-repeat;
}
#menu5 {
width: 90px;
background: url(menu5-off.png) no-repeat;
}
a#menu5:hover {
background: url(menu5-on.png) no-repeat;
}
#menu6 {
width: 90px;
background: url(menu-off.png) no-repeat;
}
a#menu6:hover {
background: url(menu6-on.png) no-repeat;
}
#menu_haut a:hover {
color: #6C3089;
}
p#ariane{
margin: 0 0 0 5px;
padding: 0 0 0 0;
font-family: Trebuchet MS, Times, serif;
font-size: 70%;
color: #ACACAC;
}
#ariane a {
color:#ACACAC;
text-decoration: none;
}
#contenu {
float: left;
margin: 5px 0 0 5px;
}
#accroche {
float: left;
width: 450px;
padding: 10px 0 0 40px;
}
h2 {
font: 13px/1.4em Arial, Tahoma, Verdana, sans-serif;
color: #622181;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
float: left;
font-family: Arial, Times, serif;
font-size: 70%;
margin: 50px 0 0 100px;
}
#menu dl {
float: left;
width: 250px;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
background: #F4F4F4;
border: 1px solid gray;
color: #622181;
background: url(puce.gif) no-repeat;
line-height: 19px;
}
#menu dd {
border: 1px solid gray;
color: #ACACAC;
font-size: 100%;
}
#menu li {
text-align: center;
background: #fff;
color: #A6A5A5;
}
#menu li a, #menu dt a {
color: #A6A5A5;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#footer {
clear: both;
text-align: center;
}
p#mentions{
font-family: Trebuchet MS, Times, serif;
font-size: 65%;
padding: 20px 0 0 0;
color: #666666;
}
Modifié par pp51 (25 May 2007 - 11:15)
