18041 sujets

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

[RESOLU] Prolème affichage titre H1 sur IE

Bonjour!

J'ai réussi à Positionner mon contenu avec des marges et IE a l'air d' accepter.
Mais il y' a toujours le problème de titre caché par l'image que je ne sais pas comment régler.

Après ça je pense que ce sera tout bon ! smile


Firefox

upload/26120-Firefox21.jpg

IE

upload/26120-IE21.jpg

====
HTML
====

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Présentation</title> 
<link rel="stylesheet" type="text/css" href="accueil.css"/> 
</head> 
 
 
 
<body> 
<div> 
<h1>Présentation</h1> 
</div> <!-- Titre de page --> 
 
<div id="menu"> 
<ul> 
    <li class="en-cours"><a href="accueil.html"><span>Présentation</span></a></li> 
    <li><a href="machin.html"><span>Machin</span></a></li> 
    <li><a href="truc.html"><span>Truc</span></a></li> 
</ul> 
</div> <!-- menu --> 
 
 
<div id="contenuimage"> 
    <div  id="contenu"> 
         
        <p>Blablablabla..<br /><br /><br /><br /><br /><br />Blablablabla..<br /><br /><br /><br /><br /><br /> 
        Blablablabla..</p> 
 
     
    </div> <!--contenu--> 
</div> <!-- contenuimage --> 
 
 
 
</body> 
 
</html>


====
CSS
====

@charset "utf-8"; 
/* CSS Document */ 
 
html { 
    font-size: 100%;    /* Résout les problème de taille de texte entre navigateurs */ 
 
} 
 
body { 
    margin: 0; 
    background: url("FondAstral.png"); 
    background-attachment:fixed; 
     
     
     
     
} 
 
h1 {    
    color: #85cc23;       /*Problème de décalage entre Firefox et IE si propriétés attribuées au DIV de Titre*/ 
    font-size: 3em;   
    font-family: monospace, "Times New Roman", Times, serif;   
    width: 400px;   
    margin-left: 530px;   
    margin-top: 280px;   
    z-index: 10; 
} 
 
/* Navigation */ 
 
#menu { 
      /*float-left   */           
    width: 160px; 
    margin-top: 85px; 
    margin-left:70px; 
     
     
} 
#menu li{ 
    margin-bottom: 7px /* Espace entre les liens*/ 
     
     
     
     
} 
#menu li a { 
    display:block; 
    text-decoration:none; 
    width: 140px; 
    padding: 10px; 
    background: url(icone4.png); no-repeat left top; 
} 
 
 
ul 
{  
  list-style-type: none; 
  padding:0 ;  /* supprime le décalage des listes. */ 
  margin:0;  
}  
 
/* Style au survol et en cours */ 
 
#menu li.en-cours a{ 
    background-image: url(icone5.png); 
    color: black; 
} 
#menu li a:hover { 
    background-image: url(icone5.png); 
    color: black; 
} 
#menu li a:visited { 
    color:black; 
} 
 
/* Cadre de contenu */ 
 
 
#contenuimage { 
    float:left; 
    width: 752px; 
    background: url(CadreContenu.png); no-repeat left top; 
    margin-left: 300px; 
    margin-top: -345px; 
} 
#contenu { 
    color:red; 
    width: 640px;     
    margin-left: 0px; 
    margin-top: 200px; 
    padding: 50px; 
    border: red solid ; 
     
}



Voilà, en principe ce sera la dernière chose qui me pose problème Smiley cligne
Modifié par geopl (10 Feb 2010 - 08:23)
Bonjour,

En jetant un oeil à ton code, je me dit qu'on peut faire plus simple. Smiley cligne
Par exemple :

<ul id="menu">  [#red]<!-- div englobante inutile -->  [/#]
    <li class="en-cours"><a href="accueil.html">Présentation</a></li>  [#red]<!-- span englobant inutile -->  [/#]
    <li><a href="machin.html">Machin</a></li>  [#red]<!-- span englobant inutile -->  [/#]
    <li><a href="truc.html">Truc<</a></li>  [#red]<!-- span englobant inutile -->  [/#]
</ul>  <!-- menu -->  
 
<div id="contenu">  [#red]<!-- div englobante inutile -->  [/#]
  <h1>Présentation</h1>  
  <p>Blablablabla..<br /><br />Blablablabla..<br /><br /> Blablablabla..</p>  
</div> <!--contenu-->


Concernant le css, il faut :
- adapter les instruction sur le menu (vu qu'on a supprimé la div),
- appliquer à contenu l'arrière-plan général (Cadrecontenu.png, je crois)
- et donner une hauteur au h1.

Une fois que ce sera fait, on commencera à y voir un peu plus clair. Smiley cligne
Bonjour !

J'ai rafraichi un peu mon code mais j' ai toujours le même soucis de titre caché derrière l'image et le contenu sur IE a une marge différente que sur Firefox :

Firefox :

upload/26120-Firefox22.jpg

IE :

upload/26120-IE22.jpg

====
HTML
====

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Présentation</title>
<link rel="stylesheet" type="text/css" href="accueil.css"/>
</head>



<body>
<div>
<h1>Présentation</h1>
</div> <!-- Titre de page -->


<ul id="menu">
	<li class="en-cours"><a href="accueil.html">Présentation</a></li>
    <li><a href="machin.html">Machin</a></li>
    <li><a href="truc.html">Truc</a></li>
</ul>




<div  id="contenuimage">
		
        <p id="contenu">Blablablabla..<br /><br /><br /><br /><br /><br />Blablablabla..<br /><br /><br /><br /><br /><br />
        Blablablabla..</p>

	
</div> <!--contenu-->


</body>

</html>


====
CSS
====

@charset "utf-8";
/* CSS Document */

html {
	font-size: 100%;	/* Résout les problème de taille de texte entre navigateurs */

}

body {
	margin: 0;
	background: url("FondAstral.png");
	background-attachment:fixed;
	
	
	
	
}

h1 {   
    color: #85cc23;       /*Problème de décalage entre Firefox et IE si propriétés attribuées au DIV de Titre*/
    font-size: 3em;  
    font-family: monospace, "Times New Roman", Times, serif;  
    width: 400px;  
	height:50px;
    margin-left: 530px;  
    margin-top: 280px;  
	z-index: 10;
}

/* Navigation */

#menu {
	  /*float-left   */          
	width: 160px;
	margin-top: 85px;
	margin-left:70px;
	
	
}
#menu li{
	margin-bottom: 7px /* Espace entre les liens*/
	
	
	
	
}
#menu li a {
	display:block;
	text-decoration:none;
	width: 140px;
	padding: 10px;
	background: url(icone4.png); no-repeat left top;
}


ul
{ 
  list-style-type: none;
  padding:0 ;  /* supprime le décalage des listes. */
  margin:0; 
} 

/* Style au survol et en cours */

#menu li.en-cours a{
	background-image: url(icone5.png);
	color: black;
}
#menu li a:hover {
	background-image: url(icone5.png);
	color: black;
}
#menu li a:visited {
	color:black;
}

/* Cadre de contenu */



#contenuimage {
	background: url(CadreContenu.png); no-repeat left top;
	color:red;
	float:left;
	width: 640px;	
	margin-left: 300px;
	margin-top: -345px;
	padding: 50px;
	border: red solid ;
}

#contenu {
	margin-top: 200px;	
}

Modifié par geopl (07 Feb 2010 - 20:56)
Je remonte le post !

Personne a une solution à mon problème ?
Modifié par geopl (07 Feb 2010 - 20:57)
Salut,

pour commencer tu as des erreurs de déclaration dans ton css (points-virgule en trop dans les background: url( ); no-repeat left top;)

Ensuite quel est l'intérêt du margin-top négatif de #contenuimage ? Dit autrement pourquoi le H1 n'est-il pas dans le même DIV ?

Je pense qu'il te manque quelques connaissances sur le positionnement (qui est un vaste sujet Smiley cligne ) et je t'invite à lire le Guide de survie du positionnement CSS.

Tu pourrais également jeter un œil aux Gabarits de mise en page pour partir sur de bonnes bases.
C'est vrai que j'ai pas pensé à mettre mon H1 dans le DIV contenu... Ca règle le problème de visibilité du titre sur IE. Mais pas contre IE ne prend pas en compte les marges de la même façon on dirait ce qui fait que j'ai un décalage entre les 2 navigateur au niveau du contenu et du titre :

Firefox :

upload/26120-Firefox23.jpg

IE :

upload/26120-IE23.jpg

====
HTML
====

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Présentation</title>
<link rel="stylesheet" type="text/css" href="accueil.css"/>
</head>



<body>



<ul id="menu">
	<li class="en-cours"><a href="accueil.html">Présentation</a></li>
    <li><a href="machin.html">Machin</a></li>
    <li><a href="truc.html">Truc</a></li>
</ul>




<div  id="contenu">
		
        <h1>Présentation</h1>
        
        <p>Blablablabla..<br /><br /><br /><br /><br /><br />Blablablabla..<br /><br /><br /><br /><br /><br />
        Blablablabla..</p>

	
</div> <!--contenu-->


</body>

</html>


====
CSS
====

@charset "utf-8";
/* CSS Document */

html {
	font-size: 100%;	/* Résout les problème de taille de texte entre navigateurs */

}

body {
	
	background: url("FondAstral.png");
	background-attachment:fixed;
}



/* Navigation */

#menu {
	/*float-left */           
	width: 160px;
	margin-top: 400px;
	margin-left:70px;
}
#menu li{
	margin-bottom: 7px /* Espace entre les liens*/
	
	
	
	
}
#menu li a {
	display:block;
	text-decoration:none;
	width: 140px;
	padding: 10px;
	background: url(icone4.png) no-repeat left top;
}


ul
{ 
  list-style-type: none;
  padding:0 ;  /* supprime le décalage des listes. */
  margin:0; 
} 

/* Style au survol et en cours */

#menu li.en-cours a{
	background-image: url(icone5.png);
	color: black;
}
#menu li a:hover {
	background-image: url(icone5.png);
	color: black;
}
#menu li a:visited {
	color:black;
}

/* Cadre de contenu */



#contenu {
	background: url(CadreContenu.png); no-repeat left top;
	color:red;
	float:left;
	width: 640px;	
	margin-left: 300px;
	margin-top: -350px;
	padding: 50px;
	border: red solid ;
}

h1 {   
    color: #85cc23;       /*Problème de décalage entre Firefox et IE si propriétés attribuées au DIV de Titre*/
    font-size: 3em;  
    font-family: monospace, "Times New Roman", Times, serif;  
    width: 400px;  
	height:50px;
    margin-left: 250px;  
    margin-top: 35px;  
}

#contenu p {
	margin-top: 100px;	
}



Pour le margin top négatif c'est parcequ'on dirait que l'image se positionne en fonction du menu et pour remonter l'image je dois mettre un chiffre négatif.
Je m' en passerais bien mais je vois pas comment placer mon image autrement...
Sujet clos
Aller à