Ivica Kartelo Ivica Kartelo -4 years ago 322
Smarty Question

Smarty admin page HTML parse

This script

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


is in div. First row is ok, other rows name goes up right, and div tags disappears. It is because of smarty else. My grid is correct.

Here start my problem

{else}


<div class="grid_1">

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


here end my problem

Here is complete template:

{* admin_menus.tpl *}
{load_presentation_object filename="admin_menus" assign="obj"}

<form method="post" action="admin.php">
<div class="container">
<div class="grid_6 last">
<a href="admin.php?Click=Logout">Logout</a>
<a href="index.php">Home</a>

<h3>Add new menu:</h3>
</div>

<div class="grid_1">
<input type="text" name="menu_name" value="[name]" size="20" />
</div>
<div class="grid_3">
<input type="text" name="menu_content" value="[content]" size="20" />
</div>
<div class="grid_1">
<input type="text" name="menu_published" value={$smarty.now|date_format:"%Y-%m-%d"} size="5" />
</div>
<div class="grid_1 last">
<input type="submit" name="submit_add_mnu_0" value="Add" />
</div>
</div>
<div class="container">
<div class="grid_6 last">
<h3>Edit the menus of Kartedium:</h3>
</div>
</div>


{if $obj->mErrorMessage}<p class="error">{$obj->mErrorMessage}</p>{/if}
{if $obj->mMenusCount eq 0}
<p class="no-items-found">There are no menus in your database!</p>
{else}
<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>



{section name=i loop=$obj->mMenus}
{if $obj->mEditItem == $obj->mMenus[i].menu_id}
<div class="container">
<div class="grid_1">
<input type="text" name="name" value="{$obj->mMenus[i].name}" size="10" />
</div>
<div class="grid_3">
{strip}
<textarea name="content" rows="20" cols="10">
{$obj->mMenus[i].content}
</textarea>
{/strip}
</div>
<div class="grid_1">
<input type="text" name="published" value="{$obj->mMenus[i].published}" size="10" />
</div>
<div class="grid_1 last">
<input type="submit" name="submit_update_mnu_{$obj->mMenus[i].menu_id}" value="Update" />
<input type="submit" name="cancel" value="Cancel" />
<input type="submit" name="submit_delete_mnu_{$obj->mMenus[i].menu_id}" value="Delete" />
</div>
</div>
{else}
<div class="container">
<div class="grid_1">
{$obj->mMenus[i].name}
</div>
<div class="grid_3">
{$obj->mMenus[i].content}
</div>
<div class="grid_1">
{$obj->mMenus[i].published}
</div>
<div class="grid_1 last">
<input type="submit" name="submit_edit_mnu_{$obj->mMenus[i].menu_id}" value="Edit" />
<input type="submit" name="submit_delete_mnu_{$obj->mMenus[i].menu_id}" value="Delete" />
</div>
</div>
{/if}
{/section}
{/if}
</form>


The end of template.

I see now that in this code div not disappears, but also name gos up.
Source Page view is:

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

Što YouTube učini učenju stranih jezika?
</div>


The end this par of source page view.

Complete Source page:

<!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">
<a href="admin.php?Click=Logout">Logout</a>
<a href="index.php">Home</a>

<h3>Add new menu:</h3>
</div>

<div class="grid_1">
<input type="text" name="menu_name" value="[name]" size="20" />
</div>
<div class="grid_3">
<input type="text" name="menu_content" value="[content]" size="20" />
</div>
<div class="grid_1">
<input type="text" name="menu_published" value=2017-02-28 size="5" />
</div>
<div class="grid_1 last">
<input type="submit" name="submit_add_mnu_0" value="Add" />
</div>
</div>
<div class="container">
<div class="grid_6 last">
<h3>Edit the menus of Kartedium:</h3>
</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">

Kad sebi kažeš budi strpljiv, tvoje učenje je ugroženo
</div>


<div class="grid_3">
<p>
<img src="accessories/images/12.jpg" />


<p>Tek sam na dvanaestoj (od 38 ukupno EffortlessEnglish lessons) nastavnoj jedinici u Školi od A. J. Hogea, dalje učim s još većim elanom.
</div>
<div class="grid_1">
2017-02-26
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_88"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_88"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

Što YouTube učini učenju stranih jezika?
</div>


<div class="grid_3">
<p>
<img src="accessories/images/14.jpg" />


radi A. J. Hoge i tako radite i vi. Cijeli Vijetnam uči po A. J. Hogeu. A. J. Hoge je od mene dobio 99$ za školovanje PowerlessEnglish, a dobit će još puno više za druge projekte koje nudi.

</div>
<div class="grid_1">
2017-02-26
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_87"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_87"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

U svakom desetljeću našeg života, dogodi se 5 važnih godina
</div>


<div class="grid_3">
<p>
<img src="accessories/images/16.jpg" />


prođe onih pet godina, dolazi potpuno novih pet godina, pa bi nova mantra trebala glasiti, moje radno mjesto je učenje i imam ga doživotno.

</div>
<div class="grid_1">
2017-02-26
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_86"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_86"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

Kad god želiš prekinuti učenje, nađi razlog da to ne učiniš
</div>


<div class="grid_3">
<p>
<img src="accessories/images/18.jpg" />



ću sebe kako tečno govorim i tečno razumijem i nastavit ću s učenjem.

</div>
<div class="grid_1">
2017-02-26
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_85"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_85"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

Ana Karenjina, Rat i mir
</div>


<div class="grid_3">
<p>
<img src="accessories/images/20.jpg" />



prijevod. Ne mogu sad vratiti 17-e svoje godine i čitati Ulixa. Što se može. Ostalo mi je čitati ga sad, što nije malo.

</div>
<div class="grid_1">
2017-02-26
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_84"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_84"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

Od vatre do Marsa
</div>


<div class="grid_3">
<p>
<img src="accessories/images/21.jpg" />


zahvaljujući fitnesu. Oni ništa neće proizvoditi mišićima za svoje životne potrebe.

</div>
<div class="grid_1">
2017-02-26
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_78"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_78"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

Ako je na stolu malo kruha, drži svoj u ruci
</div>


<div class="grid_3">
<p>
<img src="accessories/images/21.jpg" />

stolu jedini kruh kojeg u kući imaju.

</div>
<div class="grid_1">
2017-02-25
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_77"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_77"
value="Delete" />
</div>
</div>
<div class="container">


<div class="grid_1">

Model uzor
</div>


<div class="grid_3">
<p>
<img src="accessories/images/23.jpg" />

iše od 10.000 sati.
</div>
<div class="grid_1">
2017-02-25
</div>
<div class="grid_1 last">
<input type="submit"
name="submit_edit_mnu_76"
value="Edit" />
<input type="submit"
name="submit_delete_mnu_76"
value="Delete" />
</div>
</div>

</form>

</body>
</html>


The end of complete source page.

The complete CSS:

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%;
}}


The end of CSS

Answer Source

You have a problem with your CSS.

When you use float: left to position divs inside a container horizontally, you need to add the clear attribute to the container to stop the containers from floating as well.

Change the container class like that:

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

See also How to float 3 divs side by side using CSS

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download