Pas d'affichage de tableau dans la création d'une page

[frasoh]

La création d'un tableau dans les news est possible, et il s'affiche de manière à y intégrer du texte ( en cachant ou non les bordures ).
Par contre, en mode "page", la tableau ne s'affiche pas, même si les bordures sont sont à 1 ( IE et Mozilla ). Et ceci quelque soit l'éditeur de texte choisi.
Je trouve les tableaux, avec bordures cachées, pratiques pour faire des pages avec photos à gauche ou droite des textes, et ce problème d'affichage des tableaux me gère considérablement.
savez-vous d'où vient le problème ? Connaissez-vous une autre technique pour bien présenter un texte avec photo sans passer par les tableaux ?
Merci !

[arnWald]

Bonjour,

savez-vous d'où vient le problème ?

CMSMS se voulant conforme aux standards et accessible, il utilise XHTML et CSS. Du coup, les tableaux pour la présentation c'est un peu, comment dire... "has-been" ! On est en plein dans la séparation forme/contenus.

Connaissez-vous une autre technique pour bien présenter un texte avec photo sans passer par les tableaux ? Merci !

Ben oui, les propriétés de positionnement CSS et notamment la propriété "float". Par exemple, si on met simplement une classe ".imgNews" aux images que l'on veut afficher dans les News, rajouter dans la feuille de style :

Code: Select all

.imgNews {
   float: left;
}

C'est quand même plus simple et pertinent que les tableaux, qui du coup retrouvent leur fonction première : donner un sens à des lignes/colonnes de données.

Quelques infos complémentaires :

http://css.alsacreations.com/Faire-une- ... s-tableaux

http://openweb.eu.org/articles/problemes_tableaux/

Cordialement.

[frasoh]

Merci, effectivement, les sites que vous évoquez sont bien fait, et j'ai donc adapté du CSS dans mes pages pour faire de beaux articles avec le module news.

[frasoh]

Par contre, malgré l'ajout de la ligne margin-right: 20px; au
{
  float: left;
margin-right: 20px;
},
le texte colle aux photos, que ce soit dans les news ou dans les pages. je ne trouve pas le moyen de faire commencer le texte à quelques mm des photos !

[jce76350]

Re,

{
   float: left;
margin-right: 20px;
},
le texte colle aux photos,

Utilise un padding

voir ici

[frasoh]

Merci, j'avais déjà essayé cette possibilité, mais textes toujours collés aux photos, que ce soit sur les pages ou dans les news.
J'ai pourtant modifié les feuilles de style de news et Layout: Left sidebar + 1 column.
Nota, je viens de voir que sous IE, il y a bien une petite marge, alors que sous Mozilla, c'est collé :

Voici le morceau de code CSS :

* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
  text-align: left;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 75.01%;
  line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
  font-size: 1em;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
  border: 0;
float: left;
padding-right: 10px;
}

[jce76350]

re,

Un lien sur la page serait le bienvenu pour faire un diagnostic
A+

[frasoh]

www.auvillar.fr

[jce76350]

re,

ta class "NewsSummarySummary" c'est elle qui pose probleme
quelle est le code ?
c'est dans ce code qu'il faut prevoir le padding pour le texte
Sinon prévoir un bloc image et un bloc texte

genre

.bloc1  /*Bloc affichage image */
{
width: 180px;  /*suivant ...*/
float: left;
font-size: small;
text-align: center;
}

.blocGrandmodel  /*Bloc affichage  pour texte*/
{
margin-left: 1px;  /*suivant ...*/
width: 350px; /*suivant ...*/
float: left;
font-size: small;
}

div.container
{
   /* pour eviter le débordement vers le bas si neccesaire ..*/
}
div.spacer  /*Pour affichages entre bloc*/
{
clear: both;
}

Tu fais


image
TEXTE
 

image
TEXTE
 



un essai ici rien que pour toi
Voila

[frasoh]

Merci, voici le code du module "News " ,
j'ai mis en rouge la seule modif que j'ai faite par rapport à l'origine :

div#news {
  margin: 2em 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 1px solid #000;
  background: #fff;
}
div#news h2 {
  line-height: 2em;
  background: #fff;
}

.imgNews {
  float: left;
}

.NewsSummary {
    padding: 0.5em 0.5em 1em; /* padding for the news article summary */
    margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
    border-bottom: 1px solid #FFCC66;
}

.NewsSummaryPostdate {
  font-size: 90%;
  font-weight: bold;
}

.NewsSummaryLink {
    font-weight: bold;
    padding-top: 0.2em;
}

.NewsSummaryCategory {
  font-style: italic;
  margin: 5px 0;
}

.NewsSummaryAuthor {
  font-style: italic;
  padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
  line-height: 140%;
}

.NewsSummaryMorelink {
  padding-top: 0.5em;
}


#NewsPostDetailDate {
  font-size: 90%;
  margin-bottom: 5px;
  font-weight: bold;
  }

#NewsPostDetailSummary {
  line-height: 150%;
  }

#NewsPostDetailCategory {
  font-style: italic;
  border-top: 1px solid #ccc;
  margin-top: 0.5em;
  padding: 0.2em 0;
}

#NewsPostDetailContent {
  margin-bottom: 15px;
  line-height: 150%;
  }

#NewsPostDetailAuthor {

  padding-bottom: 1.5em;
  font-style: italic;
}


/* to add specific style to the below divs, uncomment them. */

/*
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/

[jce76350]

re,

.imgNews {
   float: left;
}

la je ne suis pas du sur que cela fonctionne parce que le texte il est positionné comment?

C'est uniquement en modifiant la présentation dans ta page "News" que tu auras le résultat escompté
comme indiqué dans mon message Posté le: 17 Nov 2006, 19:08

a+

[frasoh]

J'ai ajouté ton code ( 1ère partie ) dans la feuille de style du module News. Curieusement, cela a réglé ce problème dans une page normale Content ( rien à voir avec les news ), mais pas dans les news.
Mais je n'ai pas tout compris, notamment, où mettre ce code :

image
TEXTE
 
... re...


dans la feuille de style des news ou bien dans le CSS du menu général choisi pour le site ?

Bon, en tout cas, cela ne pose problème que sous Mozilla, et merci pour tes explications, mais je crains que mon niveau dans ce domaine ne soit pas suffisant !

[Pierre M.]

Mais je n'ai pas tout compris, notamment, où mettre ce code (...)
dans la feuille de style des news ou bien dans le CSS du menu général choisi pour le site ?

Les
truc
vont dans les gabarits (templates).

Les
chose { bidule }
vont dans les CSS.

PM

[jce76350]

RE,

Mais je n'ai pas tout compris, notamment, où mettre ce code :

....

C'est pour cela que je t'avais mis un lien pour visualiser le code généré (aller sur la page avec ton navigateur et faire voir le source avec le menu ou la souris)

C'est suivant où tu utilise ce truc
Tu le mets dans ton contenu de page ou de news , si tu t'en sers sur les 2
menu Contenu » Pages » Éditer la page: xxx
ou
menu Contenu » Aricle » xx
en mode "code HTM"L ou "source" suivant le WYSIWYG utilisé

ICI ton image
ICI ton TEXTE
 

Puis en mode normal tu remplace ICI ton image par "insérer une image".
Puis en mode normal tu remplace ICI ton TEXTE  par ta prose ..

dans la feuille de style des news ou bien dans le CSS du menu général choisi pour le site ?

Si tu as une feuille de style commune (pour les news et le reste) dans cette feuille
Sinon dans le feuille de style attachée à tes news si c'est uniquement pour les news