Comment cliquer sur un float???

Résolu

nabizer Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
nabizer Messages postés 4 Date d'inscription Statut Membre Dernière intervention - 10 févr. 2008 à 15:32

Bonjour, bonsoir,

jai un ptit probleme qui ne veut pas se regler!!!!!
voila: jai deux bloc sur mon site et pour les placer l un a coté de l autre , j ai utilisé un float, le problem est qu'avec le float je ne peut plus cliquer sur son contenu!!
si vous avez une solution merci d avance!!!!!!!!!

Afficher la suite

A voir également:

Comment cliquer sur un float???
Vérifier un lien avant de cliquer - Guide
Cliquer sur le lien ✓ - Forum Matériel & Système
Je ne peux plus cliquer sur mon bureau - Forum Windows 10
Cliquer ou cliquez sur le lien - Forum Réseaux sociaux
J'ai cliqué sur un lien douteux android - Forum Virus

6 réponses

Réponse 1 / 6

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Une proposition.

Mets la “#sidebar” DANS le “#mainContent”.

<div id="mainContent">
 <div id="sidebar">
   <h3>Qui sommes nous?</h3>

…

 </div>
 <h1>Recherche de recettes</h1>

et elle ne sera plus recouverte par l'autre.

--

Réponse 2 / 6

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

Si tu ne peux pas cliquer (en général, ce n'est pas sur un “float” qu'on clique), c'est que ce que tu veux atteindre est certainement recouvert par autre chose.

Montre-nous ton code, donne-nous l'adresse de la page.

--

Réponse 3 / 6

nabizer

slt,

alors voila mon code, il est vrai qu'il y a du php autour du lien mais je ne peut pas cliquer sur le texte au dessus

merci d avance pou votre aide!!!!
<div id="sidebar">
<h3>Qui sommes nous?</h3>
<p id="presentation association">L’association APAA (Association pour la Prévention des Allergies
Alimentaires) régie par la loi de 1901 est spécialisée
dans la prévention et le conseil des allergies trophallergènes.
Elle vous propose des idées de recette pour les personnes atteintes de contraintes alimentaires.</p>
<p>Régalez-vous!!! </p>
<hr/>
<h3 align="center">Les nouvelles recettes</h3>



<?php
require_once ("connexion.php");

$reponse = mysql_query('SELECT nom_recette FROM recette ORDER BY num_recette desc LIMIT 2');
while($data = mysql_fetch_assoc($reponse)){
// Ici on dirige vers le script new_recette.php qui génère l'affichage détaillé des recettes.
echo '<a href="new_recette.php">'.$data['nom_recette']."</a>".NL;
}; // Fin de la boucle des news

?>
</div>

Réponse 4 / 6

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Merci, mais ce n'est pas suffisant.

Il faudrait le code entier de la page. HTML et CSS.
Ou une adresse.

++
Merci de penser à utiliser le bouton indiqué.

--

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

nabizer Messages postés 4 Date d'inscription Statut Membre Dernière intervention

ok, alors voila le html de la page:

<!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=ISO-8859-1" />
<link href="stylnew.css" rel="stylesheet" type="text/css" />

<title>Recette pour allergiques</title>
</head>

<body class="twoColElsLtHdr">
    <div id="container"> 
<div id="header">
       <img src="logo4.gif"="" /> 
       <h1>Recettes et allergies</h1>
        
</div>
<table width="100%" cellspacing="0" id="tab">
<tbody id="tabnav">

    
  <tr><td  class="active" >Accueil</a></td>
      <td ><a href="recettes_insert.htm">Proposer une recette</a></td>
      <td ><a href="forum.html">Forum</a></td>
      <td ><a href="faq.html">FAQ</a></td>
      <td ><a href="liens.html">Liens</a></td>
      <td ><a href="contact.html">Contact</a></td>
  </tr>
  </tbody>
</table>

 
 <div id="sidebar">
      <h3>Qui sommes nous?</h3>
      <p id="presentation association">L&#8217;association APAA (Association pour la Pr&eacute;vention des Allergies 
      Alimentaires) r&eacute;gie par la loi de 1901 est sp&eacute;cialis&eacute;e 
      dans la pr&eacute;vention et le conseil des allergies trophallerg&egrave;nes. 
    Elle vous propose des idées de recette pour les personnes atteintes de contraintes alimentaires.</p>
      <p>Régalez-vous!!! </p>
     <hr/>
       <h3 align="center">Les nouvelles recettes</h3>
       
       <!-- Script php pour afficher les 3 dernières recettes ajoutées à la base de données -->
       <!-- ce script nous oblige à nommer notre page d'accueil ou index en .php et non en .html : pour que le script s'éxecute correctement --><!-- fin de #sidebar1 -->
      <?php
       require_once ("connexion.php");
       
       $reponse = mysql_query('SELECT nom_recette FROM recette ORDER BY num_recette desc LIMIT 2');
       while($data = mysql_fetch_assoc($reponse)){
          // Ici on dirige vers le script new_recette.php qui génère l'affichage détaillé des recettes.
          echo '<a href="new_recette.php">'.$data['nom_recette'].'</a>'.NL;
        }; // Fin de la boucle des news

       ?>
    </div>

 
  <div id="mainContent">
    <h1>Recherche de recettes</h1>
   
        <form action = "recettes_recherche.php" method="post">
        <fieldset>
		<!-- le fieldset permet de donner un cadre au formulaire-->
	<h3>Ingrédient(s) : <b>Veuillez saisir 3 ingrédients maximum et au singulier.
	  </b><br/><br/>
      
	 <b>
		<input type="text" name="ingredient1" size="16" />
		ET 
		<input type="text" name="ingredient2" size="16" />
		ET 
		<input type="text" name="ingredient3" size="16" />
	</b></h3>
	<br/>
	<h3>Sélectionnez 1 à 3 allergie(s) :<b>
	  <select name="allergie1" size="1">
	    <option value=0></option>
	    <option value=1>sans gluten</option>
	    <option value=2>sans oeufs</option>
	    <option value=3>sans soja</option>
	    <option value=4>sans produits laitiers</option>
	    <option value=5>sans arachides</option>
	    </select>
	    ET
	    <select name="allergie2" size="1">
	      <option value=0></option>
	      <option value=1>sans gluten</option>
	      <option value=2>sans oeufs</option>
	      <option value=3>sans soja</option>
	      <option value=4>sans produits laitiers</option>
	      <option value=5>sans arachides</option>
        </select>
	    ET
	    <select name="allergie3" size="1">
	      <option value=0></option>
	      <option value=1>sans gluten</option>
	      <option value=2>sans oeufs</option>
	      <option value=3>sans soja</option>
	      <option value=4>sans produits laitiers</option>
	      <option value=5>sans arachides</option>
        </select>
	    </b>
	  <br/>
	</h3><br/>
	  <h3>Type de plat :
	  <b> 
	    <input name="type1" value="Entree" type="checkbox">
	    Entrée
	    </input>
	    <input name="type2" value="Plat principal" type="checkbox">
	    Plat principal
	    </input>
	    <input name="type3" value="Dessert" type="checkbox">
	    Dessert
	    </input>
	     </b> </h3>
<br/>
	<h3>Prix
	  :<b>
	    <input type="radio" name="cout" value="0" checked >
	    Indifférent
	    <input type="radio" name="cout" value="E" >
	    €
	    <input type="radio" name="cout" value="EE"  >
  €€
	    <input type="radio" name="cout" value="EEE"  >
  €€€	</b>	</h3>
<br/>
	<h3>Difficulté : <b>
	  <input type="radio" name="difficulte" value="0" checked >
	  Indifférent
	  <input type="radio" name="difficulte" value="petit" >
	  Petit chef
	  <input type="radio" name="difficulte" value="moyen"  >
	  Moyen chef
	  <input type="radio" name="difficulte" value="grand"  >
	  Grand chef	</b></h3>
	<br/>
	<h3>Choisissez le temps total de réalisation : <b>
	  <select name="temps" size="1">
	    <option value=0 selected>peu importe</option>
	    <option value=1>maximum 15 min</option>
	    <option value=2>maximum 30 min</option>
	    <option value=3>maximum 45 min</option>
	    <option value=4>maximum 1 heure</option>
	    <option value=5>maximum 1 heure 30</option>
	    <option value=6>maximum 2 heures</option>
	    </select>
	</b></h3>
	<div id="valider">
  <input type="submit" name ="insertion" value="Chercher" />

        <br class="clearfloat" /></div>
 </fieldset>
</form>

<div id="footer">
         <a href="plandusite.html">Plan du Site</a> - <a href="mentionlegale.html">Mention légale</a></div>
<!-- fin de #container --></div>
    
    
      
</body>
</html>

et le css:

@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #BC0603;
	background-color: #EBE3AF;
	font-size: 14px;
    }


.twoColElsLtHdr h1 {
	font-size: 20px;
	text-align: center;
}
.twoColElsLtHdr #header img {
	margin-left: 15px;
	margin-top: 10px;
	margin-right: 0px;
	position: relative;
	width: 60px;
	height: 60px;
	float: left;
	margin-bottom: 10px;
}
.twoColElsLtHd  #mainContent  br  {
	font-size: 5px;
}
.twoColElsLtHdr #container h2 {
	font-size: 24px;
	font-weight: normal;
}





    
    /* Conseils pour la mise en page avec des éléments élastiques 
    1. La taille globale des éléments à mise en forme élastique étant basée sur la taille de police par défaut de l'utilisateur, l'aspect de ces éléments est relativement imprévisible. Utilisés correctement, ils sont toutefois plus accessibles pour les utilisateurs ayant besoin de polices de grande taille, puisque la longueur des lignes reste proportionnelle.
    2. Le dimensionnement des éléments div de cette mise en page est basé sur la taille de police 100 % dans l'élément body. Si vous réduisez la taille générale du texte en utilisant l'attribut font-size: 80% pour l'élément body ou le #container, n'oubliez pas que toute la mise en page sera proportionnellement réduite. Pour compenser ce risque, il est conseillé d'augmenter la largeur des divers éléments div.
    3. Si la taille de police est modifiée individuellement dans chaque élément div au lieu d'une modification globale (par ex. : la taille de police de #sidebar1 est réduite à 70 % et celle de #mainContent à 85 %), ce choix modifiera proportionnellement la taille globale de chaque élément div. Il est conseillé de modifier la taille de police en fonction de la taille de police finale.
    */
    .twoColElsLtHdr #container {
	width: 90%;  /* cette largeur crée un conteneur qui s'adaptera dans une fenêtre de navigateur de 800 pixels avec les tailles de police par défaut */
	background: #F3FDD9; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	border: 1px solid #000000;
	margin-left: 5%;
	margin-right: 5%;
    } 
    .twoColElsLtHdr #header {
	background-color: #BC0603;
	height: 80px;
    } 

    .twoColElsLtHdr #header h1 {
	text-align: center;
	color: #EBE3AF;
	font-style: oblique;
	font-size: 18px;
	position: relative;
	height: 50px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-top: 30px;
    }
.twoColElsLtHdr           /* Conseils pour sidebar1 :
    1. si vous définissez une valeur de taille de police pour cet élément div, la largeur totale de ce dernier sera ajustée en conséquence.
    2. Comme nous travaillons en ems, il est préférable de ne pas utiliser de remplissage pour l'encadré même. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
    3. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".twoColElsLtHdr #sidebar1 p".
    */
#sidebar      {
	width: 18em; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div */
	background-color: #D3F799;
	color: #BC0603;
	border: 1px solid #AB3B25;
	margin-top: 15px;
	margin-bottom: 0px;
	margin-left: 10px;
	float: left;
    }
.twoColElsLtHdr          #container         #sidebar  h3       {
	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
	margin-right: 10px;
	text-align: center;
	font-size: 18px;
    }
.twoColElsLtHd           #container         #sidebar p          {
	text-align: inherit;
	font-weight: bold;
	font-size: 12px;
	line-height: 20px;
	margin-left: 15px;
	margin-right: 15px;
	position: static;
}
.twoColElsLtHdr        #container       #sidebar  hr     {
	color: #BC0603;
	margin-right: 30px;
	margin-left: 30px;
	font-weight: bolder;
	border: 1px solid #BC0603;
}
.twoColElsLtHdr     #container  hr       {
	color: #BC0603;
	border: 1px solid #BC0603;
	margin-left: 100px;
	margin-right: 100px;
}



    
    /* Conseils pour mainContent :
    1. Si vous attribuez à cet élément div #mainContent une valeur de police différente de celle utilisée pour l'élément div #sidebar1, les marges de l'élément div #mainContent seront basées sur la taille de sa police, et la largeur de l'élément div #sidebar1 sera basée sur la taille de sa police. Il peut être utile de modifier les valeurs de ces éléments div.
    2. L'espace compris entre les éléments mainContent et sidebar1 est créé avec la marge gauche de l'élément div mainContent.  Quelle que soit la taille du contenu dans l'élément div sidebar1, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine.
    3. Pour éviter une perte de l'élément flottant, il peut être nécessaire de faire des tests pour déterminer la taille maximale approximative de l'image ou de l'élément, car cette disposition est basée sur une combinaison de la taille de police par défaut de l'utilisateur et des valeurs que vous définissez. Toutefois, si la taille de police d'un utilisateur est inférieure à la taille normale, l'espace disponible dans le div #mainContent sera moins important que celui que vous verrez lors de vos tests.
    4. Dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
    */
    .twoColElsLtHdr #mainContent {
	margin: 0 1,5em 0 30em; /* la marge droite peut être indiquée en ems ou en pixels. Elle crée l'espace dans la partie inférieure du côté droit de la page. */
	color: #BC0603;
	text-align: left;
	font-weight: normal;
	position: relative;
	padding-top: 0px;
    } 

.twoColElsLtHdr  #trouver  {
	padding-left: 30px;
	padding-right: 30px;

}




.twoColElsLtHdr #mainContent h1 {
	text-align: center;
	font-size: 24px;
	color: #BC0603;
	margin-top: 0px;
}




    .twoColElsLtHdr #footer {
	background-color: #BC0603;
	height: 25px;
	text-align: center;
	vertical-align: bottom;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	background-position: center center;
	position: relative;
	padding-top: 2,5px;
	padding-bottom: 2,5px;
    } 
.twoColElsLtHdr #container    #footer  a {
	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
	text-align: center;
	vertical-align: middle;
	height: 30px;
	color: #EBE3AF;
	text-decoration: none;
	font-size: 12px;
    }
.twoColElsLtHdr        #tab     #tabnav    td               {

	border: 
	float: left;
	border: 1px solid #BC0603;
	list-style-type: none;
	background-color: #D3F799;
	padding-top: 2px;
	padding-bottom: 2px;
	position: relative;
}
.twoColElsLtHdr #container #plansite {
	margin-left: 30px;
}

.twoColElsLtHdr  #container  #tab  #tabnav  li.active {
	border-bottom: 1px solid;
	background: #fff;
	width: 100%;
}


.twoColElsLtHdr #container #tab {
	list-style-type: none;
	
	text-decoration: none;
	text-align: justify;
	vertical-align: middle;
	background-color: #EBE3AF;
}
.twoColElsLtHdr #container #tab #tabnav tr {

}
.twoColElsLtHdr #tab #tabnav td {
	margin-left: 0%;
}
.twoColElsLtHdr   #mainContent  select  {
	font-size: 12px;
}

.twoColElsLtHdr #tab #tabnav {
	text-align: center;
	position: relative;
}
.twoColElsLtHdr  #valider  input   {
	font-size: 18px;
	color: #BC0603;
}
.twoColElsLtHdr   #tab    #tabnav  a  {
	text-decoration: none;
	letter-spacing: 3px;
	margin-top: 0px;
	color: #BC0603;
	font-weight: bold;
	font-size: 14px;
}
h3     {
	font-size: 14px;
	font-weight: bold;
}
.twoColElsLtHdr   b   {
	font-size: 14px;
	font-weight: normal;
}


.twoColElsLtHdr #proposer_recette {
	margin-left: 30px;

}
.twoColElsLtHdr #container a {
	color: #BC0603;
	font-weight: bold;
}


.twoColElsLtHdr #container #proposer_recette h3 {
	font-size: 14px;
	font-weight: bold;
}
.twoColElsLtHdr    #container    #recettes_recherche  h3    {
	font-size: 24px;
}

.twoColElsLtHdr #container p {
	margin-left: 30px;
}
.twoColElsLtHdr #container li {
	margin-left: 60px;
}


.twoColElsLtHdr #container #proposer_recette i {
	font-size: 14px;
}



.body p {
	font-size: 14px;
	color: #BC0603;
}

.twoColElsLtHdr #container #contact {
	margin-left: 30px;
	margin-right: 30px;
}
.twoColElsLtHdr #container #contact hr {
	border: 1px solid #BC0603;
}
.twoColElsLtHdr #tab #tabnav .active {
	background-color: #EBE3AF;
	font-weight: bold;
	letter-spacing: 3px;
}

Réponse 6 / 6

nabizer Messages postés 4 Date d'inscription Statut Membre Dernière intervention

milles merci Gihef ca marche!!!!!!

Discussions similaires

ne pas utiliser la souris mais le clavier

Selectionner sans souris =)

copier/coller a partir du clavier ?

Je dois cliquer plusieurs fois pour que ça ouvre

que veut dire cliquer le lien

Votre réponse

Discussions similaires