J'ai un problème en css

ortolojf · 8 Septembre 2016

Bonjour

J'ai un problème pour un formulaire ultra bateau : Le champ input type="hidden" semble rendre impossible de modifier la couleur du submit.

Voici le code :

Code:

<!-- Dans le head... //-->
<style>
form.form_apm input type=["hidden"] {
color: inherit;
}

form.form_apm input type=["submit"] {
color: white;
}
</style

<form class="form_apm" method="post">
<input type="hidden" value="345">
<input type="submit" value="ok">
</form>

Le premier "color:inherit;" et le "color:white;" sont rejetés ( barrés ) par Chrome et Firefox.

Comment appliquer le "color:white;" au bouton "ok" ?

Merci beaucoup de vos réponses.

Amicalement.

spout · 8 Septembre 2016

ortolojf a dit:

C'est une syntaxe que t'as inventé ?

Code:

form.form_apm input[type="hidden"] {...}
form.form_apm input[type="submit"] {...}

Complément: https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut

NB: un champ de type hidden ne s'affiche pas.

ortolojf · 8 Septembre 2016

Bonjour Spout

Oui, mais même si je ne met rien à l'input type="hidden" ( pas de color:inherit" ) , le input type="submit" ne sera pas modifié par le "color:white;".

Comment faire en sorte que le bouton submit "ok" s'affiche en blanc ?

Pour infos, j'ai terminé de mettre au point le script tarteaucitron en full PHP et sans Javascript et sans paramètre dans l'url, il ne reste plus que ce petit problème css

Merci beaucoup de ton aide.

Respectueusement.

spout · 8 Septembre 2016

En utilisant background-color au lieu de color:
https://jsfiddle.net/tvuz8yxg/

ortolojf · 8 Septembre 2016

Bonjour Spout

Merci beaucoup de ton aide.

Avec "color: white;" ou "background-color:white;", j'obtiens maintenant avec le code ci-dessous, un bouton avec "Gestion des cookies " en noir sur fond blanc.

Les classes se terminant par : "_inline-block" ou "_none" correspondent à : "display:inline-block;" et "display:none;".

Respectueusement.

Code:

<style>
form.form_perso {
  border: none;
  padding:0;
}
form.form_perso input[type=submit] {
  background-color:white;
  cursor:pointer;
  border: none;
  padding:0;
}
</style>


<div id='tarteaucitronAlertBig' class="tarteaucitron_none">
 <span id='tarteaucitronDisclaimerAlert'>
 En poursuivant votre navigation, vous acceptez l"utilisation de services tiers pouvant installer des cookies
 </span>
 <span id='tarteaucitronPersonalize'>
<form class="form_perso" method="post">
<input type="hidden" name="param" value="4010">
<input type="submit" value="Personnaliser">
</form> </span>
 <span id='tarteaucitronCloseAlert'>
<form class="form_perso" method="post">
<input type="hidden" name="param" value="7010">
<input type="submit" value="Fermer">
</form> </span>
</div>
<div id='tarteaucitronAlertSmall' class="tarteaucitron_inline-block">
 <span id='tarteaucitronDot' class="tarteaucitron_redDark"></span>
<form class="form_perso" method="post">
<input type="hidden" name="param" value="4020">
<input type="submit" value="Gestion des cookies">
</form></div>
</div>
</body>
</html>

ortolojf · 8 Septembre 2016

Rebonjour

Pour faire répondre tarteaucitron aux formulaires, les noms et paramètres des fonctions à lancer sont enregistrés dans une table MySQL, puis la fonction correspondant au paramètre hidden est lancée au chargement de la page suivante.

Cà marche impec ( sans aucun Javacript ), et je mettrai le script sur mon site une fois que le problème css aura été réglé.

Respectueusement.

ortolojf · 9 Septembre 2016

Je vous demande pardon

En fait, que soit avec "color:white:;" ou "background-color:white;" , j'ai le même résultat ( faux ) : Le champs submit a une couleur de fond blanche et les caractères "Gestion des cookies" sont en noir.

Ceci avec le code de l'avant-dernier message.

Je ne sais pas comment faire en sorte que les caractères soient en blanc.

Merci de votre aide.

Respectueusement.

ortolojf · 10 Septembre 2016

Super

Mon adaptation full PHP de tarteaucitron ( et sans paramètre dans l'url ) fonctionne.

Le css a été arrangé.

Reste mon système de notation par étoiles, dont l'apparence est parfaite mais dont les formulaires ne se déclenchent pas.

Voici les codes html et css :

Code:

<!-- HTML //-->

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
<br />
<div class="sous_titre" itemprop="votes">632</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">4 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<ul class="star-rating">
	<li class="current-rating" style="width:80px;"></li>
	<li>
		<form class="one-star" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="1">
		<input type="submit" value="1">
		</form>
	</li>
	<li>
		<form class="two-stars" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="2">
		<input type="submit" value="2">
		</form>
	</li>
	<li>
		<form class="three-stars" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="3">
		<input type="submit" value="3">
		</form>
	</li>
	<li>
		<form class="four-stars" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="4">
		<input type="submit" value="4">
		</form>
	</li>
	<li>
		<form class="five-stars" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="5">
		<input type="submit" value="5">
		</form>
	</li>
	<li>
		<form class="six-stars" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="6">
		<input type="submit" value="6">
		</form>
	</li>
	<li>
		<form class="seven-stars" action="http://localhost/" method="post">
			<input type="hidden" name="param" value="7">
		<input type="submit" value="7">
		</form>
	</li>
</ul>
<meta itemprop="average" content="4" /><meta itemprop="best" content="7" /><meta itemprop="worst" content="1" /></div>
&nbsp;&nbsp;<div id="message">
</div>
</div>

<!--  CSS  //-->

/*  styles for the star rater */
ul.star-rating
{
list-style-type:none;
margin-left:auto;
margin-right:auto;
padding:0px;
width: 140px;
height: 20px;
position: relative;
background: url(images/star_white.gif) top left repeat-x;
}
ul.star-rating li
{
padding:0px;
margin:0px;
height:20px;
width: 20px;
float: left;
}
ul.star-rating li form
{
display:block;
width:20px;
height: 20px;
line-height:20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20; 
position: absolute;
padding: 0px;
overflow:hidden;
}
ul.star-rating li form:hover
{
background: url(images/star_yellow.gif) left center;
z-index: 2;
left: 0px;
border:none;
}
ul.star-rating form.one-star
{
left: 0px;
}
ul.star-rating form.one-star:hover
{
width:20px;
}
ul.star-rating form.two-stars
{
left:20px;
}
ul.star-rating form.two-stars:hover
{
width: 40px;
}
ul.star-rating form.three-stars
{
left: 40px;
}
ul.star-rating form.three-stars:hover
{
width: 60px;
}
ul.star-rating form.four-stars
{
left: 60px;
} 
ul.star-rating form.four-stars:hover
{
width: 80px;
}
ul.star-rating form.five-stars
{
left: 80px;
}
ul.star-rating form.five-stars:hover
{
width: 100px;
}
ul.star-rating form.six-stars
{
left: 100px;
}
ul.star-rating form.six-stars:hover
{
width: 120px;
}
ul.star-rating form.seven-stars
{
left: 120px;
}
ul.star-rating form.seven-stars:hover
{
width: 140px;
}
ul.star-rating li.current-rating
{
background: url(images/star_green.gif) left bottom;
position: absolute;
height: 20px;
display: block;
text-indent: -9000px;
z-index: 1;
}

Tout est ok, l'apparence est ok, les étoiles sont formatées, mais un clic sur une étoile ne déclenche pas du tout le formulaire.

C'est la dernière chose avant que je ne mette le soft sur mon site.

Super merci pour votre aide.

Amicalement.

ortolojf · 12 Septembre 2016

Bonjour

J'ai réussi à pondre ce css, et les formulaires fonctionnent maintenant, mais quand je survole la rangée d'étoiles, une seule étoile s'affiche.

J'ai ciblé les jumeaux adjacents d'après avec l'opérateur css next siblings ( ~ ), en les rendant invisibles ( z-index: 2; ), mais je ne sais pas comment cibler les jumeaux précédents, pour les rendre visibles.

Voici le code html et css, réduit à 3 étoiles :

Code:

html :
------
<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
        <div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
        <ul class="star-rating">
                <li class="current-rating" style="width:80px;"></li>
                <li><form title='1 étoile parmi 7' class='one-star' method="post">
                        <input type="hidden" value="1">
                        <input type="image" alt=''>
                </form></li>
                <li><form title='2 étoiles parmi 7' class='two-stars' method="post">
                        <input type="hidden" value="2">
                        <input type="image" alt=''>
                </form></li>
                <li><form title='3 étoiles parmi 7' class='three-stars' method="POST">
                        <input type="hidden" value="3">
                        <input type="image" alt=''>
                </form></li>
        </ul>
        </div>
</div>

css :
------

/*  styles for the star rater */
#staring_form
{
background-color:#fff;
border-collapse:collapse;
border-radius:0.5em;
border:thin solid #000;
display:inline-block;
font-size:18px;
margin-left:auto;
margin-right:auto;
padding: 0.7em 0.5em;;
position:relative;
text-align:center;
max-width:90%;
z-index:0;
}
ul.star-rating
{
list-style-type:none;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
width: 140px;
height: 20px;
position: relative;
background: url(/images/star_white.gif) top left repeat-x;
padding:0px;
border:none;
}
ul.star-rating li
{
padding:0px;
margin:0px;
border:none;
height:20px;
width: 20px;
float: left;
}
.star-rating li form
{
display:block;
cursor:pointer;
width:20px;
height: 20px;
background: none;
line-height:20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
border:none;
margin:0px;
overflow:hidden;
}
ul.star-rating li form input
{
display:block;
color:transparent;
z-index: 30;
padding: 0px;
border:none;
margin:0px;
}
ul.star-rating li form input:hover
{
cursor:pointer;
background: url(/images/star_yellow.gif) left center no-repeat;
z-index: 30;
}
ul.star-rating li form input[type=image]:hover ~ input
{
z-index: 2;
}
ul.star-rating form.one-star
{
left: 0px;
}
ul.star-rating form.one-star:hover
{
width:20px;
}
ul.star-rating form.two-stars
{
left:20px;
}
ul.star-rating form.two-stars:hover
{
width: 40px;
}
ul.star-rating li.current-rating
{
background: url(/images/star_green.gif) left bottom;
position: absolute;
height: 20px;
display: block;
text-indent: -9000px;
z-index: 1;
}

Merci beaucoup de votre aide.

Amicalement.

Jean François Ortolo

ortolojf · 12 Septembre 2016

Rebond

Je ne connaissais pas ce sélecteur :

nth-last-of-type(x)

Est-ce que ce sélecteur, est largement supporté par les navigateurs ?

En fait ce sélecteur semble être la réponse à mon besoin :

Cibler les jumeaux précédents de mes input.

Comment se fait-il, que sur le net, ils disent tous que c'est impossible de cibler des éléments jumeaux précédents ?

Manifestement, je peux faire une déclaration du type :

Code:

 form input:hover:nth-last-of-type(1), 
 form input:hover:nth-last-of-type(2), 
 form input:hover:nth-last-of-type(3), 
 form input:hover:nth-last-of-type(4), 
 form input:hover:nth-last-of-type(5), 
 form input:hover:nth-last-of-type(6), 
 form input:hover:nth-last-of-type(7), 
 form input:hover:nth-last-of-type(8), 
 form input:hover:nth-last-of-type(9) {
 background: url(/images/star_yellow.gif) left center no-repeat;
z-index: 20;
}

Pour que les étoiles d'avant celle survolée soient visibles.

Merci de votre aide.

Amicalement.

ortolojf · 13 Septembre 2016

Problème quasiment résolu

Code:

HTML :
-------

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">

<ul class="star-rating"><li class="current-rating" style="width:80px;"></li><li><form title=' 7 étoiles parmi 7' method="post"><input type="hidden" value="7"><input type="image" value='' alt=''></form></li><li><form title='6 étoiles parmi 7' method="post"><input type="hidden" value="6"><input type="image" value='' alt=''></form></li><li><form title='5 étoiles parmi 7' method="POST"><input type="hidden" value="5"><input type="image" value='' alt=''></form></li><li><form title='4 étoiles parmi 7' method="post"><input type="hidden" value="4"><input type="image" value='' alt=''></form></li><li><form title='3 étoiles parmi 7' method="post"><input type="hidden" value="3"><input type="image" value='' alt=''></form></li><li><form title='2 étoiles parmi 7' method="post"><input type="hidden" value="2"><input type="image" value='' alt=''></form></li><li><form title='1 étoile parmi 7' method="post"><input type="hidden" value="1"><input type="image" value='' alt=''></form></li></ul>

</div>
</div>

CSS :
------

/*  styles for the star rater */    
#staring_form
{
display:inline-block;
background-color:#fff;
border-collapse:collapse;
border-radius:0.5em;
border:thin solid #000;
font-size:18px;
margin-left:auto;
margin-right:auto;
padding: 0.7em 0.5em;;
text-align:center;
max-width:90%;
}
ul.star-rating
{
display:inline-block;
text-align:center;
list-style-type:none;
/* unicode-bidi: bidi-override;  */
direction: rtl;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width: 140px;
height: 20px;
background: url(/images/star_white.gif) top left repeat-x;
padding:0;
border:0;
}
ul.star-rating li
{
display:inline-block;
position:relative;
padding:0;
margin:0;
border:none;
height:20px;
width: 20px;           
vertical-align:top;
line-height:20px;
}
ul.star-rating li form
{
width:20px;
height: 20px;
line-height:20px;
vertical-align:top;
text-decoration: none;
/* text-indent: -9000px;  */
padding: none;
border:-1px;
margin:none;
}
ul.star-rating li form input
{
color:transparent;
vertical-align:top;
}
ul.star-rating li:hover,
ul.star-rating li:hover ~ li
{
z-index: 5;
background: url(/images/star_yellow.gif) top center no-repeat;
width:20px;
height: 20px;
vertical-align:top;
line-height:20px;
padding: 0;
border:0;
margin:0;
}
ul.star-rating li.current-rating
{
background: url(/images/star_green.gif) left top;
color:transparent;
z-index: 2;
position:absolute;
padding:0px;
height: 20px;
line-height:20px;
vertical-align:top;
}

Oui je sais, il y a des with/height/* en trop.

Il y a deux bugs :

Les titles des form s'affichent plus ou moins à l'envers,

Les form sont encadrés ( sous Chrome pas sous Firefox, par des rectangles très fins.

Pour le premier bug, je ne sais pas comment faire.

Pour le deuxième bug, un text-indent:-9000px; empêcherait d'utiliser le form. ( insensible aux clics car décalé ).

C'est du moins ce que j'obtiens quand je met un text-indent: -9000px.

Merci à vous de votre aide.

Amicalement.

ortolojf · 15 Septembre 2016

Voilà çà marche

J'ai mis la modification sur mon site.

Je n'ai pas pu continuer à indiquer la note moyenne en sous-impression, car le "direction: ltr" empêche de superposer la ligne d'étoiles blanches avec les notations en jaune.

Merci de me dire ce que vous en pensez.

Respectueusement.