5568 sujets

Sémantique web et HTML

Problème de menu avec IE7

Bonjour à tous Smiley smile

Après avoir achevé la première partie de mon site, je l'ai diffusé à mes proches, et je me rends compte que le menu ne s'affiche pas, alors que biensûr il marche très bien sous Firefox.

Le code XHTML du menu :

a écrit :
<div id="menu">

<div class="element_menu">
<h3>Voyages</h3>

<ul>
<li><a href="CAD_USA_2006.html">Canada et Etats Unis 2006</a></li>
<li><a href="ENG_2007.html">Angleterre 2007</a></li>
<li><a href="CAD_USA_2007.html">Canada et Etats Unis 2007</a></li>
</ul>
<h3>Evènements particuliers</h3>
<ul>
<li><a href="Bourget_2007.html">Le Bourget 2007</a> <br/><br/></li>
</ul>
</div>

</div>


Je pense que le problème vient de la balise <div class="element_menu"> car il me semble avoir vu que les balises de ce type ne marchent pas sous IE7. Avez-vous une idée de la façon de la remplacer ?

Merci beaucoup

Léo
Bonjour,

<div> fonctionne très bien dans IE 7, et heuresement Smiley ravi

Pour le moment sans la page en ligne avec l'accès au code css et html, nous ne pouvons rien pour toi Smiley cligne
Ce que je croyais qui ne fonctionnait pas dans IE7 n'est pas <div> mais class

Le code XHTML

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Site de photos" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="_design.css" />
<link rel="icon" type="image/x-icon" href="http://leocomputer.free.fr/Icone.ico" />

<script type="text/javascript">
<!-- Disable
function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")
document.oncontextmenu=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
//-->
</script>

</head>

<body>

<div id="en_tete">

<p><img src="http://leocomputer.free.fr/Banniere.jpg" alt="Bannière" /></p>

</div>

<div id="menu">

<div class="element_menu">
<h3>Voyages</h3>

<ul>
<li><a href="CAD_USA_2006.html">Canada et Etats Unis 2006</a></li>
<li><a href="ENG_2007.html">Angleterre 2007</a></li>
<li><a href="CAD_USA_2007.html">Canada et Etats Unis 2007</a></li>
</ul>
<h3>Evènements particuliers</h3>
<ul>
<li><a href="Bourget_2007.html">Le Bourget 2007</a> <br/><br/></li>
</ul>
</div>

</div>

<div id="corps">

<p style="text-align:justify;">

Je vous souhaite la bienvenue sur mon site de photos, où je vais vous
montrer différentes photos que j'ai prises lors de plusieurs occasions. J'espère qu'elles vous plairont.<br/><br/>
Si ce site vous a plu, ou que vous avez des améliorations à me proposer, <br/>
vous pouvez me contacter en cliquant <a href="mailto:leocomputer@free.fr">ici</a>.
Je suis ouvert à toute proposition et je vous remercie d'avance pour votre aide ! <br/><br/>

PS : Pour éviter toute copie des photos, j'ai désactivé le clic sur la page (vous me direz que je suis parano mais il
le faut bien ^^). Par contre si certaines photos vous ont vraiment plu, vous pouvez me contacter et je me ferai un plaisir
de vous les passer !

</p>

</div>

<div id="pied_de_page">

<p>

Copyright "Schtroumpf &amp; Co" 2007, Tous droits réservés <br/><br/>

<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df= Smiley leocomputer .dat&amp;dd=B&amp;display=counter&amp;ft=8" alt="Compteur"/>
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df= Smiley leocomputer .dat&amp;dd=B&amp;display=clock&amp;ft=8" alt="Horloge"/>
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df= Smiley leocomputer .dat&amp;dd=B&amp;display=date&amp;dformat=DDMMYY&amp;ft=8" alt="Date"/>

<a style="color: rgb(0,0,0); background-color:black;"
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>

</p>

</div>


</body>

</html>


Et le CSS

a écrit :
body
{
width: 700px;
margin: auto;
margin-top: 20px;
margin-bottom; 20px;
font-family : "Comic Sans MS", "Arial Black", serif;
color: white;
background-color: black;
}


#en_tete
{
width: 850px;
height: 220px;
background-image: url("http://leocomputer.free.fr/Banniere.jpg");
background-repeat: no-repeat;
margin-bottom: -20px;
color: white;
background-color: black;
}

#menu
{
float: left;
width: 150px;
margin-right: 20px;
}

.element_menu
{
color: white;
background-image: url("http://leocomputer.free.fr/Background_Menu.jpg");
background-repeat: repeat-x;
margin-bottom: 100px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* Tous les titres de menus */
{
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 20px;
}

.element_menu li
{
margin-bottom: 15px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a
{
color: white;
}

.element_menu a:hover
{
background-color: rgb(5,218,218);
color: black;
}

a
{
color:white;
}


a:hover
{
background-color: rgb(5,218,218);
color: white;
}

#corps
{
margin-left: 10px;
padding: 5px;
color: white;
background-repeat: repeat-x;
background-color: black;
/*border: 2px solid black; Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: white;
background-color: rgb(0,0,1);
background-repeat: repeat-x;
border: 2px solid black;
margin-left: 20px;
}


Merci pour votre aide !
Administrateur
Leo46 a écrit :
Le code XHTML

Hello,

Attention, tu emploies à chaque fois les marqueurs de CITATION (quote) pour encadrer ton code. Il existe un marqueur de CODE prévu pour cela.
J'ai posé une question, je te demande pas de me dire que mon message est pas correct Smiley cligne

Je ferai attention la prochaine fois Smiley lol
Modifié par Leo46 (29 Sep 2007 - 19:22)
[quote=Leo46]J'ai posé une question, je te demande pas de me dire que mon message est pas correct Smiley cligne

[... ]

A tout les coups personne n'est obligé de résoudre ton problème.
Administrateur
Leo46 a écrit :
J'ai posé une question, je te demande pas de me dire que mon message est pas correct Smiley cligne

Et moi c'est mon rôle de modérateur : faire en sorte que tout se passe dans la bonne humeur et dans les règles du forum.
C'est également faire en sorte que les messages soient accessibles à tous et dans ce cas, la différence entre une citation (balise <blockquote>) et un code source (balise <pre>) est fondamental.

Si ta remarque est ironique, c'est assez peu visible. Que tu te trompes dans l'emploi des marqueurs est tout à fait excusable. Que tu remballes un modérateur (ou n'importe quel autre membre d'ailleurs) qui t'en fait la remarque l'est beaucoup moins.
Sujet clos
Aller à