2017-02-27 4 views
-2

Ce scriptSmarty page d'administration HTML parser

{else} 
{$obj->mMenus[i].name} 

est en div. La première rangée est ok, le nom des autres lignes monte à droite, et les balises div disparaissent. C'est à cause de smarty d'autre. Ma grille est correcte.

Ici commencer mon problème

{else}

  <div class="grid_1">     

       {$obj->mMenus[i].name} 
      </div> 

fin ici mon problème

Voici modèle complet:

<form method="post" action="admin.php"> 
    <div class="container"> 
     <div class="grid_6 last"> 
     ... 
     </div> 

     <div class="grid_1"> 
      ... 
     </div> 
     <div class="grid_3"> 
      ..... 
     </div> 
     <div class="grid_1"> 
      ..... 
     </div> 
     <div class="grid_1 last"> 
      .... 
     </div> 
    </div> 
    <div class="container"> 
     <div class="grid_6 last"> 
      ...... 
     </div> 
    </div> 


    ....... 
     <p class="no-items-found">menus...!</p> 
    ...... 
     <div class="container"> 
      <div class="grid_1"> 
       Menu Name 
      </div> 
      <div class="grid_3"> 
       Menu Content 
      </div> 
      <div class="grid_1"> 
       Menu Published 
      </div> 
      <div class="grid_1 last"> 
       &nbsp; 
      </div> 
     </div> 



     ..... 
      <div class="container">   
       <div class="grid_1"> 
        ....... 
       </div> 
       <div class="grid_3"> 
        ....... 
       </div> 
       <div class="grid_1"> 
        ....... 
       </div> 
       <div class="grid_1 last"> 
        ........ 
        ........ 
       </div> 
      </div> 
     {else} 
      <div class="container">  
       <div class="grid_1">     
        ...... 
       </div> 
       <div class="grid_3"> 
        ...... 
       </div> 
       <div class="grid_1"> 
        ..... 
       </div> 
       <div class="grid_1 last"> 
        ...... 
        ....... 
       </div> 
      </div> 
     ...... 
</form> 

La fin du modèle.

Je vois maintenant que dans ce code div ne disparaît pas, mais aussi nomme up. vue de la page Source est:

<div class="container">  
<div class="grid_1">     

       ....... 
      </div> 

.......

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Authentication</title> 
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="accessories/styles/kartedium.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 



<form method="post" action="admin.php"> 
     <div class="container"> 
       <div class="grid_6 last"> 
       ..... 
        ..... 
       </div> 

       <div class="grid_1"> 
        ...... 
       </div> 
       <div class="grid_3"> 
        ...... 
       </div> 
       <div class="grid_1"> 
        ....... 
       </div> 
       <div class="grid_1 last"> 
        ..... 
       </div> 
     </div> 
     <div class="container"> 
       <div class="grid_6 last"> 
       ..... 
       </div> 
     </div> 



     <div class="container"> 
       <div class="grid_1"> 
        Menu Name 
       </div> 
       <div class="grid_3"> 
        Menu Content 
       </div> 
       <div class="grid_1"> 
        Menu Published 
       </div> 
       <div class="grid_1 last"> 
        &nbsp; 
       </div> 
     </div> 




              <div class="container">  


       <div class="grid_1">     

        ..... 
       </div> 


       <div class="grid_3"> 
        <p> 
.... 


<p>....... 
       </div> 
       <div class="grid_1"> 
        2017-02-26 
       </div> 
       <div class="grid_1 last"> 
        ...... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

       ...... 
       </div> 


       <div class="grid_3"> 
        <p> 
...... 


....... 

       </div> 
       <div class="grid_1"> 
        2017-02-26 
       </div> 
       <div class="grid_1 last"> 
        <input type="submit" 
     ..... 
     ...... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

       ...... 
       </div> 


       <div class="grid_3"> 
        <p> 
..... 

......

   </div> 
       <div class="grid_1"> 
        2017-02-26 
       </div> 
       <div class="grid_1 last"> 
        ...... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

        ....... 
       </div> 


       <div class="grid_3"> 
        <p> 
...... 



..... 
       </div> 
       <div class="grid_1"> 
        2017-02-26 
       </div> 
       <div class="grid_1 last"> 
        ..... 
     ..... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

        ..... 
       </div> 


       <div class="grid_3"> 
        <p> 
..... 

......

   </div> 
       <div class="grid_1"> 
        2017-02-26 
       </div> 
       <div class="grid_1 last"> 
        .... 
     ..... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

        ..... 
       </div> 


       <div class="grid_3"> 
        <p> 

.....

..... 

       </div> 
       <div class="grid_1"> 
        2017-02-26 
       </div> 
       <div class="grid_1 last"> 
        .. 
     .... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

        .... 
       </div> 


       <div class="grid_3"> 
        <p> 
...... 

       </div> 
       <div class="grid_1"> 
        2017-02-25 
       </div> 
       <div class="grid_1 last"> 
        .... 
     .... 
     .... 
       </div> 
    </div> 
             <div class="container">  


       <div class="grid_1">     

        .... 
       </div> 


       <div class="grid_3"> 
        <p> 

.....

..... 
       </div> 
       <div class="grid_1"> 
        ..... 
       </div> 
       <div class="grid_1 last"> 
        ...... 
       </div> 
    </div> 

       </form> 

    </body> 
</html> 

La fin de la page source complète.

Le CSS complet:

body { 
    font-family: 'Nunito', sans-serif; 
    font-weight: 100; 
    font-size: 1em; 
    color: #faf3bc; 
    background-color: #0976B2; 
} 

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */ 
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */ 
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */ 
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */ 
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */ 
.grid_6 { width: 100%; } /* 800px/800px = 100% */ 

.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6 { 
    margin-right: 1.25%; 
    float: left; 
    display: block; 
} 
.last {margin-right:0; } 

.container{ 
    width: 90%; 
    max-width: 800px; 
    padding: 4% 0; 
    margin: auto; 
} 
img { 
    max-width: 100%; 
} 
h1 { 
    font-size: 2.750em; 
    line-height: 1.25em; 
    font-weight: 100; 
    letter-spacing: -2.75px; 
    color: #ffffff; 
} 

a:link {color:#b4c34f; text-decoration:none;}  /* unvisited link */ 
a:visited {color:#b4c34f; text-decoration:none;} /* visited link */ 
a:hover {color:#faf3bc; text-decoration:underline;} /* mouse over link */ 
a:active {color:#b4c34f; text-decoration:none;} /* selected link */ 

a.selected {color:#ffffff;} /* selected link */ 

ul { 
    list-style-type:none; 
} 
    @media screen and (max-width : 705px) { 
.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6 { 
    width: 100%; 
}} 

La fin du CSS

+0

de couse. {/ if} est à la fin. Tout fonctionne comme avant la grille, comme dans la table, sauf que bon ne pas analyser HTML, disapears div tags autour de "nom", et nom sans div monter. – b2ok

+0

J'ai fourni plus de code. – b2ok

+0

Copie possible de [Comment faire flotter 3 divs côte à côte en utilisant CSS] (http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css) – NineBerry

Répondre

1

Vous avez un problème avec votre CSS. Lorsque vous utilisez float: left pour positionner horizontalement les divs dans un conteneur, vous devez ajouter l'attribut clear au conteneur pour empêcher les conteneurs de flotter également.

Modifier la classe conteneur comme ça:

.container{ 
    clear:both; 
    width: 90%; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 4%; 
} 

Voir aussi How to float 3 divs side by side using CSS

+0

Excelent NineBerry! Vous avez résolu le problème! J'ai ajouté l'attribut clear mais derrière les lignes. Applaudissements pour vous et merci beaucoup! – b2ok