28221 sujets

CSS et mise en forme, CSS3

Débutant - probleme de positionnement avec FF et IE

Bonjour, j'essaye de mettre mon cv en ligne et pour ça je veux un rectangle blanc avec une image en haut de ce rectangle et un menu horizontale et entre les deux le texte..
J'ai donc fait un conteneur d'une taille de 740px et j'ai mis mon image à l'intérieur avec un margin-left et top de 10px (mon image fait 720px)
Sur FireFox j'ai donc bien mon image centré mais pas sous IE..
Et autrement mon menu sous FF se trouve sous mon conteneur et sous IE il est bien à l'intérieur... Smiley confus

J'ai lu a peu près tous les articles sur le positionnement mais là je suis un peu perdue...si quelqu'un pouvait m'aider...
Merci d'avance. (mon site n'est pas encore en ligne je n'ai qu'une page pour l'instant)

Code HTML : 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cv</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
    <div id="image"></div>
    <div>
 	  <ul class="menu"> 
	     <li><a href="">Contact</a></li>	
	     <li><a href="">Créations</a></li>	
		 <li><a href="">Expériences</a></li>
		 <li><a href="">Connaissances</a></li>
  	  </ul>
   </div>
</div>
</body>
</html>

CSS :

#content {
          position:absolute;
          left: 50%; 
          top: 50%;
          border-color:#F5F5F5;
          border-style:solid;
          border-width:10px;
          width:740px;/* largeur*/
          height:500px;/* hauteur */
          margin-top:-275px;/* pour centrer*/
          margin-left:-400px;
          background-color:#FFFFFF;
		 }

#image { position: absolute;
	     background-image:url(maysa.jpg);
	     background-repeat:no-repeat;
	     position:relative;
	     width:100%;
	     height:100%;
	     margin-left:10px;
	     margin-top:10px;
      }

ul {
    list-style-type: none; /* on supprime les puces, inutiles */
    width: 100%; /* précision pour Opera */
   }

li {
    float:right;/* on aligne les listes sur la gauche */
   }
   

.menu a {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width: 150px;
height: 14px;
display: block;;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background:white;
}
Administrateur
Bonjour, et bienvenue à toi sur ce forum,

Comme c'est ton premier post sur le forum je t'invite à passer lire ce post pour bien vérifier que tu as suivi la bonne démarche :
Méthodologie à lire avant de poster dans ce salon

Note : le coeur t'en dit tu peux aussi passer au bar du forum pour les présentations

Pour revenir à ton problème et puisque tu as lu les tutos sur le positionnement, j'ai plusieurs questions qui me tarabustent :
1- pourquoi utiliser un div+background pour ton image ? N'est-elle pas importante ? Pourquoi ne pas utiliser, logiquement, une balise image (img).
2- Tu donnes à ton div "image" une largeur de "width:100%;" : comment veux-tu qu'elle puisse se centrer si elle occupe toute la largeur ? Smiley cligne
3- Quelle est l'utilité de la position relative sur le div image ?

En bref, pour résumer, voici ce que je ferais :
- utiliser une balise image plutôt qu'un div (sauf exception bien sûr)
- ne pas donner de position à ton div image
- ne pas donner de largeur 100% (un div occupe par défaut toute la largeur disponible) et se contenter des marges gauches et droites
Merci pour ces conseils, je crois qu'il va falloir que je me remette dans les tutos du positionnement !
En fait j'avais lu qu'il fallait mettre un positionnement pour mon image...et le problème était que si je ne lui indiquais pas de height and width, l'image n'apparaissait pas..
Mais je viens de modifier ma balise en <img> et ça fonctionne bon il ne me reste plus qu'à corriger mon menu... Smiley confus
Merci !
Sujet clos
Aller à