28172 sujets

CSS et mise en forme, CSS3

Fusion des marges, overflow hidden et display absolute

Bonjour,

Mon problème est précis. Après recherche pas de réponse qui cible exactement mon cas.

J'ai un formulaire et je voudrais une marge entre deux set label+champ.
Mes labels et inputs sont en block. Jusque là ça va.

Dans certains cas, je peux avoir un bouton pour afficher une aide (tooltip) à droite du champs input. Dans ce cas là, je dois placer mon input et mon bouton en float:left; dans un div à part du label. Mais mes marges fusionnent. Je perds donc l'écart entre les champs et ceux d'en dessous.

Un exemple de code pour mieux comprendre.

<!-- sans tooltip -->
<blockquote>
    <label for="title">Titre<em> *</em></label>
    <input type="text" name="title" id="title" value="" />		
</blockquote>

<!-- avec tooltip -->
<blockquote>
    <label for="seoUrl">Url SEO<em> *</em></label>
    <div class="input-tooltip">
        <input type="text" name="seoUrl" id="seoUrl" value="" />
        <div class="tooltip-note">
            <a title="aide" href="javascript:void(0)" onclick="$('#seoUrlHelp').show();"><img src="images/forms/help.gif" alt="aide" /></a>	
            <div id="seoUrlHelp" class="note" style="display: none;">
                <!-- peu importe le contenu de la tooltip -->			
            </div>
         </div>
    </div>
</blockquote>

<!-- un autre -->
<blockquote>
    <label for="truc">Truc<em> *</em></label>
    <input type="text" name="truc" id="truc" value="" />		
</blockquote>


CSS:

blockquote {   
   clear:both;
   text-align:left;
   margin:0 0 10px 0;
}

label {		
    display:block;
    text-align:left;
}

blockquote .input-tooltip {}

blockquote .input-tooltip input {float:left;}

.tooltip-note {
    float:left;
    position:relative;
    z-index:20003;
}
.note {
    position:absolute;
    left:-6px; top:0;
}


Donc ici on a le code essentiel qui pose problème. Sur mon <blockquote /> j'ai une marge en bas de 10px. Je devrais donc avoir une séparation de 10px entre chaque <blockquote />.

Mais quand j'ajoute ma tootlip, les marges fusionnent et je n'ai plus de séparation. Entre le 1er champ et le 2ème c'est ok, mais entre le 2ème et le 3ème pas de marge.

Si je met un attribut overflow:hidden sur .input-tooltip les marges ne fusionnent plus mais si le contenu de ma tooltip est trop grand c'est évidemment coupé.

Le padding:1px 0; ne corrige pas non plus le problème.

Vous avez une idée ? en restant propre. Pas de marge-bottom sur les input par ex. (et puis de toute façon dans IE6 ce ne sera surement pas bon avec ce genre d'astuce).

Merci beaucoup.


A+ benjamin.
Modifié par bd.webdev (22 Jul 2009 - 16:12)
J'ai corrigé en partie mon problème. Déjà j'ai rendu ça valide et j'ai simplifié les choses.


<!-- sans tooltip --> 
<fieldset>
    <label for="title">Titre<em> *</em></label> 
    <input type="text" name="title" id="title" value="" />         
</fieldset> 
 
<!-- avec tooltip --> 
<fieldset> 
    <label for="seoUrl">Url SEO<em> *</em></label>
    <input type="text" name="seoUrl" id="seoUrl" value="" /> 
    <div class="tooltip-note"> 
        <a title="aide" href="javascript:void(0)" onclick="$('#seoUrlHelp').show();"><img src="images/forms/help.gif" alt="aide" /></a>     
        <div id="seoUrlHelp" class="note" style="display: none;"> 
            <!-- peu importe le contenu de la tooltip -->             
        </div> 
     </div>
</fieldset> 
 
<!-- un autre --> 
<fieldset> 
    <label for="truc">Truc<em> *</em></label> 
    <input type="text" name="truc" id="truc" value="" />         
</fieldset>




fieldset {    
   clear:both; 
   text-align:left; 
   margin:0 0 10px 0; 
   border:0;
} 
 
label {         
    clear:right;
    display:block; 
    text-align:left; 
} 
input {float:left;}
  
.tooltip-note { 
    float:left; 
    position:relative; 
    z-index:20003; 
} 
.note { 
    position:absolute; 
    left:-6px; top:0; 
}


Le problème n'existe plus que dans IE6.

IE > 6, Firefox et les autres ok.

Donc une astuce pour IE6 du coup ?

Merci,
A+ benjamin.
bonsoir,

et en passant la marge exterieur en marge interieur ?

margin -> padding

La fusion ne devrait plus s'operer.

GC
Sujet clos
Aller à