28220 sujets

CSS et mise en forme, CSS3

[Résolu] Textarea & div : selection impossible

Bonjour à vous tous qui tenez ce formidable forum Smiley smile

Me voici à vous aujourd'hui pour un problème qui m'agace assez. Je vous explique donc :

J'ai un textarea tout simple avec comme style css suivant:
TEXTAREA {
	color: #000000;
	background-color: #CCCCCC;
	font-size: 14px;
	font-family: Trebuchet MS;
	border: 1px solid;
}


Rien de compliquer entres autres, le problème est que quand j'appelle mon div (centré sur le textarea), il m'est impossible de séléctionner mon #screentips.
Le problème, c'est qu'il est necessaire de le sélectionner car il contient un bouton "Fermer" et sans ça, mon calque div se retrouve sur le textarea avec impossibilité de voir ce que l'on écrit en dessous Smiley ohwell

Mon code de #screentips. 
#screentips {
	border: 1px #000000 solid;
	background-color: #d2d0ca;
	padding: 12px;
    position: absolute;
    left: 50%; 
    top: 50%;
    margin-top: -55px;
    margin-left: -105px;
}

Je le cache avec une banale fonction Javascript display.style = 'none'; mais là n'est pas le souci.

Quelqu'un pourrait m'expliquer pourquoi je n'ai aucun accès de sélection dessus ? Merci d'avance et continuez votre travail, vous faites un travail génial !
Modifié par bosam (22 Nov 2005 - 20:54)
<div id="zone">
<span id="Form">
<form action="addarticle.php?add=Ok" method="post" name="form">
[...]
	    Votre article : <br />
	    <textarea name="zonetexte" cols="57" rows="10" ></textarea>
		</p>
	    <p>
            <input type="submit" name="Submit" value="Ajouter !" />
            <input type="reset" name="Submit" value="Tout effacer" />
		</p>
  </form>
</span>
</div>
Page HTML
SHEET CSS : 
#zone {
	background-color : #EBEBEB;
	border: 1px #000000 solid;
	position: absolute;
	margin-left: 195px;
	margin-top: 10px;
	padding-left: 3px;
}
#Form {
	padding-left: 2px;
	display: block;
}
Modérateur
Bonjour bosam,

Je t'invite à valider ton code sur le validateur W3C. Le code doit être valide avant de chercher les bêtes noires.

Par exemple, dans ton code, je vois que tu as entouré ta balise form avec un span, ce qui est invalide. span est une balise de type inline, et une balise inline ne peut pas contenir une balise de type block et form est de type block.

Valide ton document, c'est la première étape pour résoudre les problèmes. Smiley smile
yyoupla a écrit :
hum... et où est passé le #screentips ?
je ne saisis pas ta question avec ce code...


Si le formulaire est faux, je fait un echo de 
echo "<div id=\"screentips\">";
		echo "<b>".STR_UNFULL."</b>";
		echo "<br /><a OnClick=\"javascript:CloseLayout('screentips')\" style=\"cursor : pointer\">Fermer</a>";
		echo "</div>";


@Merkel : Et si mon span est contenu dans form ? Merci pour vos réponses Smiley smile
Je vais de ce pas valider mon code pour voir mes erreurs.
et où est ce que tu tu places ce div après ?

il faudrait nous donner tous les éléments pour qu'on puisse t'aider...
yyoupla a écrit :
et où est ce que tu tu places ce div après ?

il faudrait nous donner tous les éléments pour qu'on puisse t'aider...


Oui, désolé, je n'y pense pas forcément que ça pourrait être ça la solution au problème..

Donc, mon code 
<div id="screentips">
<strong>Tous les champs n&#39;ont pas &eacute;t&eacute; remplis</strong><br />
<a OnClick="javascript:CloseLayout('screentips')" style="cursor : pointer">Fermer</a>
</div>
Se positionne juste en dessous le 
<div id="zone">
.

P.S: Il n'y a que sur les pages où un textarea est présent que j'ai l'impossibilité de selectionner.
Modérateur
bosam a écrit :

Et si mon span est contenu dans form ?


Le span pourrait se trouver dans le form, mais à condition de respecter la règle. Aucun élément de type block à l'intérieur d'un élément de type inline.

Mais à quoi sert-il ton span au juste ? Les spans sont normalement utilisés pour donner du style à certains mots d'un texte. Par exemple :


<p>Lorem ipsum dolor sit amet, <span class="special">consectetuer</span> adipiscing elit. In adipiscing imperdiet nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


Et avec la feuille de style, tu peux modifier ce qui a dans le span, comme changer sa couleur, sa taille, son style, etc...

Donc dis-moi à quoi ton span sert, et je te dirai qui tu es... huh... Smiley eek
Merkel a écrit :


Le span pourrait se trouver dans le form, mais à condition de respecter la règle. Aucun élément de type block à l'intérieur d'un élément de type inline.

Mais à quoi sert-il ton span au juste ? Les spans sont normalement utilisés pour donner du style à certains mots d'un texte. Par exemple :

Et avec la feuille de style, tu peux modifier ce qui a dans le span, comme changer sa couleur, sa taille, son style, etc...

Donc dis-moi à quoi ton span sert, et je te dirai qui tu es... huh... Smiley eek


J'utilise parfois (ne pas taper) le span comme une autre forme de <div>, pour moi il se transforme en div de classe 2 quand son display est sur block.
Je l'utilise pour certains mots qui doivent être spécialisés aussi.

..
Modérateur
bosam a écrit :


J'utilise parfois (ne pas taper) le span comme une autre forme de <div>, pour moi il se transforme en div de classe 2 quand son display est sur block.


Baisse tes pantalons, tu vas recevoir une fessée ! Smiley biggol

Dans ce cas, il faut utiliser un div, c'est fait pour ca. Tu peux utiliser l'attribut class pour donner différents styles à des divs, comme ceci :

html

<div>Contenu d'un div de base</div>
<div class="div_special">Contenu d'un div spécial</div>


css

div {
les styles des divs
}

div.div_special {
les styles des divs spéciaux
}


Je t'invite aussi à lire ce tutorial.
Merkel a écrit :


Baisse tes pantalons, tu vas recevoir une fessée ! Smiley biggol


loool Smiley biggrin Smiley biggrin

Je sais, mais bon c'est une vieille habitude ^^

J'ai modifié. Mes spans sont devenus des divs et l'attribut "display: block" à disparu de certains. Mais cela ne résout pas mon problème de mon textarea et de div impossible à séléctionner.. Smiley decu
Modérateur
Pourrais-tu mettre ta page en ligne ? Je me sens un peu paresseux aujourd'hui pour tester ton code et trouver ce qui cloche. Une fois en ligne, c'est plus facile, on peut d'abord constater le problème, valider ton code, et corriger si besoin est. Simple suggestion. Smiley smile

Pour le display:block, je ne sais pas dans quel contexte tu le met, mais par défault, les div sont en display block.
Merkel a écrit :
Pourrais-tu mettre ta page en ligne ? Je me sens un peu paresseux aujourd'hui pour tester ton code et trouver ce qui cloche. Une fois en ligne, c'est plus facile, on peut d'abord constater le problème, valider ton code, et corriger si besoin est. Simple suggestion. Smiley smile

Pour le display:block, je ne sais pas dans quel contexte tu le met, mais par défault, les div sont en display block.


Pour la mettre en ligne, c'est impossible, mon code est trop complexe pour mettre à part seulement cette partie.

Quand j'ai dis, que je supprimais les 'display: block' c'était parcequ'ils étaient supposés être pour des spans Smiley cligne Comme je savais que les divs était 'display: block;' auto, cela ne m'était d'aucun besoin.

Mais, en mettant mon 'z-index' à 1000 comme yyoupla l'avait conseillé, cela a marché Smiley lol

Donc je crois que je peux mettre un gros [Résolu] sur mon topic Smiley smile

Merci pour toute votre aide Smiley lol
Sujet clos
Aller à