rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Pb css : z-index et calques

romain13, le mardi 13 novembre 2007 à 03:42:24
Bonjour,

Je suis en train de créer un site et j'ai un pb avec ma page css.
J'ai utilisé la propriété z-index pour mettre une image (en fait un cadre pour que ce soit plus joli) au dessus de plusieurs 'select' qui sont contenus dans un 'div'.
L'image est dans un 'div' et les 'select' sont dans un 'div', mais les 'div' sont successifs (c'est-à-dire non imbriqués). Le pb que j'ai est que je n'arrive plus à cliquer sur les 'select'.
Si qqun a une idée, qu'il n'hésite pas!

Voici la partie html :
<div id = "cadre">
          
        </div>
      
        <div id = "search">
          <input id = "searchText" type="text" size="15" />
          <input id = "searchBtn" type="button" value="Chercher" OnClick="actualise();" />
          <br />
        
          <select id = "genre" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>
          </select>
        
          <select id = "artiste" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>
          </select>
        
          <select id = "album" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>
          </select>
        
          <select id = "annee" size="5" onchange= "actualise();">
            <option value = "-1" selected> Tous </option>				
          </select>
        </div>


et la partie css :

#cadre
{
	position: absolute;
	top: 42%;
	left: 20%;
	width: 60%;
	height: 24%;
	/*border: solid 1px red;*/
	background: transparent url(../images/cadre.png) no-repeat;
	z-index: 3;
}
#searchText
{
	position: absolute;
	top: 42.8%;
	left: 21%;	
	z-index: 1;
	/*margin-top: 10px;
	margin-left: 30px;
	margin-bottom: 15px;*/
	border: 2px outset black;
}

#searchBtn
{
	/*display: none;*/
	position: absolute;
	top: 42.8%;
	left: 32.4%;
	z-index: 1;
	cursor: pointer;
	/*margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 15px;*/
	border: 2px outset black;
}

#searchBtn:hover
{
	color: #222;
	/*margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 15px;*/
	border: 1px outset black;
}

#searchBtn:active
{
	color: #444;
	/*margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 15px;*/
	border: 1px inset black;
}

#genre
{
	position: absolute;
	top: 47%;
	left: 21%;
	z-index: 1;
	cursor: pointer;
	/*margin-left: 30px;
	margin-bottom: 15px;*/
	background: #ddd;
	width: 100px;
	border: 2px outset black;
}

#artiste
{
	position: absolute;
	top: 47%;
	left: 30.9%;	
	z-index: 1;
	cursor: pointer;
	/*margin-bottom: 15px;
	margin-left: 0px;*/
	background: #ddd;
	width: 200px;
	border: 2px outset black;
}

#album
{
	position: absolute;
	top: 47%;
	left: 50.5%;	
	z-index: 1;
	cursor: pointer;
	/*margin-bottom: 15px;
	margin-left: 0px;*/
	background: #ddd;
	width: 200px;
	border: 2px outset black;
}

#annee
{
	position: absolute;
	top: 47%;
	left: 70.1%;
	z-index: 1;
	cursor: pointer;
	/*margin-bottom: 15px;
	margin-left: 0px;*/
	background: #ddd;
	width: 70px;
	border: 2px outset black;
}
Configuration: Windows XP
Firefox 2.0.0.9
Répondre à romain13  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
LeSurvivant, le mardi 13 novembre 2007 à 10:59:16
Bonjour romain,
pour pouvoir continuer à accéder a tes <select>, il faut que ceux-ci aient le calque avec un z-index le plus haut.
il n'y a pas d'autres moyens...
Répondre à LeSurvivant

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 romain13, le mardi 13 novembre 2007 à 11:36:35
Bonjour le survivant,

Si ce que j'ai fait ne peut pas marcher, connaitrais-tu une solution pour poser un cadre (crée à partir d'un logiciel d'éditions d'images) dessus un groupe de plusieurs 'select', tout en gardant le controle par rapport aux select (car pour l'instant, je ne peux plus cliquer).
En fait, je pensais qu'il existerait une propriété css qui permettrait d'accéder aux 'select' placés en "arrière-plan" d'une image.
Si tu as des idées sur le sujet, je veux bien en savoir plus.
Merci.
Répondre à romain13
Probleme de z-index et margin sur firefox (Résolu)Bonjour, J'ai deux petits soucis, Le premier étant que je n'arrive pas a faire fonctionner le z-index que ce soit sur ie ou firefox. Mes éléments ne se superposent pas... Le second étant que les marges sur ie sont deux fois plus petites que... www.commentcamarche.net/forum/affich-3549602-probleme-de-z-index-et-margin-sur-firefox
Z-index gif (Résolu)Bonjour, Voila mon petit probleme, J'essai de mettre un gif en dessous d'une image png via le parametre z-index et un css mais sa ne fonctionne pas. Est-ce que c'est possible de mettre un gif en dessous d'une image en fait... www.commentcamarche.net/forum/affich-6431206-z-index-gif
DHTML - L'animation des éléments L'animation des éléments présents sur une page Web se fait en modifiant leur propriété (position, hauteur, largeur, visibilité, z-index, ...) ou en utilisant leur méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un... www.commentcamarche.net/dhtml/dhtmlanim.php3
[CSS] Créer facilement des CSSUn outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle. La version Lite est gratuite. http://www.bradsoft.com/download/index.asp www.commentcamarche.net/faq/sujet-1035-css-creer-facilement-des-css
Equivalent de InDesign/Quark XPress/Publisher (gratuit)Microsoft Office Publisher, Quark XPress ou InDesign sont des programmes de publication assistés par ordinateur (PAO) permettant de concevoir et de créer des documents et supports de communication (plaquettes, brochures, etc.). Il peuvent être utilisé... www.commentcamarche.net/faq/sujet-6052-equivalent-de-indesign-quark-xpress-publisher-gratuit
[Linux] Compresser/Décompresser un fichier ZIPLes fichiers ZIP sont généralement destinés à un usage sous Microsoft Windows. Le format de compression privilégié sous Linux est GZip (.gz) ou le format Tarball (.tar.gz). Il est néanmoins possible de compresser et décompresser des fichiers ZIP à... www.commentcamarche.net/faq/sujet-955-linux-compresser-decompresser-un-fichier-zip
ZenPhoto (Résolu)Bonjour, je viens d'installer ZenPhoto sur mon site internet : http://www.pix-creations.com/maquette/zenphoto/index.php J'aimerais vous devander si vous savez comment je pourrais ne pas centrer l'album photo mais le mettre à gauche.... www.commentcamarche.net/forum/affich-3405081-zenphoto
Logo pour css (Résolu)Bonjour, serais-il possible de faire cette image http://www.cssbase.fr/index.php?file=Gallery&nuked_nude=index&op=view_screen&sid=860 mais! a la place du drapeau francais metre le drapeau belge? www.commentcamarche.net/forum/affich-8345379-logo-pour-css
ACCESS Concatenation (Résolu)slt à tous, voila j'ai un formulaire qui ne s'appuie sur aucune table ou requete avec: 1 zone indépendante avec le nom : destinataire ou j'aimerai concatener tous les champs que j'aurai selectionné de la zone de liste sous cette... www.commentcamarche.net/forum/affich-1425678-access-concatenation
Télécharger ZionEditZionEdit est un éditeur de programme des plus intuitifs et facile à configurer, en plus léger. Il est basé sur les composants Scintilla. Les langages C/C++, C#, Java, Perl, CSS, HTML(+JavaScript,PHP etc.), SQL(+MySQL), VB/VBScript, Ruby, LISP, Python... www.commentcamarche.net/telecharger/telecharger-34056535-zionedit
Télécharger ZoneAlarmZoneAlarm est un pare-feu convivial bloquant les pirates et autres menaces inconnues. Par ailleurs, ZoneAlarm : Identifie de façon systématique les pirates et bloque les tentatives d'accès Rend automatiquement votre ordinateur "invisible" à tous... www.commentcamarche.net/telecharger/telecharger-157-zonealarm
Télécharger CPU-zCPU-Z est un logiciel gratuit collectant des informations sur les principaux éléments de l'ordinateur : Processeur Nom et numéro Core stepping. Package. Voltage. Horloges interne et externe, multiplicateur. Jeu d'instructions... www.commentcamarche.net/telecharger/telecharger-34055055-cpu-z
CSS - Les classes de style Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la... www.commentcamarche.net/css/cssclass.php3
CSS - Les couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Le langage HTML définit des noms pour un nombre limité de couleurs (cf couleurs en HTML). Le nombre de couleurs... www.commentcamarche.net/css/css-couleurs.php3
CSS - Syntaxe des styles La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de préciser à quelles... www.commentcamarche.net/css/csssyntax.php3
Toutes les réponses pour « pb css : z index et calques »