28173 sujets

CSS et mise en forme, CSS3

Présentation des listes déroulantes dans mise en page CSS

Bonjour à tous.
Je viens vers vous car j'ai un léger souci de présentation pour ma page internet.
Je vous laisse en juger par vous même:
http://develop.web.free.fr/pagesousIE6.JPG
Deux problèmes apparaissent sous Internet explorer 6 sur cette page et sont liés à mes barres de filtres par ville et par étoile.
En effet, les 2 listes déroulantes semblent ne pas faire partie du flux. J'ai tenté plusieurs possibilités comme celle de mettre un z-index à l'ensemble de mon menu supérieur à celui de la table où sont présentes les listes déroulantes pensant le faire apparaitre devant mais rien y fait.
Ce qui me surprend aussi, c'est que les autres éléments comme le texte "Tri par ville", "Tri par étoile" ainsi que les 2 boutons "Ok" ne posent quant à eux aucun problème de présentation et apparaissent bien derrière les sous menus quand je navigue dans le menu. Je paux aussi régler leur position sur la page alors que les listes déroulantes ne s'alignent pas avec le reste.
Ces problèmes ne sont bien évidemment présent que sous IE6 car tout marche bien sous firefox par exemple comme vous pouvez le voir:
http://develop.web.free.fr/pagesousFF.JPG
Je vous transmet le code css de ma page (hors menu, bandeau et pied de page qui sont externalisés sur une autre page pour une réutilisation sur l'ensemble de mon site)

body,html {
margin:0;
height:100%;
}

body{
	background: #F3FCB4;
	font-family: arial;/* on applique une police et une taille de base pour les caractères. Mettre des "" pour un nom de police comportant un espace.*/
}


div#global{
	height:632px;
	width:1002px;
	padding:0;
	background: url(contour.gif) center repeat-y;
	margin: 0 auto;
	position: relative;
}

div#contenu {
	position: absolute;
	padding: 0;
	left:30px;
	top: 85px;
	height:507px;
	width:990px;
	background: #fff;
	}
table.tri {     //tableau où se situe mes listes déroulantes
	padding: 0;
	margin:0;
	z-index:3;
	}
span.Style1 {
	font-size:14px;
	}
td.nom {
	font-weight:bold;
	font-size:15px;
	text-align:center;
	}
td.nom a{
	color:#000;
	text-decoration:none;
	}
td.photo {
	padding:0 4px 0 6px;
	}
table.tableau {
	float:left;
	position:relative;
	margin: 2px 17px;
	}
td.fiche {
	font-size: 14px;
	text-align:center;
	background:url(fiche-complete1.gif) no-repeat;
	}
td.fiche a {
display: block;
border: 0 none;
text-decoration:none;
background:none;
}
td.fiche :hover {
background: url(fiche-complete.gif) no-repeat;
}



Est-ce que quelqu'un a une idée de ce qui peut se passer parce que moi je ne vois plus quoi faire.
Merci par avance de toute aide ou piste de réflexion apportée pour que je sorte de ma stagnation.
Modifié par dread (09 Feb 2007 - 16:23)
Desolé pour la seconde image. Super_baloo8 tu as parfaitement raison.
Vous pourrez ainsi voir le résultat que j'espère atteindre sous IE 6.
Mais c'est pas gagné.
Comme je le disais, j'ai tenté de mettre un z-index sur mon menu à 1000 et un z-index à 3 pour la table où sont présents les listes déroulantes (table.tri).
Et ce qui est vraiment bizarre, c'est que le bouton "ok" qui est présent dans la même cellule que la liste déroulante dans les deux cas (ville et etoile) passe en dessous des sous menus lorsque je les affiche.
Si quelqu'un pouvait vraiment m'aider avant que je ne m'arrache tous les cheveux!!!

Je vous transmet le code de ma table qui contient les listes si toutefois le problème se trouvait là:

<table class="tri" border="0" cellspacing="0" cellpadding="0" valign="top">
  <tr>
    <td>Tri par ville</td>
    <td><form id="frm_ville" name="frm_ville" method="post" action="annuaire-campingtest.php">
            <select name="ville" id="ville">
              <option value="toutes">Afficher tous les campings</option>
              <?php
do {  
?>
              <option value="<?php echo $row_rs_ville['ville_etab']?>"><?php echo $row_rs_ville['ville_etab']?></option>
              <?php
} while ($row_rs_ville = mysql_fetch_assoc($rs_ville));
 
?>
       </select>
	   <input name="Submit" value="Ok" type="submit" />
	   </form></td>
    <td>Tri par étoiles</td>
    <td><form id="frm_etoile" name="frm_etoile" method="post" action="annuaire-campingtest.php">
	<select name="etoile" id="etoile">
      <option value="toutes">Afficher tous les campings</option>
      <?php
do {  
?>
      <option value="<?php echo $row_rs_etoile['nb_etoile_camping']?>"><?php echo $row_rs_etoile['nb_etoile_camping']?></option>
        <?php
} while ($row_rs_etoile = mysql_fetch_assoc($rs_etoile));
 
?>
			</select>
			<input name="Submit" value="Ok" type="submit" />
	   </form></td>
	     </tr>
</table>

Je sais que ce n'est pas un forum php mais peut-être que c'est la table et les denominations qui merdent.
Merci
Modifié par dread (09 Feb 2007 - 16:33)
Sujet clos
Aller à