[Résolu] Bloc colonne en pleine largeur

[Solie]

Bonjour les amis,

Voici une très jolie page d'Isabelle de Realia !
http://realia-demo.jimdo.com/

Ses blocs en pleine largeur sont exactement ce que j'aimerais avoir pour solieweb. Je lui ai envoyé un message, et voici ses explications :

En fait, vous créez votre page avec vos blocs comme d’habitude. Puis vous inspectez le code-source de votre page et vous repérez les ID des blocs que vous voulez faire ressortir dans une bande de fond étiré en longueur (sur ma page, ce sont les bandes noires).

Dans la CSS (modifier le head), vous indiquez les ID des blocs repérés puis le code suivant :

div#cc-m-8304560684, div#cc-m-8304565684, div#cc-m-8302097894
{
width: 100%;
padding: 40px 1000px !important; (vous pouvez modifier le 40px ici qui correspond à la marge haute et basse de la bande)
margin-left: -1000px;
background: #222; (couleur de la bande de fond)
}

Si je me souviens bien, il faut que les DIV concernées soient des éléments « colonnes »

J'ai donc créé une colonne simple, et essayé ceci :

Code:

<style type="text/css">
/*<![CDATA[*/
/*remplissage bloc colonne pleine largeur*/
#cc-m-8302005684 {width: 100%;
padding: 40px 1000px !important;
margin-left: -1000px;
background: #333 none repeat scroll 0% 0%;}
/*]]>*/
</style>

Ça fonctionne parfaitement dans l'inspecteur ! Pas dans le head...

Qu'est-ce qui cloche dans la rédaction de mon code ??

Merci bien,
Solie

[FredVig]

Un !important qui manque ? Un rechargement de page à faire ?

On a pas mal travaillé sur le même sujet pour le site de fofo http://citronfrappe.fr/
Les posts sont là :
http://www.jimdoforum.fr/t697-position-taille-arriere-plan
Je lui ai proposé de sélectionner un séparateur et d'appliquer des modifications similaires à celles que realia t'a proposé

Mais ton code devrait fonctionner (les "div" ne me semblent pas utiles)

[Solie]

Quelle tâche je fais ! J'avais ouvert deux inspecteurs; Un pour le site de realia, un pour le mien. Et j'avais copié le sélecteur unique sur son site. C'est en relisant mon premier post que j'ai vu la boulette ^^

Ça marche nickel !

Elle est classe cette page de Realia. Tu as regardé ?

Oui, j'ai suivi votre topic avec attention. L'avantage de faire ceci avec une colonne au lieu d'un spacer il me semble, c'est de pouvoir intégrer des éléments à volonté, bien calés, et sans se soucier des supports. Ordis, tablettes, smartphones... On dirait que fofo a été contrainte de placer de nombreuses images-texte pour du texte basique (noir sur fond uni blanc). C'est dommage. Son site est original mais le visuel n'est pas propre. Avec des colonnes, elle pourrait mettre du vrai texte, elle y gagnerait en référencement et en propreté.

Au plaisir de te lire

[FredVig]

Realia est une précurseur Jimdo, elle a réalisé de très utiles tutos.
Le site que tu as pris en exemple est une base intéressante d'un point de vue ergonomique.
Mais j'ai un problème avec le côté impersonnel des sites d'aujourd'hui, et celui-ci (le modèle que Realia avait réalisé pour illustrer ta recherche) ne fait pas exception. Je sais que c'est la tendance, et j'en réalise aussi de semblables. Cela dénote d'un renoncement à la saveur, à la beauté, à l'originalité, chez nos contemporains, qui est affligeant.
La différence entre la solution pour fofo (pressecitron) et ton site Solieweb est une bonne illustration du fait qu'un code précis ne fonctionne pas nécessairement pour un autre site, fusse-t'il du même design.

[Solie]

Tout se passait tellement bien... Ce code colonnes d'Isa (1er post) fonctionne toujours avec Zurich (que j'ai malheureusement dû abandonner pour ses gros problèmes de dimensions en responsive). Il fonctionne très bien avec Miami, versions 1 et 2 (voir exemple plus bas).

Avec Rome V2, ça bugge complètement :

Le content devient très étroit, il ne recouvre même pas la moitié de l'écran en largeur. La partie noire, c'est mon background. Il est orange à présent. La partie marron, c'est une colonne qui se fait la malle !

Je ne comprends pas le souci. Voilà plusieurs semaines que je bataille avec ça. J'ai tenté de remplacer les px par du rem, de ne laisser que le width en 100% (de même que semble être la sidebar). Je ne trouve pas de solutions pour avoir mes colonnes centrées par rapport au menu et en pleine largeur avec ce design.

En Miami V2, ça fonctionne toujours.

C'est pour ce site en Rome V2. Mais je n'ai pas pu laisser le code de départ.

Toute aide sera bienvenue !
Merci

[FredVig]

Si je comprends bien, tu veux  pour ce site en Rome V2, obtenir les blocs en pleine largeur d'écran. Ces blocs créent des bandes horizontales colorées.

Mais lorsque j'essaye sur firefox,  le code du premier post semble fonctionner.
Si je cible les div incluses dans le contenant principal (une sur deux pour que ça soit visible)
avec ce code :

Code:

div#cc-matrix-3674452133 > :nth-child(2n) {width: 100%;
padding: 40px 1000px !important;
margin-left: -1000px;
background: #333 none repeat scroll 0% 0%;}


j'obtiens des blocs avec des bandes grises sur toute la largeur (je ne peux pas poster d'image, le générateur ne fonctionne pas)
n'est-ce pas le but recherché ?

[FredVig]

Si tu veux tester une autre approche, je te propose :

Code:

/*pleine largeur sur un autre contenant que celui déterminé par le template*/
.jtpl-content {max-width: 100vw!important;}
/*ciblage des enfants directs (1 sur 2) du contenant principal*/
/* modification de leur largeur maximale, de leur padding latéral et de leur couleur de fond*/
div#cc-matrix-3674452133 > :nth-child(2n){
max-width: 50vw;
padding: 10px 25vw !important;
background: #F9E3C3 ;
}
/*détails à changer pour l'aspect général*/
.jtpl-section-main {padding:0!important;}
#cc-m-12855124033,#cc-m-12855253933 {margin-left: 0!important;padding:1rem 0!important;}
.ccgalerie div.thumb_sq3,
.ccgalerie div.thumb_sq3 img  {background: rgba(255, 255, 255, 0);}

Il sera possible d'équilibrer la responsivité en changeant la proportion de : max-width: 50vw; padding: 10px 25vw , en prenant garde à faire 100vw en tout (2X20 + 60 par exemple).

Un @media(min-width:1500px){…} peut aussi supprimer (ou modifier) le comportement sur des écrans plus étroits :

Code:

.jtpl-section-main,.jtpl-content {padding:0!important;}
.jtpl-content {max-width: 100vw!important;}
div#cc-matrix-3674452133 > :nth-child(2n){background: #F9E3C3 ;}
#cc-m-12855124033,#cc-m-12855253933 {
margin-left: 0!important;
padding:1rem 0!important;}

.ccgalerie div.thumb_sq3,
.ccgalerie div.thumb_sq3 img {
   background: rgba(255, 255, 255, 0)!important;;}

@media (min-width:1200px) {
   div#cc-matrix-3674452133 > :nth-child(2n){
padding: 10px 25vw !important;
max-width: 50vw;}
}
@media (max-width:1200px) {
   div#cc-matrix-3674452133 > :nth-child(2n){
padding: 10px 10vw!important;;
min-width:80vw;
}

[Solie]

Si je comprends bien, tu veux  pour ce site en Rome V2, obtenir les blocs en pleine largeur d'écran. Ces blocs créent des bandes horizontales colorées.

Mais lorsque j'essaye sur firefox,  le code du premier post semble fonctionner.
Si je cible les div incluses dans le contenant principal (une sur deux pour que ça soit visible)
avec ce code :

Code:

div#cc-matrix-3674452133 > :nth-child(2n) {width: 100%;
padding: 40px 1000px !important;
margin-left: -1000px;
background: #333 none repeat scroll 0% 0%;}


j'obtiens des blocs avec des bandes grises sur toute la largeur (je ne peux pas poster d'image, le générateur ne fonctionne pas)
n'est-ce pas le but recherché ?

Oui, tu as bien compris, c'est exactement cela.
Seulement, la responsivité ne marche plus dans le sens où si tu mets ce code, plus l'écran diminue, plus ça bugge. Tu peux réduire légèrement la fenêtre de ton navigateur pour visualiser.

Pour t'aider dans ton pronostic, j'ai remis provisoirement le code du premier post

Code:

<style type="text/css">
/*<![CDATA[*/

/*Remplissage gradient flat potiron to chocolate colonne pleine largeur landing et café Accueuil*/
#cc-m-12855124033
{width: 100%; padding: 40px 1000px !important; margin-left: -1000px; /* IE10+ */ background-image: -ms-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Opera */ background-image: -o-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #E77831), color-stop(50, #E77831), color-stop(50, #5E4338), color-stop(100, #5E4338)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* W3C Markup */ background-image: linear-gradient(to right, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%) none repeat scroll 0% 0%;}

/*Remplissage gradient flat brique to potiron colonne pleine largeur script et fusée Accueil*/
#cc-m-12855253933
{width: 100%; padding: 40px 1000px !important; margin-left: -1000px; /* IE10+ */ background-image: -ms-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Opera */ background-image: -o-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #CB4D25), color-stop(50, #CB4D25), color-stop(50, #E77831), color-stop(100, #E77831)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* W3C Markup */ background-image: linear-gradient(to right, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%) none repeat scroll 0% 0%;}

/*Remplissage gradient brique to potiron colonne pleine largeur casting-voix Accueil*/
#cc-m-12890293033
{width: 100%; padding: 40px 1000px !important; margin-left: -1000px; /* IE10+ */ background-image: -ms-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Opera */ background-image: -o-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CB4D25), color-stop(100, #E77831));
/* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* W3C Markup */ background-image: linear-gradient(to bottom, #CB4D25 0%, #E77831 100%) none repeat scroll 0% 0%;}
/*]]>*/
</style>


Ne prête pas attention aux valeurs gradient. En flat ou en gradient; c'est pareil.



Avec ce design, le souci se situe là :
{width: 100%; padding: 40px 1000px !important; margin-left: -1000px;
      ou alors il y a carrément un bug dans le code source de Rome V2

Ou alors, c'est mon code pourri de background du site, lequel supprime le satané fond blanc récurrent à chaque chargement de page, qui ferait conflit... Je suis consciente qu'il est bien dégueu avec @media mais je n'avais pas été capable de faire mieux toute seule.

Code:

<style type="text/css">
/*<![CDATA[*/
/* background potiron version mobile */
element.style {zoom: 1;}
@media (max-width: 4000px) {body {background: #E77831 !important;}
} /*]]>*/
</style>

C'est bizarre que le code d'Isa marche avec les autres designs (même responsive) et pas celui-là quand-même...

[FredVig]

Je pense que tu ne cibles pas le bon contenant. :
c'est pas #cc-m-12890293033, mais son contenant qu'il faut viser
As-tu essayé mes codes ? (ils sont responsives)

Edit : je viens juste de comprendre où tu vois un problème…

[Solie]

Quoi ? Le Matrix ?

Essaye avec Firefox, pas de réduire l'affichage, mais la fenêtre

[FredVig]

Bien entendu, je ne fais que ça figures-toi

Bon… la marge se prolonge en dehors de la fenêtre, c'est un peu obligé avec une marge de -1000px !
Le problème est là aussi avec une fenêtre large.

[FredVig]

Il vaudrait mieux partir sur un autre système. Sur ce design, les contenants ont des propriétés différentes que celui de Realia.

[FredVig]

BOn, je reprends tout :
padding: 40px 1000px
margin-left: -1000px;  
ce n'est pas logique pour un design centré et responsive
il faut imposer des marges automatiques latérales dans un contenant en full width
Donc,
Cible le contenant de ton div destiné à être en toute largeur :
#cc-matrix-3674452133 et impose-lui un width de 100%
Pour ça, il faut chercher lequel de ses parents lui impose la largeur de 990px et changer ça
Une fois que #cc-matrix-3674452133 sera en pleine largeur, tu pourras centrer les contenants intérieurs, leur donner des marges auto…
c'est la démarche que j'ai eu avec le code que je te propose en second.
J'ai juste rectifié en plus quelques comportements annexes

[Solie]

Bien entendu, je ne fais que ça figures-toi  

Bon… la marge se prolonge en dehors de la fenêtre, c'est un peu obligé avec une marge de -1000px !
Le problème est là aussi avec une fenêtre large.

^^

C'est la même marge pourtant sur Miami V2. Pourtant, ça ne bugge pas...

Il vaudrait mieux partir sur un autre système. Sur ce design, les contenants ont des propriétés différentes que celui de Realia.

Je suis d'accord, surtout qu'avec la responsivité, il n'est plus hyper nécessaire de mettre de la pleine largeur pour les écrans larges. La pleine largeur d'un background colonnes sur le content, sans marges blanches, pourrait suffire.

[FredVig]

Ce n'est pas simple pour moi de comprendre, car mon firefox ne reproduit pas ton image en deux colonnes.
Je vois bien une longue largeur (scrollbar horizontale) mais pas la zone 'folle" sur la droite.

[Solie]

Peut-être parce que mon ordi est plus petit que le tien alors Peut-être que tu peux regarder sur ton smartphone... Attention, ça risque d'être pire que mes captures  

Parent, child, je ne comprends rien du tout. Ne serait-ce que les child sont issus de parent.

Les codes responsive que tu m'as proposé, je suis incapable de les déchiffrer, et donc de les adapter à mes trois colonnes.

Le 1er code engendre d'autres bugs. Il rétrécit les éléments, et place tout au centre.


Avec le second code, les éléments ne sont pas déformés et les colonnes ne se font la malle que sur un demi-centimètre (affichage 100%). À part les sauts de couleurs, c'est une bonne base. Je vais laisser ce code quelques heures.


Je n'ai pas le niveau pour l'adapter au résultat souhaité.



Jimdo travaille depuis plusieurs mois sur des designs en One Page. S'ils font bien les choses, on peut espérer que les blocs du content seront Fully responsive (hauteur/largeur) et qu'il sera possible d'y attribuer des backgrounds. Tout cela avant que ce type de designs soit complètement has been. Je ne sais pas quand ils prévoient de les sortir...

[FredVig]

Avec le second code, les éléments ne sont pas déformés et les colonnes ne se font la malle que sur un demi-centimètre (affichage 100%). À part les sauts de couleurs, c'est une bonne base. Je vais laisser ce code quelques heures.

Les sauts de couleurs c'est parce que j'ai ciblé un élément sur deux, afin qu'on voit la couleur :nth-child(2n)
Je ne comprenais pas quel élément tu voulais toucher.
Tu peux cibler n'importe quel élément du contenant principal #cc-matrix-3674452133 par son identifiant unique :
#cc-m-12855124033,#cc-m-12855253933

Quant au déplacement de quelques pixels, on peut l'éviter en remplaçant les unités vw (viewport) par des %.

Le code nouveau commenté :

/*<![CDATA[*/

/*Remplissage colonne pleine largeur FredVig*/

/* Ce contenant "jtpl-content", sur Miami V2, contient tous les éléments que tu rajoutes sur la page en mode édition.
Sa largeur est limitée d'origine à 990px, il est placé au milieu de la fenêtre grâce à un padding horizontal auto.
Du coup, tout ce qu'il contient, ne peux pas remplir la fenêtre horizontalement, les arrière-plans colorés y compris.
On change donc sa largeur maximale en 100% (ou 100vw, c'est presque pareil)*/

.jtpl-content {max-width: 100%!important;}

/* la cible est "toutes les divs contenues au premier niveau du #cc-matrix-3674452133".
ça s'écrit ainsi :
#cc-matrix-3674452133 > div   ( > : seulement les div directes)
"Au premier niveau", = les divs contenus dans matrix, mais pas les divs contenues dans les divs de matrix.
On dit aussi "les enfants directs du parent, mais pas les enfants des enfants". */

/* Le @media est rajouté pour créer deux situations de largeur de fenêtre.
On pourrait en créer autant que nécessaire sur le même principe
Ici, c'est pour une fenêtre large */

@media (min-width:1200px) {
  #cc-matrix-3674452133 > div{

  /* 25% représente 25/100 de la largeur de fenêtre visible c'est une valeur responsive */

padding: 10px 25% !important;
max-width: 50%;}
}
/* description du comportement lorsque la fenêtre est étroite */

@media (max-width:1200px) {
  #cc-matrix-3674452133 > div{
padding: 10px 10%!important;
min-width:80%;}
}

/* Le reste est plus classique * /


/* Ceci corrige quelques détails qui rajoutaient des débords inutiles */

.jtpl-section-main,
.jtpl-content {
padding:0!important;
}

/* Seulement pour enlever le fond blanc sur tes portraits qui s'arrondissent, ce n'est pas utile si le fond de ce contenant est blanc */

.ccgalerie div.thumb_sq3,
.ccgalerie div.thumb_sq3 img {
  background: rgba(255, 255, 255, 0)!important;}
 
/* j'ai repris ton code et enlevé seulement les padding, width et marging */

/* Remplissage gradient flat potiron to chocolate colonne pleine largeur landing et café Accueuil */
#cc-m-12855124033
{ /* IE10+ */ background-image: -ms-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Opera */ background-image: -o-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #E77831), color-stop(50, #E77831), color-stop(50, #5E4338), color-stop(100, #5E4338)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* W3C Markup */ background-image: linear-gradient(to right, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%) none repeat scroll 0% 0%;}

/*Remplissage gradient flat brique to potiron colonne pleine largeur script et fusée Accueil*/
#cc-m-12855253933
{ /* IE10+ */ background-image: -ms-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Opera */ background-image: -o-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #CB4D25), color-stop(50, #CB4D25), color-stop(50, #E77831), color-stop(100, #E77831)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* W3C Markup */ background-image: linear-gradient(to right, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%) none repeat scroll 0% 0%;}

/*Remplissage gradient brique to potiron colonne pleine largeur casting-voix Accueil*/
#cc-m-12890293033
{/* IE10+ */ background-image: -ms-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Opera */ background-image: -o-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CB4D25), color-stop(100, #E77831));
/* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* W3C Markup */ background-image: linear-gradient(to bottom, #CB4D25 0%, #E77831 100%) none repeat scroll 0% 0%;}
/*]]>*/
</style>

Au total, sans les commentaires (rajouter les balises de déclaration de css)

Code:

/*<![CDATA[*/

/*Remplissage colonne pleine largeur FredVig*/
.jtpl-content {max-width: 100%!important;}

@media (min-width:1200px) {
  #cc-matrix-3674452133 > div{
padding: 10px 25% !important;
max-width: 50%;}
}
@media (max-width:1200px) {
  #cc-matrix-3674452133 > div{
padding: 10px 10%!important;
min-width:80%;}
}
.jtpl-section-main,
.jtpl-content {
padding:0!important;
}
.ccgalerie div.thumb_sq3,
.ccgalerie div.thumb_sq3 img {
  background: rgba(255, 255, 255, 0)!important;}
 
/* Remplissage gradient flat potiron to chocolate colonne pleine largeur landing et café Accueuil */
#cc-m-12855124033
{ /* IE10+ */ background-image: -ms-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Opera */ background-image: -o-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #E77831), color-stop(50, #E77831), color-stop(50, #5E4338), color-stop(100, #5E4338)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%); /* W3C Markup */ background-image: linear-gradient(to right, #E77831 0%, #E77831 50%, #5E4338 50%, #5E4338 100%) none repeat scroll 0% 0%;}

/*Remplissage gradient flat brique to potiron colonne pleine largeur script et fusée Accueil*/
#cc-m-12855253933
{ /* IE10+ */ background-image: -ms-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Opera */ background-image: -o-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #CB4D25), color-stop(50, #CB4D25), color-stop(50, #E77831), color-stop(100, #E77831)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%); /* W3C Markup */ background-image: linear-gradient(to right, #CB4D25 0%, #CB4D25 50%, #E77831 50%, #E77831 100%) none repeat scroll 0% 0%;}

/*Remplissage gradient brique to potiron colonne pleine largeur casting-voix Accueil*/
#cc-m-12890293033
{/* IE10+ */ background-image: -ms-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Opera */ background-image: -o-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CB4D25), color-stop(100, #E77831));
/* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #CB4D25 0%, #E77831 100%);
/* W3C Markup */ background-image: linear-gradient(to bottom, #CB4D25 0%, #E77831 100%) none repeat scroll 0% 0%;}
/*]]>*/
</style>

[Solie]

Tu es un ange !

En plus, tu me glisses un code que j'avais longuement recherché pour mon site pro au content gris, mais en tentant d'agir sur "border" en transparent au lieu de "background".

Code:

.ccgalerie div.thumb_sq3,
.ccgalerie div.thumb_sq3 img {
  background: rgba(255, 255, 255, 0)!important;}

Je vais le mettre de côté celui-là


Merci beaucoup pour tes explications. C'est un peu plus clair à présent. Je vais pouvoir styler et agir sur n'importe quelle colonne du site.


Mise en place du code :

Plus de dépassement à droite qui rendrait le background du site visible.

Par contre, quand le module colonne comporte deux colonnes, les éléments de celles-ci n'apparaissent plus centrés.

Je comprends que c'est la conséquence de la marge à 0 sur le content. Serait-ce possible d'ajouter un bout de code pour recentrer les éléments ?

[FredVig]

Par contre, quand le module colonne comporte deux colonnes, les éléments de celles-ci n'apparaissent plus centrés.

ça dépend… il y a deux réponses possibles à cette question :
Les éléments textes de la première colonne peuvent être recentrés dans le rectangle qui les encadre depuis leur module propre. Mais j'ai compris que tu veux conserver cette présentation pour le cas où tous les élements sont sur une colonne, afin que le premier texte figure à gauche.
Il y a aussi un petit padding de 2% qui traine quelque part : .cc-m-hgrid-column {padding: 0 2% 0 0;}.

Par contre, les 4 groupes sont centrés dans le contenant principal, mais la marge automatique sur les côtés de ce contenant est de 25% (ou 10% en mode étroit). Cela donne l'impression que les 4 rectangles sont rassemblés vers le milieu de la page.
Peut-être voulais-tu un effet différent.
C'est possible en changeant le rapport en pourcentage de la width et de la marge , mais seulement sur ces éléments.
Alors… Attention ! On ne cible plus la div du matrix, mais les divs de la première div du matrix. On applique - aux rectangles - ce que le premier code faisait au CONTENANT des rectangles. Les marges sont au nombre de 4 maintenant + deux largeurs…
On avait ça :
[A + B + A] = 100%
On aura ça :
[(C + D + C) + (C + D + C)] = 100%
soit
(10% X 4) + (30%X2) =100%

Code:

#cc-m-12855124033,#cc-m-12855253933{
padding: 10px 0 !important;
width: 100%;}
#cc-m-12855253933 .cc-m-hgrid-column  ,#cc-m-12855124033 .cc-m-hgrid-column{
padding: 10px 0 !important;
  width: 30%!important;
margin:  0 10%;
}

et il faudra changer dans le code précédent le ciblage inconditionnel de tous les div du matrix par un ciblage du premier et du troisième divs :

Code:

#cc-m-12858568633 et #cc-m-12890293033
au lieu de
#cc-matrix-3674452133 > div


soit, je crois :

Code:

@media (min-width:1200px) {
  #cc-m-12858568633, #cc-m-12890293033{
padding: 10px 25% !important;
max-width: 50%;}
}
@media (max-width:1200px) {
  #cc-m-12858568633, #cc-m-12890293033{
padding: 10px 10%!important;
min-width:80%;}
}

et pour finir, il faut prévoir le cas où tous les 4 éléments sont sur une seule colonne.
Comme par défaut, ce que tu as déjà fait fonctionne, je rajoute seulement un @media sur la première condition.
Ce qui fait en tout :

Code:


.jtpl-content {max-width: 100%!important;}

    @media (min-width:1200px) {
      #cc-m-12858568633, #cc-m-12890293033{
    padding: 10px 25% !important;
    max-width: 50%;}
    }
    @media (max-width:1200px) {      
      #cc-m-12858568633, #cc-m-12890293033{
    padding: 10px 10%!important;
    min-width:80%;}    
    }

@media (max-width:500px) {
  #cc-m-12855124033,#cc-m-12855253933{
   padding: 10px 0 !important;width: 100%;}

#cc-m-12855253933 .cc-m-hgrid-column  ,#cc-m-12855124033 .cc-m-hgrid-column{
padding: 10px 0 !important;  width: 30%!important;
margin: 0 10%!important;}
}
@media (min-width:500px) {
  #cc-m-12855124033,#cc-m-12855253933{
   padding: 10px 2% !important;}
}

.jtpl-section-main,
.jtpl-content {
padding:0!important;
}
(…
(la suite reste inchangée)


Je sais, ce n'est pas simple de comprendre tout sans commentaires détaillés…
Le principe général est toujours le même : placer les éléments à 100%, mais 100% constitué de
X% (marge) + Y% (width) + X% (marge)

Autrement dit…
[(A + B + A) + (A + B + A)]
où […] = 100%

[Solie]

C'est nickel ! Je n'ai pas la possibilité de visualiser sur un écran supérieur à 12 pouces, mais les éléments sont centrès sur mon ordi et sur iPad (portrait et landscape).






Il faudra que j'évite de mettre du gradient à 50% pour les smartphones qui affichent chaque colonne individuellement parce que chaque élément se retrouve à cheval sur deux couleurs. C'est ce que je vois avec le Firefox du PC en réduisant. En effet, mon vieil iPhone de 2009 n'affiche aucun background gradient. Je vais chercher.

Tu as dit : "et pour finir, il faut prévoir le cas où tous les 4 éléments sont sur une seule colonne". Je n'ai pas compris.

Je t'assure que même avec les commentaires, c'est pas super facile de comprendre. Heureusement que tu m'as mâché le travail

[FredVig]

Tu as dit : "et pour finir, il faut prévoir le cas où tous les 4 éléments sont sur une seule colonne". Je n'ai pas compris.

Quand la fenêtre est vraiment étroite, les 4 p'tits gars se mettent l'un au dessus de l'autre :
https://servimg.com/view/14645463/71

Il y aura sûrement des ajustements nécessaires pour ce type de situation

[FredVig]

Une petite erreur s'est glissée.
L'accolade de fin de @media (max-width:500px) {… }
doit être déplacée pour ne pas y inclure la partie :
#cc-m-12855253933 .cc-m-hgrid-column  ,#cc-m-12855124033 .cc-m-hgrid-column{
padding: 10px 0 !important;  width: 30%!important;
margin: 0 10%!important;}

ça fait ça :

Code:


#cc-m-12855253933 .cc-m-hgrid-column  ,#cc-m-12855124033 .cc-m-hgrid-column{
padding: 10px 0 !important;  width: 30%!important;
margin: 0 10%!important;}

@media (max-width:500px) {
  #cc-m-12855124033,#cc-m-12855253933{
   padding: 10px 0 !important;width: 100%;}
}
@media (min-width:500px) {
  #cc-m-12855124033,#cc-m-12855253933 {padding: 10px 2% !important;}
}

sur grand écran :

[Julien]

Je repost donc mon soucis ici après conseil de Solie
voici donc mon problème, après avoir intégré les codes afin d'avoir un bandeau en pleine largeur, le bandeau dépasse sur la droite de mon design.

J'utilise le thème tokyo

Merci d'avance si quelqu'un sait d'ou cela peut venir

[FilmsdeLover]

A vu de nez, vite fait en passant, il me semble que l'attribut width:100% du menu d'en haut et du header posent souci. Y'a aussi un truc avec votre footer bleu avec l'image et ses -1000px de marge à gauche et à droite. Je ne sais pas trop parmi ces codes ce qui ressort d'un éventuel bug de design Jimdo ou d'une altération de votre part via des codes mais c'est par là que je commencerai.

[Julien]

En relisant le post de FredVig, il faut effectivement peut être faire autrement

BOn, je reprends tout :
padding: 40px 1000px
margin-left: -1000px;  
ce n'est pas logique pour un design centré et responsive
il faut imposer des marges automatiques latérales dans un contenant en full width
Donc,
Cible le contenant de ton div destiné à être en toute largeur :
#cc-matrix-3674452133 et impose-lui un width de 100%
Pour ça, il faut chercher lequel de ses parents lui impose la largeur de 990px et changer ça
Une fois que #cc-matrix-3674452133 sera en pleine largeur, tu pourras centrer les contenants intérieurs, leur donner des marges auto…
c'est la démarche que j'ai eu avec le code que je te propose en second.
J'ai juste rectifié en plus quelques comportements annexes

j'ai donc supprimé les margin left et right, je cherche comment régler le problème de largeur,
apparemment le contenu a l’intérieur du bloc fonctionne bien ( a part le bouton "me contacter" qui prend toute la largeur de l’écran sur smartphone )
Pourriez-vous me dire si c'est pareil chez vous ?

[Contenu sponsorisé]