18073 sujets

Questions générales et questions de débutants

[Résolu] Différence ff et ie

Bonjour,

Voici ma page: www.princessedunjour.com/nouveau3.htm

Je souhaite que les 3 images soient positionnées comme sur ff. Sur ie, elles sont trop basses vis-à-vis du menu.

Savez-vous comment faire ?

Voici mon html:

<body>
<div id="page">
        <h1 id="titre">
        <a href="http://www.princessedunjour.com">
        <img src="logo222.gif" title="Princesse d'un Jour" alt="Princesse d'un Jour" style="vertical-align: middle; margin-right: 50px;" /></a>
        BIJOUX ET ACCESSOIRES POUR LE MARIAGE
        </h1>
		
		<ul id="menu_haut">
        <li><a id="menu1" title="Accueil" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
		<li><a id="menu2" title="Collections" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
		<li><a id="menu3" title="Design" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
		<li><a id="menu4" title="Points de vente" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
		<li><a id="menu5" title="A propos" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
		<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
		</ul> 
<a href="http://www.princessedunjour.com"><img src="/Cameliatest.jpg" id="photo1" alt="Princesse d'un Jour" /></a>
<a href="http://www.princessedunjour.com"><img src="/Orchideetest.jpg" id="photo2" alt="Princesse d'un Jour" /></a>
<a href="http://www.princessedunjour.com"><img src="/Cristaltest.jpg" id="photo3" alt="Princesse d'un Jour" /></a>
    <h2>Venez découvrir la délicatesse des trésors Princesse d'un Jour entièrement confectionnés à la main.</h2>
	
	<ul id="menu_bas">
        <li><a id="menu7" title="Catalogue" href="#">CATALOGUE</a></li>
		<li><a id="menu8" title="Presse" href="#">PRESSE</a></li>
		<li><a id="menu9" title="Net partenaires" href="#">NET PARTENAIRES</a></li>
       </ul>
		<div id="footer">
			<p id="copyright">Copyright © 2005 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>		 
            <p id="partenaires">Sites Partenaires :<a href="http://www.noces-provencales.com" onclick="window.open(this.href);return false;">Organisation de mariage en Provence avec Noces-Provencales.com</a> | <a href="http://www.notremariage.net" onclick="window.open(this.href);return false;">NotreMariage.net</a></p>
		</div>
		<!-- eStat v3.2 -->

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script type="text/javascript">
<!--
var _UJS=0;
//-->
</script>
<script type="text/javascript" src="http://perso.estat.com/js/467067182934.js"></script>
<script type="text/javascript">
<!--
if(_UJS) _estat('467067182934','PAGE_MARQUEE','GROUPE_PAGES_MARQUEES');
//-->
</script>
<noscript>
<div id="estat"><a href="http://persos.estat.com"/><img src="http://perso.estat.com/m/00/467067182934?p=PAGE_MARQUEE&amp;c=GROUPE_PAGES_MARQUEES" alt="marqueur eStat'Perso" style="border:0px;"/></div>
</noscript>
<!-- /eStat -->
</div>	                           
</body>
</html>
<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>
[code]

et ma CSS
[code]
body {
margin: 0;
text-align: center;
background: url(/Baggrund_flosset.gif) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
h1 { 
font-family: Arial, Times, serif;
letter-spacing: 0.3em;
font-size: 65%;
color: #990099;
margin: 0 0 0 0;
}
h2 { 
font-family: Tahoma, Times, serif;
font-size: 70%;
letter-spacing: 0.05em;
color: #990099;
margin-top: 20px;
margin-left: 65px;
margin-bottom: 0px;
margin-right: 0px;
text-align: center;
width: 700px;
}
ul#menu_haut {
padding: 20px;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin-top: -10px;
margin-left: 90px;
margin-bottom: Opx;
margin-right: 0px;
text-align: left;
width: 700px;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
#menu1 {
border-right: 1px solid #999999;
width: 85px;
background: url(menu1.gif) no-repeat 0 0;
}
#menu2 {
border-right: 1px solid #999999;
width: 125px;
}
a#menu2:hover {
background: url(menu2.gif) no-repeat 0 0;
}
#menu3 {
border-right: 1px solid #999999;
width: 85px;
}
a#menu3:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu4 {
border-right: 1px solid #999999;
width: 150px;
}
a#menu4:hover {
background: url(menu4.gif) no-repeat 0 0;
}
#menu5 {
border-right: 1px solid #999999;
width: 95px;
}
a#menu5:hover {
background: url(menu5.gif) no-repeat 0 0;
}
#menu6 {
width: 85px;
}
a#menu6:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu_haut a:hover {
color: #000000;
}
#photo1 {
margin-left: 5px;
margin-top: 5px;
margin-bottom: 0px;
margin-right: 0px;
}
#photo2 {
margin-left: 30px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
#photo3 {
margin-left: 30px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
ul#menu_bas {
margin-top: 10px;
margin-bottom:8px;
margin-left: 400px;
margin-right: 0px;
padding: 15px;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
}
#menu_bas li {
float: left;
margin: 0 0;
}
#menu_bas a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
#menu_bas a:hover {
color: #000000;
}
#menu7 {
border-right: 1px solid #999999;
width: 100px;
}
a#menu7:hover {
background: url(menu7.gif) no-repeat 0 0;
}
#menu8 {
border-right: 1px solid #999999;
width: 75px;
}
a#menu8:hover {
background: url(menu8.gif) no-repeat 0 0;
}
#menu9 {
width: 145px;
}
a#menu9:hover {
background: url(menu9.gif) no-repeat 0 0;
}
div#footer {
padding-top: 0;
width: 500px;
margin-left: 125px;
}
p#copyright {
font-family: Arial, Times, serif;
color: #999999;
font-size: 60%;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
p#partenaires {
font-family: Arial, Times, serif;
color: #999999;
font-size: 60%;
text-align: center;
padding-top: 0;
margin-top: 5px;
}
a {
color: #999999;
text-decoration: none;
}
div#estat {
	position: absolute;
	width: 40px;
	left: 77px;
	top: 449px;
}


Par ailleurs, je souhaiterai que le logo estat soit sur la même ligne que mon footer, mais je n'y arrive pas o((
D'ailleurs si vous aviez une astuce pour réduire la taille du logo estat, voire même le rendre invisible ?

Merci pour vos lumières !
Modifié par pp51 (10 Aug 2006 - 11:45)
Administrateur
Salut,

Je n'ai malheureusement pas le temps d'étudier de près ta page.
Cependant, je peux te donner une piste sérieuse (en attendant une aide plus personnalisée) : as-tu pensé à suivre pas à pas la Méthodologie pour résoudre les problèmes de mise en page qui se trouve en Annonce du salon CSS ?
Si oui, elle devrait au-moins te permettre de mettre le doigt sur le(s) élément(s) incriminé(s).

Bonne chance Smiley smile
Hello Raphael,

Merci je vais suivre le lien pour essayer de voir ou est le problème.

Et excellente nouvelle, le Racing a enfin gagné ! et oui, un alsacien à paris garde toujours ses racines Smiley ravi

A+
Bonsoir,

Je viens de consulter ta page avec Firefox 1.5 et Internet Explorer 6. Je n'ai pas observé de différence dans le positionnement des images par rapport au menu supérieur.
Sujet clos
Aller à