Discussion :

[isaric]

Bonjour,

J'utilise une liste avec une puce, une image et du texte (et un peu de CSS):

Qui ressemble à cela :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<ul 	class="niveau2 blockFenetre"  >
	<li>
<a href=".....php" style="cursor:help" title="titre"> 
<img class="img" src="....jpg" title="titre"
 alt="Photo" />
Texte
 </a>
	</li>
   </ul>

J'aimerai avoir la puce en haut de l'image et non en bas.
Et le texte à droite mais au milieu de l'image et non en bas.

d'avance merci

[Invité]

Bonjour,

Code :

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

1
2
3
4
5
6
7
.niveau2 li > a {
  display:inline-block;
  vertical-align:top;
}
.niveau2 li > a > img {
  vertical-align:middle;
}

[isaric]

merci jreaux62 pour ta réponse

Je rajouté le code à ma page CSS et cela n'a rien changé
J'avais vu ce site : https://flexboxfroggy.com/#fr, mais je n'ai pas vraiment compris et si cela a avoir avec mon problème !

[Invité]

Bonjour,

vu le site (que tu m'as envoyé en MP), je dirais que ce n'est pas bien grave...

Il date quand même de Mathusalem !

• mise en page avec des <table> (ça ne se fait plus depuis le siècle dernier)
• ...

A ta place, je repartirais de zéro, pour le moderniser : design, "responsive",... (ce qui améliorera aussi le référencement)

Si la programmation n'est pas ton fort, tu peux te tourner vers WordPress.
C'est gratuit.

[Invité]

Voici de quoi améliorer / structurer la mise en page :

• HTML5 : le guide du débutant

• Flex : Exemple de layout complet - 1

[DMC]

Bonjour isaric,
Un exemple :
https://codepen.io/Zonecss/pen/yLLNxXd

[isaric]

Merci jreaux62 / DMC pour tous ces liens (en espérant m'y pencher un peu )

J'ai testé sans y arriver :
test

[Invité]

Bonjour,

1- il faut que tu revois la STRUCTURE HTML de ta page, en utilisant les balises HTML5.

• "A) Vie de l’Association" / "B) - Études post glossairiennes" : sont des titres de <section>.
• A l'intérieur desquelles on trouve des <article>.
• La navigation (menu) est dans une balise <nav>
• ...

2-

...J'ai testé sans y arriver...

Si tu parles de ta problématique initiale (puce en haut, texte centré) : si ça fonctionne (Firefox, Edge,...).

Actualise la page ("Ctrl"+"R" ou touche "F5") et/ou vide le cache du navigateur.

[isaric]

Je comprends maintenant en fait tout est dans le lien que tu as donné :
https://codepen.io/jreaux62/pen/POGdjj

[isaric]

bravo jreaux62 !

2-
Si tu parles de ta problématique initiale (puce en haut, texte centré) : si ça fonctionne (Firefox, Edge,...).

Actualise la page ("Ctrl"+"R" ou touche "F5") et/ou vide le cache du navigateur.

Oui cela fonctionne (sous firefox) même sous forme de table.
J'actualisais en validant la ligne d'adresse http..., je n'utilisais pas "Ctrl"+"R"

Cela me laisse à loisir de remodeler la page en html5 et la conversion ne doit pas être très compliqué (même pour moi )