Allumer le frère ainé

(reprise du message précédent)

Effectivement flexbox est une autre solution.
Et contrairement à ce que tu penses, elle est plus élégante.
Le seul hic est les retardataires qui sont encore à Internet Explorer. et je ne parle pas de ceux qui sont rester à IE6.
Comme il ne marche sous Linux, je ne peux pas tester mais d'après le site caniuse, il y a quelque souci.
https://www.caniuse.com/#search=flexbox

J'ai modifié le codepen en conséquence en rajoutant une class flex1 au container :
https://codepen.io/bazooka07/pen/LmEoZO

En traditionnel (relative + absolute) :

.container {
  padding-top: 2rem;
  position: relative;
}
.container .tab {
  position: absolute;
  top: 0;
}
.container .tab a {
  padding: 0.2rem 0.8rem;
  text-decoration: none;
}

avec flexbox :

.container {
  display: flex;
  flex-direction: column-reverse; 
}

Bonjour,

Encore merci pour ton suivi.

Je vais étudier cela demain.

J'utilise déjà une flexbox pour changer l'ordre des éléments dans la version petit écran en responsive, donc je connais le truc.

Pour les navigateurs qui ne connaissent pas les flexbox c'est quand même ennuyeux.

je n'ai pas peur d'employer les flexbox dans les versions petit écran car tous les navigateurs pour portables les connaissent mais en version PC c'est plus discutable.

je vais y réfléchir.

Attends !
Le seul navigateur qui pose problème est Internet Exploreur.
Et Microsoft préconise de l'abandonner et de passer à Edge.
Les gens qui utilisent Windows et ne font pas de mise à jour de sécurité n'ont rien à faire sur Internet.
Ils sont coupables de la propagation de virus. Donc évitons de les accueillir cordialement sur nos sites.

à mort IE

bazooka07 a écrit :
Le seul navigateur qui pose problème est Internet Exploreur.

Je précise même : "internet explorer 9 ou moins"...

Bonjour,

Raphael a écrit :

Je précise même : "internet explorer 9 ou moins"...

Oui je sais, je pense que je vais m'assoir sur IE8 ou moins.
J'imagine qu'il y a quand même dans des boites de pauvres gens qui sont encore sur ces vieilles versions mais ils doivent avoir l'habitude d'en baver sur Internet.
Modifié par boteha_2 (30 Apr 2018 - 19:34)

Raphael a écrit :

Je précise même : "internet explorer 9 ou moins"...

Sur CanIuse quand on clique sur l'onglet "known issues", c'est pas très glorieux même pour les dernières versions de IE.
Heureusement que ce n'est pas un navigateur très populaire :
https://www.techadvisor.fr/long-format/ordinateurs/les-meilleurs-navigateurs-internet-3656883/
Allez on supporte le "renard roux"

Bonjour,

J'allais me lancer dans une flexbox et soudain je réalise que dans mon cas cela va créer un nouveau problème.

le code de base :

<div class="tab" >Produit 2099  &gt; <a href="#">Table d&#039;orientation</a>
<table class="ore">
...
...
</table>
</div>

avec un css pour ouvrir la table au survol, un menu déroulant.

div.tab {position: relative}
table.ore {position: absolute; left: 0; top: 1.4em; display: none}
div.tab a:hover+table {display: block}
table.ore:hover {display: block}

Pour passer en flexbox j'ajoute un container pour la première, ligne (disons p) et j'inverse l'ordre :

<div class="tab" >
<table class="ore">
...
...
</table>
<p>Produit 2099  &gt; <a href="#">Table d&#039;orientation</a><p>
</div>

div.tab {
  display: flex;
  flex-direction: column-reverse; 
}

Mais comment alors le survol du lien peut-il provoquer l'apparition de la table qui est devenue son frère aîné ?
Avec une flexbox on inverse l'ordre des frères mais on reste sur le même problème : impossible d'agir en css sur le frère aîné.

Autrement dit je ne vois pas comment transcrire cette déclaration :

div.tab a:hover+table {display: block}

Je rencontre un problème proche : impossible d'agir le container, par exemple :

<p><input type="submit" id="A" value="Ajouter au panier &gt;" /><p>

p {padding: 5px 10px; background: blue}

Comment modifier la couleur du background de p au survol de l'input ?
Cela me semble impossible sans un javascript, par exemple :

onmouseover="document.getElementById('A').style.background='red'" onmouseout="document.getElementById('A').style.background='blue'"

On peut sans doute trouver un meilleur sélecteur JS que getElementById mais je ne vois pas comment faire en css.
Modifié par boteha_2 (01 May 2018 - 16:49)

Bonjour boteha_2,

<p><input type="submit" value="Ajouter au panier &gt;"
onmouseover="this.parentNode.style.background='red'" onmouseout="this.parentNode.style.background='blue'"
><p>

Bonjour aliasdmc,

Merci de ton code, je vais l'essayer cet après-midi.

On dit qu'il est déconseillé de placer ces commandes javascript dans le code html.

Est-ce vraiment intéressant d'en faire une fonction javascript appelée au chargement de la page ?

Si oui ce ne doit pas trop difficile d'écrire la fonction mais honnêtement je ne sais pas faire, si tu peux m'aider merci d'avance.

Il vaut mieux jouer avec les class plutôt que d'imposer le style dans le code :

<p><input
     type="submit" value="Ajouter au panier &gt;"   
     onmouseover="this.parentNode.classList.add('survol');
     onmouseout="this.parentNode.classList.remove('survol');
><p>

form { background-color: blue; }
form.survol { background-color: red; }

Cela évite aux graphistes d'aller mettre les mains dans le cambouis (code)
Modifié par bazooka07 (05 May 2018 - 18:39)

Bonjour,

bazooka07 a écrit :
Il vaut mieux jouer avec les class plutôt que d'imposer le style dans le code :
Cela évite aux graphistes d'aller mettre les mains dans le cambouis (code)

Merci, je vais faire comme tu dis.