28172 sujets

CSS et mise en forme, CSS3

[Résolu] Largeur de la page

Bonjour,
j'ai récupéré un template gratuit pour mon site. Lorsque je l'installe sur le serveur local, j'ai bien toutes les pages , mais les pages occupent toute la largeur de l'écran alors que dans la demo du template les pages occupent environ 80% de l'écran et centrées.
L'élément Body a une classe nommée home que je vois dans aucune feuille de style du template. Je ne sais pas comment faire pour avoir la même présentation avec celle de la démonstration ou du site que voiçi :
https://we.graphics/demo/piccolo/

Le lien pour télécharger le template:
https://freebiesbug.com/code-stuff/piccolo-free-bootstrap-html-template/

restant disponible pour plus d'informations, en vous remerciant d'avance.
Modifié par opeo (31 Aug 2020 - 12:34)
Modérateur
Bonjour,

La largeur est définie dans "bootstrap-responsive.css", via un série de media-queries sur le conteneur de classe ".container" (et aussi pour tout un tas d'autres classes).

Amicalement,
Merci de votre réponse.
En effet, J'ai essayé de remplacer dans les classes concernées
width: 100%; en width: 80%;
Mais je n'ai pas eu de changement. Je ne sais pas si c'est ce qu'il faut faire ? Je ne suis pas spécialiste des CSS !
Merci encore.
Modérateur
Bonjour,

Qu'est-ce que tu as corrigé exactement ?

La largeur du template dépend de la largeur de la fenêtre. C'est assez complexe à modifier.

Amicalement,
Modifié par parsimonhi (31 Aug 2020 - 16:40)
Bonjour,
Merci de votre réponse. J'ai apporté quelques modifications dans le fichier boodstrap-responsive.css dont voilà un exemple :

@media (min-width: 1200px) {
  .row {
    margin-left: -30px;
    *zoom: 1;
  }
  .row:before,
  .row:after {
    display: table;
    line-height: 0;
    content: "";
  }
  .row:after {
    clear: both;
  }
  [class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px;
  }
  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    /*width: 1170px;*/
      width:80%;
  }
  .span12 {
     width: 1170px;
  }
  .span11 {
    width: 1070px;
  }
  .span10 {
    width: 970px;
  }
  .span9 {
    width: 870px;
  }
  .span8 {
    width: 770px;
  }
  .span7 {
    width: 670px;
  }
  .span6 {
    width: 570px;
  }
  .span5 {
    width: 470px;
  }
  .span4 {
    width: 370px;
  }
  .span3 {
    width: 270px;
  }
  .span2 {
    width: 170px;
  }
  .span1 {
    width: 70px;
  }
  .offset12 {
    margin-left: 1230px;
  }
  .offset11 {
    margin-left: 1130px;
  }
  .offset10 {
    margin-left: 1030px;
  }
  .offset9 {
    margin-left: 930px;
  }
  .offset8 {
    margin-left: 830px;
  }
  .offset7 {
    margin-left: 730px;
  }
  .offset6 {
    margin-left: 630px;
  }
  .offset5 {
    margin-left: 530px;
  }
  .offset4 {
    margin-left: 430px;
  }
  .offset3 {
    margin-left: 330px;
  }
  .offset2 {
    margin-left: 230px;
  }
  .offset1 {
    margin-left: 130px;
  }
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  .row-fluid:before,
  .row-fluid:after {
    display: table;
    line-height: 0;
    content: "";
  }
  .row-fluid:after {
    clear: both;
  }
  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 30px;
    margin-left: 2.564102564102564%;
    *margin-left: 2.5109110747408616%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid .span12 {   
	width: 100%;
    *width: 99.94680851063829%;
  }
  .row-fluid .span11 {
    width: 91.45299145299145%;
    *width: 91.39979996362975%;
  }
  .row-fluid .span10 {
    width: 82.90598290598291%;
    *width: 82.8527914166212%;
  }
  .row-fluid .span9 {
    width: 74.35897435897436%;
    *width: 74.30578286961266%;
  }
  .row-fluid .span8 {
    width: 65.81196581196582%;
    *width: 65.75877432260411%;
  }
  .row-fluid .span7 {
    width: 57.26495726495726%;
    *width: 57.21176577559556%;
  }
  .row-fluid .span6 {
    width: 48.717948717948715%;
    *width: 48.664757228587014%;
  }
  .row-fluid .span5 {
    width: 40.17094017094017%;
    *width: 40.11774868157847%;
  }
  .row-fluid .span4 {
    width: 31.623931623931625%;
    *width: 31.570740134569924%;
  }
  .row-fluid .span3 {
    width: 23.076923076923077%;
    *width: 23.023731587561375%;
  }
  .row-fluid .span2 {
    width: 14.52991452991453%;
    *width: 14.476723040552828%;
  }
  .row-fluid .span1 {
    width: 5.982905982905983%;
    *width: 5.929714493544281%;
  }
  .row-fluid .offset12 {
    margin-left: 105.12820512820512%;
    *margin-left: 105.02182214948171%;
  }
  .row-fluid .offset12:first-child {
    margin-left: 102.56410256410257%;
    *margin-left: 102.45771958537915%;
  }
  .row-fluid .offset11 {
    margin-left: 96.58119658119658%;
    *margin-left: 96.47481360247316%;
  }
  .row-fluid .offset11:first-child {
    margin-left: 94.01709401709402%;
    *margin-left: 93.91071103837061%;
  }
  .row-fluid .offset10 {
    margin-left: 88.03418803418803%;
    *margin-left: 87.92780505546462%;
  }
  .row-fluid .offset10:first-child {
    margin-left: 85.47008547008548%;
    *margin-left: 85.36370249136206%;
  }
  .row-fluid .offset9 {
    margin-left: 79.48717948717949%;
    *margin-left: 79.38079650845607%;
  }
  .row-fluid .offset9:first-child {
    margin-left: 76.92307692307693%;
    *margin-left: 76.81669394435352%;
  }
  .row-fluid .offset8 {
    margin-left: 70.94017094017094%;
    *margin-left: 70.83378796144753%;
  }
  .row-fluid .offset8:first-child {
    margin-left: 68.37606837606839%;
    *margin-left: 68.26968539734497%;
  }
  .row-fluid .offset7 {
    margin-left: 62.393162393162385%;
    *margin-left: 62.28677941443899%;
  }
  .row-fluid .offset7:first-child {
    margin-left: 59.82905982905982%;
    *margin-left: 59.72267685033642%;
  }
  .row-fluid .offset6 {
    margin-left: 53.84615384615384%;
    *margin-left: 53.739770867430444%;
  }
  .row-fluid .offset6:first-child {
    margin-left: 51.28205128205128%;
    *margin-left: 51.175668303327875%;
  }
  .row-fluid .offset5 {
    margin-left: 45.299145299145295%;
    *margin-left: 45.1927623204219%;
  }
  .row-fluid .offset5:first-child {
    margin-left: 42.73504273504273%;
    *margin-left: 42.62865975631933%;
  }
  .row-fluid .offset4 {
    margin-left: 36.75213675213675%;
    *margin-left: 36.645753773413354%;
  }
  .row-fluid .offset4:first-child {
    margin-left: 34.18803418803419%;
    *margin-left: 34.081651209310785%;
  }
  .row-fluid .offset3 {
    margin-left: 28.205128205128204%;
    *margin-left: 28.0987452264048%;
  }
  .row-fluid .offset3:first-child {
    margin-left: 25.641025641025642%;
    *margin-left: 25.53464266230224%;
  }
  .row-fluid .offset2 {
    margin-left: 19.65811965811966%;
    *margin-left: 19.551736679396257%;
  }
  .row-fluid .offset2:first-child {
    margin-left: 17.094017094017094%;
    *margin-left: 16.98763411529369%;
  }
  .row-fluid .offset1 {
    margin-left: 11.11111111111111%;
    *margin-left: 11.004728132387708%;
  }
  .row-fluid .offset1:first-child {
    margin-left: 8.547008547008547%;
    *margin-left: 8.440625568285142%;
  }
  input,
  textarea,
  .uneditable-input {
    margin-left: 0;
  }
  .controls-row [class*="span"] + [class*="span"] {
    margin-left: 30px;
  }
  input.span12,
  textarea.span12,
  .uneditable-input.span12 {
    width: 1156px;
  }
  input.span11,
  textarea.span11,
  .uneditable-input.span11 {
    width: 1056px;
  }
  input.span10,
  textarea.span10,
  .uneditable-input.span10 {
    width: 956px;
  }
  input.span9,
  textarea.span9,
  .uneditable-input.span9 {
    width: 856px;
  }
  input.span8,
  textarea.span8,
  .uneditable-input.span8 {
    width: 756px;
  }
  input.span7,
  textarea.span7,
  .uneditable-input.span7 {
    width: 656px;
  }
  input.span6,
  textarea.span6,
  .uneditable-input.span6 {
    width: 556px;
  }
  input.span5,
  textarea.span5,
  .uneditable-input.span5 {
    width: 456px;
  }
  input.span4,
  textarea.span4,
  .uneditable-input.span4 {
    width: 356px;
  }
  input.span3,
  textarea.span3,
  .uneditable-input.span3 {
    width: 256px;
  }
  input.span2,
  textarea.span2,
  .uneditable-input.span2 {
    width: 156px;
  }
  input.span1,
  textarea.span1,
  .uneditable-input.span1 {
    width: 56px;
  }
  .thumbnails {
    margin-left: -30px;
  }
  .thumbnails > li {
    margin-left: 30px;
  }
  .row-fluid .thumbnails {
    margin-left: 0;
  }
}

Comme vous l'avez dit, c'est vraiment difficile. J'aurai souhaité vous envoyer ce fichier pour que vous voyez comment il est écrit mais impossible de vous l'envoyer !
Encore merci !
Modérateur
Bonjour,

1) Je ne vois pas trop ce que tu veux obtenir. Le template s'adapte à toute une liste de largeurs de fenêtre. La démo ne réduit pas son contenu à 80% de son contenant. Ça dépend de la place dont elle dispose. Es-tu certain que quand tu testes en local, tu avais bien la même largeur de fenêtre que quand tu as testé la démo ?

2) La modification que tu as effectuée ne s'applique que pour les largeurs de fenêtre qui font au moins 1200px de large (c'est la ligne @media (min-width: 1200px) qui contrôle ça). Si tu as testé avec une fenêtre plus étroite que ça, tu ne pouvais rien voir.

3) Mais on ne peut pas se contenter de mettre au hasard un 80% comme ça. Il faudrait sans doute passer des heures si ce n'est plus à vérifier tout le reste pour voir si ça rentre bien à l'intérieur de la nouvelle largeur spécifiée.

4) En plus de ça, y a du javascript qui fait peut-être des modifications dont il faudrait tenir compte.

Amicalement,
Modifié par parsimonhi (31 Aug 2020 - 18:06)
Bonjour,
Ce que j'ai voulu faire,
1- c'est utiliser l'explication de votre site sur le fluide intelligent :

div {
  width: 80%;
  max-width: 1000px;
  min-width: 700px;
}

En effet en local j'ai la même fenêtre et la démo est effectuée dans la même fenêtre.
2- J'ai pris cet exemple c'est par ce que j'ai une fenêtre large.
3-4- Je vais regarder attentivement et même le JS,afin de voir si j'y arrive.
Je vous remercie grandement.
Bonjour,
Merci pour votre aiguillage. En effet, j'ai retrouvé dans le JS une variable contenant les informations sur le body du css. J'ai modifié la variable et comme par miracle j'ai le même affichage que la démo.
Encore merci.
Modérateur
opeo a écrit :
Bonjour,
Merci pour votre aiguillage. En effet, j'ai retrouvé dans le JS une variable contenant les informations sur le body du css. J'ai modifié la variable et comme par miracle j'ai le même affichage que la démo.
Encore merci.


Le coup de bol ! Smiley biggrin Smiley biggrin Smiley biggrin

EDIT : et bravo !

Amicalement,
Modifié par parsimonhi (31 Aug 2020 - 21:38)
Sujet clos
Aller à