Vue catégorie vs article seul : css différent ?

[syl-20]

Bonsoir,

mon problème (déjà exposé en d'autres termes ici, et même en une autre langue sur joomla.org) reste sans solution, pardonnez-moi d'insister...

Sous mes articles en vue catégories (en l'occurrence menu Home), j'ai une navigation/pagination stylisée en css ; sous mes articles en vue article seul, cette navigation/pagination stylisée disparaît pour laisser place à une bête navigation/pagination version liste à puces. (Vous pouvez tester en cliquant sur le titre du dernier article/dessin ici.)
Autre anomalie apparue dernièrement : j'ai un article dans lequel j'affiche une page web dans une iframe. En Home, la page apparaît correctement ; en article seul elle apparaît mais les div de mon bloc component ne s'adaptent pas à sa forme. (Vous pouvez voir ça ici.)
Comme si les articles en vue article seul ne dépendaient pas du même style css (component) que les articles en vue catégories (ou menus)... Voyez ce que je veux dire ?
J'aurais raté quelque chose lors du passage de mon template de J1.5 à J2.5 ? Ce n'est plus dans le bloc component que s'affiche tout les contenus ? Les articles ne dépendent pas du même style css selon qu'ils sont en vue catégorie ou en vue article seul ?...

[jisse03]

Re : Vue catégorie vs article seul : css différent ?

Bonjour,

Un simple test et observation avec l'inspecteur de Chromium (ou de Chjrome ou encore firebug) montre que sur la page d'accueil, la pagination utilise le style CSS pagination, tandis que lors de l'affichage d'un article, c'est pagenav. Or pagenav semble ne pas être défini dans le CSS du template.

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

Merci pour la réponse. Voici pourtant mon css concernant la navigation :

.pagination {
	text-align:center; 
	margin:0; 
	padding:0; 
	}

.pagination ul li {
	display: inline;
	margin: 0;
	}

.pagination ul {
	list-style-type: none;
	margin: 0;
	}

.pagenav {
	font-size: 12px;
	margin: 0;
	}

span.pagenav {
	color: #ffffff;
	background: #5972a7;
	padding: 2px 6px;
	margin: 0;
	}

a.pagenav {
	color: #5972a7;
	background: #ffffff;
	padding: 2px 6px;
	margin: 0;
	text-decoration: none;
	}

a.pagenav:hover {
	color: #ffffff;
	text-decoration: none;
	background: #5972a7;
	padding: 2px 6px;
	margin: 0;
	}

Dans ce cas, ce serait plutot "pagination" qui ne serait pas défini, non ?

[jisse03]

Re : Vue catégorie vs article seul : css différent ?

Testes en ajustant celui qui ne te convient pas sur celui convenable.

Mais attention, l'un est de type ul, li, l'autre un simple span.

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

Rien à faire.. Ou alors je ne suis pas assez compétent..

Dans mon code, la classe "pagination" me sert à empêcher que ne réapparaisse la navigation verticale sous forme de liste à puces (dont j'ignore toujours pourquoi elle est ainsi par défaut dans ma version de Joomla ?) ; et la classe "pagenav" me sert à styliser la navigation.
Mais ces 2 classes sont inefficaces en vue article seul. Il y a bien un problème qui ne dépend pas du css de ma navigation, non ? Qu'est-ce qui cloche avec la vue article seul ?
(Et puis ce problème d'article dont l'iframe s'affiche différemment en vue article seul...)

Si je n'avais pas les cheveux rasés d'aussi près, je me les arracherais bien.

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

Si ça peut constituer un indice : je viens d'essayer 2 extensions pré-mâchées de navigation, elles n'ont fonctionné qu'en vue article seul, aucun changement en vue accueil, même en retirant tout style de navigation dans mon template...

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

Nouvel indice qui me donne de plus en plus à croire que les articles seuls ne dépendent pas de la même classe css que les articles en vue catégorie/menu : j'ai désactivé le plugin "Contenu - navigation entre les pages" : plus de navigation du tout en vue articles seuls, navigation stylisée inchangée en vue menu Accueil...

[jisse03]

Re : Vue catégorie vs article seul : css différent ?

Nouvel indice qui me donne de plus en plus à croire que les articles seuls ne dépendent pas de la même classe css que les articles en vue catégorie/menu

rien de nouveau, ça fait très longtemps que c'ets comme ça. la pagination en vu eliste/blog (pagination) n'a qu epeu à voir avec la pagination entre articles qui n'a que 2 choix, précédent et suivant...

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

Merci Jisse ! Je suis bien content de l'apprendre
Y a-t-il néanmoins un moyen de styliser la pagination entre articles, pour la faire ressembler ne serait-ce qu'un peu à celle de la vue catégorie/menu ? Quelles sont les classes css relatives à la vue articles ? Il y a des tutoriaux, des exemples, sur le sujet ?

[jisse03]

Re : Vue catégorie vs article seul : css différent ?

Aucune classe n'est appelée, vu que le tmpl utilisé par tes articles a une pagination non pas avec des div stylées, mais que c'est casé dans un tableau sans aucun style. C'est donc cette partie qui est à revoir dans le template.

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

"Casé dans un tableau sans aucun style" ? Ma navigation ? Vraiment désolé, j'ai lu et relu ta réponse une bonne vingtaine de fois, mais je n'arrive pas à la comprendre...

Voici la feuille de style de mon template en intégralité, peut-être que ce sera plus simple de me montrer quoi faire (et où) ?

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'texgyreadventorregular';
    src: url('http://www.syl-20.net/fonts/texgyreadventor-regular-webfont.eot');
    src: url('http://www.syl-20.net/fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.syl-20.net/fonts/texgyreadventor-regular-webfont.woff') format('woff'),
         url('http://www.syl-20.net/fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('http://www.syl-20.net/fonts/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
	height: 101%;
}

body {
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-bg.jpg) repeat;
	background-repeat: repeat;
	padding : 0;
	margin : 0;
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:14px;
	color:#666666;
	letter-spacing:1em;
}

img {
border : none;
}

a {
	text-decoration:none;
	font-weight:bold;
	}
a:link {
	color:#5972a7;
	font-weight:bold;
	}
a:visited {
	color:#5972a7;
	font-weight:bold;
	}
a:hover {
	color:#8a9dc5;
	font-weight:bold;
	}

.clr {
clear : both;
}

li {
list-style : none;
}

* {
margin : 0;
padding : 0;
}

h1, h2, h4, h5 {
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:20px;
	line-height:1.5em;
	font-style:normal;
	font-weight:bold;
	color:#5972a7;
}

h3 {
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:16px;
	line-height:1.5em;
	font-style:normal;
	font-weight:bold;
	color:#666666;
	margin-bottom:10px;
}

#container {
	width:1200px;
	padding:0;
	margin:0 auto;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-fond.jpg) no-repeat top;
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:14px;
	letter-spacing:0.1em;
	line-height:1.3em;
	color:#333333;
	}
	
#header {
	width:1200px;
	height:379px;
	padding:0;
	margin:0;
	}
	
#machine {
	width:626px;
	height:252px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-machine.gif) no-repeat;
	margin-left:164px;
	margin-top:0px;
	padding:0;
	position:absolute;
	}
	
#accueil {
	width:575px;
	height:116px;
	text-align:left;
	line-height:2.2em;
	margin-top:280px;
	margin-left:204px;
	position:absolute;
}

#videosurveillance {
	width:193px;
	height:109px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-videosurveillance.gif) no-repeat;
	margin-top:40px;
	margin-left:840px;
	position:absolute;
	}

#lecteuraudio {
	width:207px;
	margin-top:147px;
	margin-left:839px;
	position:absolute;
	}
	
#menu5 {
	width:207px;
	padding-bottom:2px;
	margin-top:258px;
	margin-left:839px;
	position:absolute;
	}

#pagemiddle {
	width:1200px;
	}

#columncontainer {
	width:1200px;
	}

#columnleft {
	width:834px;
	float:left;
	padding:0;
	}

#contenu {
	width:635px;
	margin-left:30px;
	margin-bottom:0;
	margin-top:0;
	padding:0;
	}

#columnright {
	width:366px;
	float:right;
	}

#menu2 {
	width:207px;
	padding-bottom:2px;
	margin-left:5px;
	}

#menu3 {
	width:207px;
	padding-bottom:2px;
	margin-left:5px;
	}

#menu4 {
	width:207px;
	padding-bottom:2px;
	padding-top:2px;
	margin-left:5px;
	}

#separateurmenu {
	width:228px;
	height:5px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-separateur-menu.png) no-repeat;
	}	

#separateurmenu1 {
	width:228px;
	height:5px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-separateur-menu.png) no-repeat;
	margin-top:62px;
	}	

#compteur-top {
	width:244px;
	height:52px;
	background: transparent url(../../syl20-joomla-template5/images/menu-compteur-top.png) no-repeat;
	margin-left:10px;
	margin-top:13px;
}

#compteur-middle {
	width:244px;
	background: transparent url(../../syl20-joomla-template5/images/menu-compteur-middle.png) repeat-y;
	margin-left:10px;
}

#compteur-bottom {
	width:244px;
	height:32px;
	background: transparent url(../../syl20-joomla-template5/images/menu-compteur-bottom.png) no-repeat;
	margin-left:10px;
}

#livredort-top {
	width:244px;
	height:52px;
	background: transparent url(../../syl20-joomla-template5/images/menu-livredort-top.png) no-repeat;
	margin-left:10px;
	margin-top:13px;
}

#livredort-middle {
	width:244px;
	background: transparent url(../../syl20-joomla-template5/images/menu-compteur-middle.png) repeat-y;
	margin-left:10px;
	padding-left:10px;
}

#livredort-bottom {
	width:244px;
	height:32px;
	background: transparent url(../../syl20-joomla-template5/images/menu-compteur-bottom.png) no-repeat;
	margin-left:10px;
}

#consignes {
	width:205px;
	height:71px;
	background: transparent url(../../syl20-joomla-template5/images/syl20-endorphine-consignes-urgence.png) top left no-repeat;
	margin-left:4px;
	padding-bottom:2px;
	margin-top:2px;
}

#blocmsanitaire {
	margin-left:175px;
	margin-top:10px;
	width:647px;
	height:55px;
	}

#bloccontenu {
	width:692px;
	margin-left:141px;
	padding:0;
	}

#bloccontenutop {
	width:692px;
	height:24px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-bloclongtop.png) no-repeat;
	}
	
#bloccontenumiddle {
	width:692px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-bloclongmiddle.png) repeat-y;
	}

#bloccontenumiddle h1 {
    margin-top: 0;
	margin-bottom: 0;
	color:#5972a7;
	}
	
#bloccontenumiddle h2 {
    margin-top: 0;
	margin-bottom: 0;
	color:#5972a7;
	}

#bloccontenumiddle h3 {
    margin-top: 0;
	margin-bottom: 0;
	color:#5972a7;
	}

#bloccontenubottom {
	width:692px;
	height:24px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-bloclongbottom.png) no-repeat;
	}

[syl-20]

Re : Vue catégorie vs article seul : css différent ?

Suite :

#contenutouites {
	width:650px;
	background-color:#ecedef;
	margin-left:21px;
	margin-bottom:0;
	margin-right:0;
	margin-top:0;
	padding:0;
}

#blocreseausocesetude {
	width:1200px;
	height:293px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-fond2.jpg) no-repeat;
	float:left;
	}
	
#blocreseausoces {
	width:290px;
	height:263px;
	margin-left:170px;
	margin-top:20px;
	padding:0;
	float:left;
	}
	
#blocsondages {
	width:290px;
	height:263px;
	margin-right:394px;
	margin-top:20px;
	padding:0;
	float:right;
	}
	
#bloctagscloudfond {
	width:1200px;
	height:146px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-fond3.jpg) no-repeat;
	float:left;
	}
		
#bloctagscloud {
	width:883px;
	margin-left:145px;
	margin-top:17px;
	padding:0;
}

#pagebottom {
	width:1200px;
	height:153px;
	background:url(../../syl20-joomla-template5/images/syl20-endorphine-fondfooter.jpg) no-repeat;
	clear:both;
	}

#footer {
	width:680px;
	height:100px;
	margin-left:158px;
	margin-top:25px;
	padding:0;
	float:left;
}

#sortie {
	width:100px;
	height:61px;
	background:url(../../syl20-joomla-template5/images/syl20-sortie.png) no-repeat center;
	margin-right:255px;
	margin-top:44px;
	float:right;
}

div.moduletable_msanitaire {
	padding:0;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:0;
	margin-top:0;
	}

.moduletable_menu {
	color:#666666;
	}
	
.moduletable_reseaussoces {
	padding:0;
	margin-left:15px;
	margin-right:20px;
	margin-bottom:0;
	margin-top:0;
	}

.moduletable_reseaussoces p {
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:16px;
	}

div.moduletable_sondages {
	padding:0;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:0;
	margin-top:0;
	}
	
div.moduletable_sondages p {
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:16px;
	}

.moduletable_focus {
	padding:0;
	margin-left:15px;
	margin-right:15px;
	margin-bottom:0;
	margin-top:0;
	}
	
div.moduletable_compteur {
	margin-left:10px;
	font-family: texgyreadventorregular, Arial, sans-serif;
	font-size:13px;
	color:#666666;
	}
	
div.moduletable_tagscloud p {
	font-style:italic;
	}

div.moduletable_tagscloud {
	text-align:justify;
	margin-left:25px;
	margin-right:25px;
	}

#scrollToTop {
	position: fixed;
	background: #fff url(../../syl20-joomla-template5/images/fleche-scroll.png) no-repeat    ;
	right: 20px;
	bottom: 10px;
	background-color: rgb(255,255,255); /** rgba fallback**/
	background-color: rgba(255,255,255, 0.0);
	padding: 40px 60px;
}

span.article_separator {
   	display:block;
	height:13px;
   	background: url(../../syl20-joomla-template5/images/syl20-endorphine-separateur.png) center no-repeat;
	text-align:center;
	margin-top:20px;
	margin-bottom:0px;
	}

.pagination {
	text-align:center; 
	margin:0; 
	padding:0; 
	}

.pagination ul li {
	display: inline;
	margin: 0;
	}

.pagination ul {
	list-style-type: none;
	margin: 0;
	}
	
.pagenav {
	font-size: 12px;
	margin: 0;
	}

span.pagenav {
	color: #ffffff;
	background: #5972a7;
	padding: 2px 6px;
	margin: 0;
	}

a.pagenav {
	color: #5972a7;
	background: #ffffff;
	padding: 2px 6px;
	margin: 0;
	text-decoration: none;
	}

a.pagenav:hover {
	color: #ffffff;
	text-decoration: none;
	background: #5972a7;
	padding: 2px 6px;
	margin: 0;
	}

[jisse03]

Re : Vue catégorie vs article seul : css différent ?

Ton CSS n'est pas en cause, mais le template lui même et ses surcharges de com_content. Ton lien vers l'article suivant est codé de cette manière

<table id="pied">
  <tr>
    <td id="gauche"></td>
    <td id="centre"><span id="numero_page">Page 1/22</span></td>
    <td id="droite"><a href="livre.php?livredor=413&p=1" id="page_suivante">Page suivante</a></td>
</tr>
</table>

et donc, sans aucun style appliqué...
Revoir la copie des surcharges, un tableau n'ayant pas sa place ici.