[Résolu] Gabarit de 2 column en 1

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Bonjour,

J'ai retire le "news" de mon gabarit et j'ai maintenant un gros "trou" a gauche (voir www.rvlc.fr)

J'aimerais qu'il n'y ait qu'une column, sans le vide.

voici mon gabarit :

Code :
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{cms_stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{literal}
<script type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
    <![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
  </head>
  <body>
    <div id="pagewrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "Layout: Top menu + 2 columns" *}
      <div id="header">

{* this holds the name of the site on the right side *}
        <h2 class="headright">{sitename}</h2>

{* a link back to home page and the header left image/logo, text is hidden using CSS *}
        <h1>{cms_selflink dir="start" text="$sitename"}</h1>        
        <hr class="accessibility" />
      </div>
{* End Header *}

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
        {menu loadprops=0 template='cssmenu.tpl'}
        <hr class="accessibility" />
      </div>
{* End Navigation *}

{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
      <div id="search">
      {search}
      </div>
{* End Search *}

{* Start Breadcrumbs *}
      <div class="crbk">
{* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}

        <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>
      </div>
{* End Breadcrumbs *}

{* Start Content *}
      <div id="content">



{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
          <div class="back2">
            <div class="back3">
              <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
                <h2>{title}</h2>
                {content}
                <br />{* to insure space below content *}

{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
            <div class="right49">
              <p>{anchor anchor='main' text='^ Top'}</p>
            </div>
            <div class="left49">
              <p> {cms_selflink dir="previous" label="Previous page: "}
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}

              <br />
              {cms_selflink dir="next"}
              </p>
            </div>
{* End relational links *}

                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}

{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          <div id="fooleft">
          {menu loadprops=0}
          </div>
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

    </div>
{* end pagewrapper *}

  </body>
</html>
#1
Bonjour,

J'ai retire le "news" de mon gabarit et j'ai maintenant un gros "trou" a gauche (voir www.rvlc.fr)

J'aimerais qu'il n'y ait qu'une column, sans le vide.

voici mon gabarit :

Code :
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{cms_stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{literal}
<script type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
    <![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
  </head>
  <body>
    <div id="pagewrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "Layout: Top menu + 2 columns" *}
      <div id="header">

{* this holds the name of the site on the right side *}
        <h2 class="headright">{sitename}</h2>

{* a link back to home page and the header left image/logo, text is hidden using CSS *}
        <h1>{cms_selflink dir="start" text="$sitename"}</h1>        
        <hr class="accessibility" />
      </div>
{* End Header *}

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
        {menu loadprops=0 template='cssmenu.tpl'}
        <hr class="accessibility" />
      </div>
{* End Navigation *}

{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
      <div id="search">
      {search}
      </div>
{* End Search *}

{* Start Breadcrumbs *}
      <div class="crbk">
{* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}

        <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>
      </div>
{* End Breadcrumbs *}

{* Start Content *}
      <div id="content">



{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
          <div class="back2">
            <div class="back3">
              <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
                <h2>{title}</h2>
                {content}
                <br />{* to insure space below content *}

{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
            <div class="right49">
              <p>{anchor anchor='main' text='^ Top'}</p>
            </div>
            <div class="left49">
              <p> {cms_selflink dir="previous" label="Previous page: "}
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}

              <br />
              {cms_selflink dir="next"}
              </p>
            </div>
{* End relational links *}

                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}

{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          <div id="fooleft">
          {menu loadprops=0}
          </div>
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

    </div>
{* end pagewrapper *}

  </body>
</html>
#2
Salut lyrical

je te conseil très fortement de lire notre documentation par ce que si tu bloc à ce stade tu vas pas aller bien loin.

Et si tu te poses la question, ici on essai de dépanner les problème des utilisateurs, certes, mais on ne fait jamais le travail à leur place Wink

Allez prend un peu de temps, tu en gagneras le double demain.
#2
Salut lyrical

je te conseil très fortement de lire notre documentation par ce que si tu bloc à ce stade tu vas pas aller bien loin.

Et si tu te poses la question, ici on essai de dépanner les problème des utilisateurs, certes, mais on ne fait jamais le travail à leur place Wink

Allez prend un peu de temps, tu en gagneras le double demain.
#3
Merci pour ta reponse.

Justement, j'ai fouiller et essaye de supprimer le systeme de news. Je comprend pas.
J'essaye de voir les videos et les tutos mais je ne trouve pas grand chose.

Faut pas croire, je fais de la recherche xD
#3
Merci pour ta reponse.

Justement, j'ai fouiller et essaye de supprimer le systeme de news. Je comprend pas.
J'essaye de voir les videos et les tutos mais je ne trouve pas grand chose.

Faut pas croire, je fais de la recherche xD
#4
Bonsoir,

Une piste : regarde du côté du CSS (feuille Layout Topmenu + 2 columns). Au niveau de la div "div.back1", essaye de changer "margin-left" en mettant à 2% (comme margin-right).

Là on est dans le domaine du CSS, qui n'est pas directement lié à CMS MS. Donc mieux vaut connaître un peu pour modifier les thèmes/gabarits.

Courage !
#4
Bonsoir,

Une piste : regarde du côté du CSS (feuille Layout Topmenu + 2 columns). Au niveau de la div "div.back1", essaye de changer "margin-left" en mettant à 2% (comme margin-right).

Là on est dans le domaine du CSS, qui n'est pas directement lié à CMS MS. Donc mieux vaut connaître un peu pour modifier les thèmes/gabarits.

Courage !
#5
airelibre a écrit :Bonsoir,

Une piste : regarde du côté du CSS (feuille Layout Topmenu + 2 columns). Au niveau de la div "div.back1", essaye de changer "margin-left" en mettant à 2% (comme margin-right).

Là on est dans le domaine du CSS, qui n'est pas directement lié à CMS MS. Donc mieux vaut connaître un peu pour modifier les thèmes/gabarits.

Courage !

Merci beaucoup, je venais juste de trouver quand tu as posté ^^
C'est donc dans le CMS du gabarit :-)
Le probleme maintenant c'est que j'ai un rectangle blanc horrible vers la droite-bas de mes pages, vers le "top"...

Merci encore!
#5
airelibre a écrit :Bonsoir,

Une piste : regarde du côté du CSS (feuille Layout Topmenu + 2 columns). Au niveau de la div "div.back1", essaye de changer "margin-left" en mettant à 2% (comme margin-right).

Là on est dans le domaine du CSS, qui n'est pas directement lié à CMS MS. Donc mieux vaut connaître un peu pour modifier les thèmes/gabarits.

Courage !

Merci beaucoup, je venais juste de trouver quand tu as posté ^^
C'est donc dans le CMS du gabarit :-)
Le probleme maintenant c'est que j'ai un rectangle blanc horrible vers la droite-bas de mes pages, vers le "top"...

Merci encore!
#6
Oui, c'est parce que ce thème n'est pas fait pour être affiché en pleine largeur. Il faut que tu fasses des aménagements dans les styles ou que tu modifies l'image de fond
#6
Oui, c'est parce que ce thème n'est pas fait pour être affiché en pleine largeur. Il faut que tu fasses des aménagements dans les styles ou que tu modifies l'image de fond
#7
Merci beaucoup. Je vais essayer de faire des modifs.

Merci encore!
#7
Merci beaucoup. Je vais essayer de faire des modifs.

Merci encore!


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)