Discussion :

[La_Buse]

Bonjour,

Je suis entrain de réaliser un petit blog pour une activité vélo organiser par une association.
Je suis entrain de faire le CSS pour une version IE9 (j'irai pas en dessous de IE9).

En gros, dans chaque <article> j'intègre:

• un iframe illustrant notre parcourt,
• Une section avec des photos,
• et une section avec des commentaires

Pour le premier article le CSS fonctionne comme il faut, mais sur les suivants, la section photo est décalé.
J'ai mis le font-size de l'article à 0 en pensant que ça pouvait être due au problème des inline-block mais rien y fait.

J'ai essayer en utilisant les propriétés :
position : relative;
left: __%

Sur les articles sauf le premier, mais je trouve ça du bidouillage et cela me gênera pour les media queries.

Ça fait 2 jours que je cherche et je ne trouve pas d'où vient le problème.
http://www.loupgaproule.franceserv.com
Je vous laisse le lien du site pour que vous puissiez voire de quoi je parle.

Si vous avez une solution je vous en serai très reconnaissant.

[NoSmoking]

Bonjour,

Pour le premier article le CSS fonctionne comme il faut, mais sur les suivants, la section photo est décalé.

pas vu de différence entre les différents articles, mais j'ai l'impression que ta structure n'est pas des plus au point, pourrais tu faire une maquette de ce que tu souhaites réaliser par articles ?

[La_Buse]

Bonjour noSmoking,

pas vu de différence entre les différents articles

Le problème venait apparemment de mon editeur wysywig html qui est une API qui ne fonctionne pas sous ie9.
Donc je l'ai supprimé pour les utilisateur de EI9 (je vais essayé d'en développer un tout simple moi même).

j'ai l'impression que ta structure n'est pas des plus au point

Ayant plus l'habitude des flexbox, j'ai pas ou très peu l'habitude des autres types de mise en page. Du coup ça doit surement ressembler à du bricolage.

Je vous fait une maquette de suite.

Merci beaucoup

[La_Buse]

Voici le schemas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<article id="road_x" class="roadTrip" aria-label="yyy">
    <iframe src="******"><!-- Chemin parcourrue exporté depuis un autre site --></iframe>
    <section id="photos_x" class="photo" aria-label="photos de yyy"><!-- photo de la balade cliquable --></section>
    <div>
        <p>Distance : <span class="counter">** KM</span></p>
        <p>Dénivelé : <span class="counter">**** M</span></p>
    </div>
    <div>
        <section id="read_x" class="chat" aria-label="commentaires sur la balade yyyy"><!-- Commentaires des membres --></section> <!-- Il faut que je rajoute le aria-label -->
        <form class="comments" action="ajax"><!-- Editeur WYSYWIG html --></form>
    </div>
</article>

J’espère que c'est assez claire.

Donc si vous avez des pistes pour mieux structurer tout cela Merci d'avance

[NoSmoking]

Ayant plus l'habitude des flexbox

justement avec les flex-box j'aurais vu quelque chose comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article>
 
  <section>
    <h1>Titre</h1>
    <iframe></iframe>
    <p>photos</p>
    <p>informations</p>
  </section>
 
  <aside>
    <p>Commentaires</p>
    <p>Editeur</p>
  </aside>
 
</article>

et en appliquant le CSS, minimum à partir de ton code, suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
article {
  display: flex;
  width: 75%;
  margin: auto;
}
section {
  display: flex;
  flex-direction: column;  
  width: 70%;
}
aside {
  flex: 1;
}

La sémantique pourra surement être améliorée.