Ajouter un encart textuel à un article [Résolu/Fermé]

Signaler
Messages postés
218
Date d'inscription
vendredi 19 avril 2013
Statut
Membre
Dernière intervention
3 janvier 2016
-
Messages postés
218
Date d'inscription
vendredi 19 avril 2013
Statut
Membre
Dernière intervention
3 janvier 2016
-
Hello tout le monde!

Je rédige des articles sous Wordpress (dans lequel je peux rédiger la mise en forme en html aussi) dans lesquels j'aimerais rajouter des encart avec du texte dedans.

Pour être explicite, je cherche à faire comme pour une image: le texte est encadré autour du texte, qui est à gauche ou droite.

Si j'ai les bases en HTML, je dois avouer ne pas avoir d'idée pour mettre en place cela... Dois-je utiliser des tableaux, des div avec align left etc..?

Ce qui est sûr, c'est qu'après il me suffira faire du CSS pour que chaque zone soit pareil m'enfin, faut déjà la créer la zone...

Des idées pour moi, chers camarades? :)

Merci d'avance!

1 réponse

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
436
Salut,

Les tables html doivent être utilisées uniquement pour afficher des données tabulaires, ils ne doivent plus être utilisés pour de la mise en page.

Un simple div avec une ou plusieurs classes devrait suffire, tout dépend ensuite du style que tu veux appliquer à ton encart.

Un exemple :
<!-- html -->
<div class="encart">
Mon encart 1
</div>

<div class="encart encart-droite">
Mon encart 2
</div>

<div class="encart encart-gauche">
Mon encart 3
</div>

/* css */
.encart {
    padding: 19px;
    border: solid 1px #eee;
}

.encart-droite {
    float: right;
}

.encart-gauche {
    float: left;
}


Bonne journée,
Messages postés
218
Date d'inscription
vendredi 19 avril 2013
Statut
Membre
Dernière intervention
3 janvier 2016
1
En fait...

Peut-être aurais-tu une solution encore à me proposer, car j'ai un soucis pour la mise en place de ton code.

En effet, sur une portion de texte qui est déjà sur toute la ligne (qu'importe d'ailleurs), j'aimerais que ce bout soit réduit (pour former une boîte plus petite, en soit) et ainsi le mettre à gauche/droite et le texte autour.

Mais pour ça, je ne sais guère comment faire...
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
436
Une solution est de définir une largeur à ta boîte (propriété css width) et le mettre en flottant à droite ou à gauche (propriété float).
Messages postés
218
Date d'inscription
vendredi 19 avril 2013
Statut
Membre
Dernière intervention
3 janvier 2016
1
D'accord! :)

J'ai pu testé et en effet, ça a l'effet voulu!

Question aussi (décidément...), je souhaite utiliser des des @media pour que si l'écran est trop petit ça évite d'avoir une colonnes de mots encadrant la boîte...

Mais peut-être il y a t il une meilleure solution?
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
436
Tu peux essayer de définir une min-width pour ton bloc.

Sinon les media queries sont la bonne solution pour modifier le style en fonction de la taille de l'écran.
Messages postés
218
Date d'inscription
vendredi 19 avril 2013
Statut
Membre
Dernière intervention
3 janvier 2016
1
Très bien Pitet!

Merci beaucoup pour ton aide :).