28172 sujets

CSS et mise en forme, CSS3

Probleme de position du premier element d'un menu sous IE...

Salut a tous,
Je debute en CSS, et j'ai bricole un petit fichier pour afficher un menu vertical tout simple... Tout fonctionne sous la plupart des navigateurs de bonne qualite, mais (bizarrement) j'ai un souci d'affichage sous IE (uniquement teste avec le 8): le premier element des menu est decale sur la droite, quand tout les autres s'affichent correctement :

Voici un code demontrant ce probleme :

menu.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" xml:lang="fr" lang="fr">
<head>
<title>TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">@import url(style.css);</style>
</head>
<body>
<p>
<span class="title"><p><a href="menu.html"><strong>TITLE_LINK</strong><br/>subtitle_link</a></p></span>
</p>
<ul id="menu">
<dt><a href="menu.html">DT_LINK</a></dt>
<dd style="display:block">
<li><a href="menu.html">DT_DD_LI_LINK</a></li>
<li><a href="menu.html">DT_DD_LI_LINK</a></li>
<li><a href="menu.html">DT_DD_LI_LINK</a></li>
<li><a href="menu.html">DT_DD_LI_LINK</a></li>
<li><a href="menu.html">DT_DD_LI_LINK</a></li>
</dd>
</dd>
</ul>
</body>
</html>


style.css:

body {
	behavior: url(csshover.htc); 
	text-align: center; 
	background: #212121;
	color: #FFFF00;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}
a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	text-align: center; 
}
#menu {
	background: #212121;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
#menu dd {
	margin: 0;
}
#menu a {
	color: #CCCCCC;
	display: block;
	text-decoration: none;
}
#menu a:hover {
	color: #FFFFFF;
	background: #393939;
}


Si quelqu'un de plus informe que moi pouvait me filer un petit coup de main, ce serait super sympa ^^...
Bonjour Smiley smile

Sans regarder le css, je vois des trucs très étranges et non valides dans le html (11 erreurs sur 24 lignes de code XD ).
- p est un élément de block, tu ne peux pas le mettre dans un span qui est un élément inline
- il faut fermer la balise meta (mais ça c'est un détail)
- j'avoue mes lacunes avec les balises dt et dd parce que je ne les utilise jamais, mais je suis presque sûre qu'on n'a pas le droit de mélanger des ul li avec des dt dd (le validateur a crié au scandale !!)

Du coup, je pense que tu pourrais facilement résoudre ton souci de mise en page en corrigeant tout ça. A ta place je ferais un choix entre les definition listes, et les listes tout court. Dans ton cas, tu parles de "menu", donc je pense à navigation, du coup j'aurais tendance à choisir la solution ul / li qui est plus ou moins un standard en terme de navigation.

Bonne chance et n'hésite pas à revenir une fois le code valide si tu as encore des problèmes Smiley smile
Modifié par InpIxelItrust (05 Nov 2010 - 11:47)
Ermf,
Bon, comme je l'avais precise, je debute, et je n'avais meme pas conscience de cette affaire de validation Smiley cligne
Apres check, effectivement tout va mieux en se limitant a des <ul><li>, mais en fait j'utilisais les dd pour cacher certaines parties de mon menu en fonction du contexte (en realite, tout ca est dans du php avec les categories de menu a "expander" passees en url)...
Bon, je vais essayer de faire plus simple, je post un condense du php final a la fin (apres validation Smiley cligne )
Merci en tout cas
Bon, je n'ai qu'une chose a dire, tu dechires (donc ca marche Smiley cligne )
Voici un simplifie du php qui fonctionne dans mon cas:


<?php
$Gallery = $_GET['gallery'];
$Category = $_GET['category'];
?>
<!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" xml:lang="fr" lang="fr">
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<style type="text/css" media="screen">@import url(style.css);</style>
</head>
<body>
<span class="title"><a href="menu.php"><strong>TITLE_LINK</strong><br/>subtitle_title_link</a></span><br/>
<ul id="menu">
<a href="menu.php?category=<?php if ($Category!="Cat_01") { ?>Cat_01<?php } ?>&gallery=<?php echo($Gallery); ?>" target="_self">CAT_01</a>
</ul>
<ul id="menu" style="display:<?php if ($Category=="Cat_01") { echo(block); } else { echo(none); } ?>;">
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_01_Gal_01" target="_parent">GAL_01</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_01_Gal_02" target="_parent">GAL_02</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_01_Gal_03" target="_parent">GAL_03</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_01_Gal_04" target="_parent">GAL_04</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_01_Gal_05" target="_parent">GAL_05</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_01_Gal_06" target="_parent">GAL_06</a></li>
</ul>
<ul id="menu">
<a href="menu.php?category=<?php if ($Category!="Cat_02") { ?>Cat_02<?php } ?>&gallery=<?php echo($Gallery); ?>" target="_self">CAT_02</a>
</ul>
<ul id="menu" style="display:<?php if ($Category=="Cat_02") { echo(block); } else { echo(none); } ?>;">
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_02_Gal_01" target="_parent">GAL_01</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_02_Gal_02" target="_parent">GAL_02</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_02_Gal_03" target="_parent">GAL_03</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_02_Gal_04" target="_parent">GAL_04</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_02_Gal_05" target="_parent">GAL_05</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_02_Gal_06" target="_parent">GAL_06</a></li>
</ul>
<ul id="menu">
<a href="menu.php?category=<?php if ($Category!="Cat_03") { ?>Cat_03<?php } ?>&gallery=<?php echo($Gallery); ?>" target="_self">CAT_03</a>
</ul>
<ul id="menu" style="display:<?php if ($Category=="Cat_03") { echo(block); } else { echo(none); } ?>;">
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_03_Gal_01" target="_parent">GAL_01</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_03_Gal_02" target="_parent">GAL_02</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_03_Gal_03" target="_parent">GAL_03</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_03_Gal_04" target="_parent">GAL_04</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_03_Gal_05" target="_parent">GAL_05</a></li>
<li><a href="index.php?category=<?php echo($Category); ?>&gallery=Cat_03_Gal_06" target="_parent">GAL_06</a></li>
</ul>
</body>
</html>


Si tu regardes le resultat de la generation de la page par le serveur, tu verras qu'il reste des dizaines d'erreurs au niveau du passage de mon parametre "gallery" en url... J'ai loupe un truc de ce cote la ?

En tout cas, le rendu est desormais parfait quel que soit le brower, donc merci a toi ^^
<fontsize ridicule>
euh, mais comment on tag le sujet en "resolu" ?
</fontsize ridicule>
Modifié par nholleville (05 Nov 2010 - 15:35)
a écrit :
Si tu regardes le resultat de la generation de la page par le serveur, tu verras qu'il reste des dizaines d'erreurs au niveau du passage de mon parametre "gallery" en url... J'ai loupe un truc de ce cote la ?


Si tu as un truc en ligne je peux jeter un coup d'oeil mais juste avec le php je vais pas pouvoir faire grande chose ^^

Pour le résolu, il suffit d'éditer le premier message, et changer le titre en ajoutant un [résolu] devant.

Ravie que ça marche en tout cas Smiley smile
Sujet clos
Aller à