une page de largeur infinie ou presque!?

**kursus** · 03/04/2013, 15h22

Re : une page de largeur infinie ou presque!?

Salut,

Si tu as un template fluide c'est censé se faire automatiquement, sinon il y a différents moyens, mais dans tous les cas ça te sera utile de connaître css.

L'éditeur d'article de joomla se fiche de savoir quelle est la largeur de ton contenu. C'est le template qui gère ce paramètre.

Tu peux mettre une condition dans le <head> de ton template pour modifier sa largeur si l'article en question est affiché :

<?php
$articleId = JRequest::getVar('id');
if ($articleId == XX)
{echo '<style>#monconteneur {width:100% !important;}';}
?>

**inflight** · 03/04/2013, 15h59

Re : une page de largeur infinie ou presque!?

Visiblement le template est pas fluide
comme tu pourras voir ici

404 Not Found

http://lachambreclaire.fr/test-residence/23-quand-le-bleu

vient la question d'après dont tu me parles
il faut que je modifies le css de mon template si je comprends bien, c'est ça?
le seul hic, c'est que je n'ai pas vérifié, mais je ne pense pas que l'article en question soit affiché dans le css
as tu une façon de repérer ça facilement?

merci d'avance kursus!
et sinon, j'fais quoi !!??
(ps: c'est un peu barbare ce code là!!)

**inflight** · 03/04/2013, 16h10

Re : une page de largeur infinie ou presque!?

le template.css ressemble à ça.. je crois que ce doit être dans le index .php alors non!?

/*------------------------------------------------------------------------
# JoomlAxe CSS
# ------------------------------------------------------------------------
# Copyright (C) 2008 JoomlAxe.
# @license - GPU/GPL
# Author: Spy2furious@gmail.com
# Websites: http://www.joomlaxe.com
# This file may be redistributed or editted in whole or significant part.
-------------------------------------------------------------------------*/
html, body, form, fieldset {
margin: 0;
padding: 0;
}

@font-face {
font-family: 'YanoneKaffeesatz-Regular';
src: url('web/fonts/YanoneKaffeesatz-Regular.eot');
src: url('web/fonts/YanoneKaffeesatz-Regular.otf');
src: url('web/fonts/YanoneKaffeesatz-Regular.woff');
src: url('web/fonts/YanoneKaffeesatz-Regular.ttf');
src: url('web/fonts/YanoneKaffeesatz-regular-webfont.svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Yanone-Bold';
src: url('web/fonts/Yanone-Bold.ttf');
src: url('web/fonts/Yanone-Bold.eot');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'YanoneKaffeesatz-Light';
src: url('web/fonts/YanoneKaffeesatz-Light.ttf');
src: url('web/fonts/YanoneKaffeesatz-Light.eot');
font-weight: light;
font-style: normal;
}

body {
background: #FFFFFF;
color: #000000;
font-family: 'Josefin Sans', Silom, Verdana, Arial;
font-size: 12px;
font-weight: 300;
font-style: normal;
line-height: 1.5em;
}

/* Normal link */
a:link, a:visited {
color: #00000;
font-size: 12px;
text-decoration: none;
}

a:hover, a:active {
text-decoration: none;
color : #ff0066
}

a img {
border: none;
}

/* Heading */
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
h4 {font-size: 125%;}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 5px 0;
padding: 0;
}

ul {
list-style: none;
}

ul li {
padding-left: 0px;
}

ol li {
margin-left: 35px;
}

th {
font-weight: bold;
padding: 8px;
text-align: left;
}

fieldset {
padding: 5px 5px;
border: none;
}

fieldset a {
font-weight: bold;
}

fieldset.input {
padding: 0;
background: none;
}

textarea{
width: 700px;
border: none;
background-color: #EEE;
padding: 5px;

}
hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid #EEEEEE;
height: 1px;
}

br {
height: 1px;
font-size: 1px;
}

td, th, div {
font-size: 100%;
text-align: left;
}

.containerheader{
width: 950px;
margin: 0 auto;
}

.container{
width: 950px;
margin: 0 auto;
overflow: hidden;
}

/*================================ HEADER ============================*/
.headerbg{
width: 100%;
margin-top: 35px;
}

.headerbg1{
width: 180px;
padding-left: 770px;
height: 30px;
}

.headerbg2{
width : 950px;
height: 93px;
}

.headerbg21{
width: 300px;
float: left;
height: 93px;
}

.headerbg22{
width: 650px;
padding-top: 20px;
float: left;

}
/*============================ ROUNDED SEPARATOR =======================*/
.roundedmodulebg{
width: 100%;
overflow: hidden;
margin-top: 20px;
}

.roundedmodule1{
width: 950px;
background-color: #FEFEFE;
background-image: url(../images/roundedkiriatas.gif);
background-position: left top;
background-repeat: no-repeat;
}

.roundedmodule2{
width: 100%px;
background-image: url(../images/roundedkananatas.gif);
background-position: right top;
background-repeat: no-repeat;
}

.roundedmodule3{
width: 100%px;
background-image: url(../images/roundedkiribawah.gif);
background-position: left bottom;
background-repeat: no-repeat;
}

.roundedmodule4{
width: 100%px;
background-image: url(../images/roundedkananbawah.gif);
background-position: right bottom;
background-repeat: no-repeat;
padding: 5px;
}

/*================================ MAINBODY ============================*/
.mainbodybg{
margin-top: 20px;
}
/*Left*/
.columnkiri{
width: 200px;
float: left;

}
/*Center*/
.columntengah{
width: 510px;
float: left;
margin-left: 20px;
}

#pathway{
margin-bottom: 10px;
}

/*Right*/
.columnkanan{
width: 200px;
float: left;
margin-left: 20px;

}
/*================================ FOOTER ============================*/
.footerbg1{
width: 100%;
color: #888;
border-top: 3px solid #EEE;
padding-top: 10px;
margin-top: 10px;
height: 17px;
}
/*============================== COPYRIGHT ============================*/
.copyrightbg{
width: 100%;
padding: 0px 0px 10px 0px;
}

.copyright{
text-align: left
}

.copyright span{
color: #7cb905;
}

**kursus** · 03/04/2013, 16h12

Re : une page de largeur infinie ou presque!?

il faut que je modifies le css de mon template si je comprends bien, c'est ça?

Il faut que tu modifies ton template (index.php) pour y injecter du css. Normalement les modifs css se font directement dans le fichier css correspondant, mais dans ton cas vu que tu as besoin d'une condition ("si l'article en question est affiché, alors modifier la largeur du site") ça se fait via le template, css ne supportant pas les conditions.

mais je ne pense pas que l'article en question soit affiché dans le css

Ca ne veut pas dire grand chose là, reformule...

et sinon, j'fais quoi !!??

Ce que je t'ai dit. Je ne peux que te donner les armes pour réaliser ton but, pas le faire à ta place.

Voici le code commenté :

Code PHP:


<?php  // on ouvre une balise php 

$articleId = JRequest::getVar('id'); // à chaque page de ton site, $itemId prend la valeur de l'id de ton article. 

if ($articleId == XX) // "Si l'id de l'article est XX" à remplacer par l'id de l'article en question

{echo '<style>#monconteneur1, #monconteneur {width:100% !important;}';} // "alors on affiche un balise style, réglant la largeur du ou des divs conteneurs de ton template 

?>

Ces divs conteneurs peuvent être repérés avec Firebug pour Firefox : cliquer sur inspecter, et noter le nom du ou des blocs entourant le contenu et possédant une largeur.

**kursus** · 03/04/2013, 16h18

Re : une page de largeur infinie ou presque!?

Merci d'utiliser la balise [CODE] quand tu postes du code.

Je viens de regarder ton site. Tu as de la chance car le template est pas trop mal codé, en fait tu peux te contenter d'un overflow:visible; sur ton conteneur, qui gardera sa largeur mais laissera dépasser son contenu.

Remplace la dernière ligne du code par

{echo '<style>.container {overflow:visible !important;}</style>';}

Et ça devrait marcher comme ça. Attention, ce n'est pas une solution bulletproof, car il se peut que .container soit réutilisé sur d'autres éléments de ton site qui n'ont rien demandé.

**inflight** · 03/04/2013, 16h28

Re : une page de largeur infinie ou presque!?

j'ai tenté de coller le code et de modifier ce que j'avais compris
ça donne ça : (mais j'ai du oublier un truc parce que ça ne fonctionne pas ! )
je dois peut être entrer d'autres valeurs ('id')? et (xx --> ça j'ai fait)
je fois entrer la valeur de largeur en pixels de l'image??
(pardon, einh, je suis une brêle!)

<head>
<?php
$articleId = JRequest::getVar('id');
if ($articleId == 23)
{echo '<style>#monconteneur {width:100% !important;}';}
?>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400italic,400,300itali c|Yanone+Kaffeesatz:400,300,200' rel='stylesheet' type='text/css'>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/joomla_css.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/suffix.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/typo.css" type="text/css" />
<?php if($this->countModules('right and left') <= 0) :?>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/collapse.css" type="text/css" />
<?php endif; ?>
<?php if($this->countModules('right or left') <= 0) :?>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/collapse2.css" type="text/css" />
<?php endif; ?>
<?php if ($this->countModules('topmenu')): ?>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script>
<?php endif; ?>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19888538-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
<meta name="google-site-verification" content="vpfN6UuW21XdBLHH3lGWyxeVykHzP3tSxWg1E3NQQ 14" />
</script>
</head>

**kursus** · 03/04/2013, 16h31

Re : une page de largeur infinie ou presque!?

Tu n'as pas lu mon dernier message.

**inflight** · 03/04/2013, 16h34

Re : une page de largeur infinie ou presque!?

Envoyé par kursus Voir le message

Merci d'utiliser la balise [CODE] quand tu postes du code.
ok je prends note, je savais pas!

Je viens de regarder ton site. Tu as de la chance car le template est pas trop mal codé, en fait tu peux te contenter d'un overflow:visible; sur ton conteneur, qui gardera sa largeur mais laissera dépasser son contenu.

Remplace la dernière ligne du code par

Et ça devrait marcher comme ça. Attention, ce n'est pas une solution bulletproof, car il se peut que .container soit réutilisé sur d'autres éléments de ton site qui n'ont rien demandé.

ça marche comme ça ... c'est super! merci!
par contre je vais m'interresser à ce que tu me dis et que je ne comprends pas quand tu parles de bulletproof et d'éléments qui n'ont rien demandé.. je vois pas du tout ce que ça peut engendrer.
je vais chercher un peu avec ces mots voir ce que je trouve

En attendant, merci !!

**inflight** · 03/04/2013, 16h36

Re : une page de largeur infinie ou presque!?

Envoyé par kursus Voir le message

Tu n'as pas lu mon dernier message.

c'est un peu décalé ...
mais j'ai pris note aussi pour la balise à intégrer quand je poste!
MERCI!

**kursus** · 03/04/2013, 16h43

Re : une page de largeur infinie ou presque!?

Ok pas de soucis, quelques points :

- Je te conseille de placer le script peu avant le </head>, idéalement juste avant le code google.

- Pour l'histoire du bulletproof c'est juste que .container est a priori très générique, et il se peut qu'il soit utilisé à plusieurs endroits de ton site.

- Pour la balise [CODE] tu peux éditer tes message mêmes après les avoir postés.

Maintenant tu peux passer ton message en réglé !
http://forum.joomla.fr/announcement.php?f=133

a+

**inflight** · 03/04/2013, 16h49

Re : une page de largeur infinie ou presque!?

ok, c'est noté
merci
je vais modifier
@ bientôt

une page de largeur infinie ou presque!?

[RÉGLÉ] une page de largeur infinie ou presque!?

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association