Уроки СSS ( урок № 3) меняем дизайн таблиц

[TopRaN 235]

Сегодня я расскажу как поменять внешний вид (отображение блоками). Урок достаточно простой.

Для начала мы продумаем как мы хотим видеть наш блок.

1.Создаем разметочную область, сам блок. Задаем высоту, ширину, прижимаем влево.

.boxt{width: 212px;height: 350px;margin: 40px auto;float: left;margin-left: 15px;position: relative;}

2 Добавляем обводку блока для изображения

border: 1px solid rgba(39, 33, 33, 0.27);

3 Создаем 3 блока с датой, id и тип квартиры

.boxt_data {width: 45px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}.boxt_id {width: 45px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}.boxt_tip {width: 102px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}

4. Добавляем блок изображения

.boxt_image {width: 200px;height: 150px;margin: 0px auto;float: left;margin-left: 5px;border: 1px solid rgba(39, 33, 33, 0.27);position: relative;}

5. Создаем 4 разметочные области для блоков

.boxt_1 {width: 200px;height: 155px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}.boxt_2 {width: 210px;height: 30px;margin: 0px auto;float: left;margin-left: px;position: relative;}.boxt_3 {width: 210px;height: 30px;margin: 0px auto;float: left;margin-left: px;position: relative;}.boxt_4 {width: 200px;height: 60px;margin: 0px auto;float: left;margin-left: 5px;margin-top: -5px;position: relative;border: 1px solid rgba(39, 33, 33, 0.27);}

6.В каждой из разделочных областей мы создадим индивидуальные блоки с нужной нам информацией. Я взял такие как город, улица, площадь и описание.

.boxt_g {width: 45px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}.boxt_g1 {width: 152px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}.boxt_u {width: 202px;height: 20px;margin: 0px auto;float: left;margin-left: 5px;position: relative;}.boxt_p {width: 45px;height: 20px;margin: 0px auto;float: left;margin-left: 5px;position: relative;}.boxt_p1 {width: 152px;height: 20px;margin: 0px auto;float: left;margin-left: 5px;position: relative;}

7.  добавим еще 2 блока ( 1 с ценой – 2 с избранным) так же создадим для них разделочную область. Поместим данный блок в блок с изображением.

.boxt_ipr {width: 210px;height: 30px;margin: -32px auto;float: left;margin-left: 5px;position: relative;}.boxt_i {text-align: center;width: 25px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}.boxt_pr {text-align: center;width: 157px;height: 20px;margin: 5px auto;float: left;margin-left: 5px;position: relative;}

8.Теперь приступим ко второму этапу и по-моему мнению самому важному. Мы будем украшать наши блоки, напишем для них стили.

 8.1. блоку .boxt_data, .boxt_id, .boxt_tip мы зададим цвет фона, цвет текста, и зададим положение текста по центру.

background:#5599E4;color:white;text-align: center;

8.2 аналогично действие мы выполним с другими блоками

9. Теперь для блока boxt_pr добавим размер и цвет текста

color: #EBE6E8;font-size: 20px;

10. Приступаем помещаем основные функции в созданные нами блоки

{section name=i loop=$grid_items} <div class="boxt">    <div class="boxt_data">    {$grid_items[i].date}    </div>    <div class="boxt_id">    ID {$grid_items[i].id}    </div>    <div class="boxt_tip">    {$grid_items[i].type_sh}    </div>       {if $grid_items[i].img != '' }      <div class="boxt_image">      <a                                               href="{if $grid_items[i].url!=''}{$grid_items[i].url}{else}{$grid_items[i].href}{/if}"                                               title="{$grid_items[i].city}/{$grid_items[i].district}/{$grid_items[i].street}">                                               <img src="{$estate_folder}/img/data/{$grid_items[i].img[0].preview}"                                               alt="{$grid_items[i].city}/{$grid_items[i].district}/{$grid_items[i].street}"                                               width="110" />              </a>           <div class="boxt_ipr">              <div class="boxt_i">                {if isset($smarty.session.favorites)} {if                                   in_array($grid_items[i].id,$smarty.session.favorites)} <a                                               class="remove_from_favorites" alt="{$grid_items[i].id}"                                               title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a>                                   {else} <a class="add_to_favorites" alt="{$grid_items[i].id}"                                               title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if}                                   {/if}              </div>              <div class="boxt_pr">                {$grid_items[i].price|number_format:0:",":""}              </div>           </div>    </div>   {else}   <div class="boxt_image">      <a                                               href="{if $grid_items[i].url!=''}{$grid_items[i].url}{else}{$grid_items[i].href}{/if}"                                               title="{$grid_items[i].city}/{$grid_items[i].district}/{$grid_items[i].street}">                                               <img src="{$estate_folder}/img/no_foto.png"                                               alt="{$grid_items[i].city}/{$grid_items[i].district}/{$grid_items[i].street}"                                               width="110" />             </a>           <div class="boxt_ipr">              <div class="boxt_i">              {if isset($smarty.session.favorites)} {if                                   in_array($grid_items[i].id,$smarty.session.favorites)} <a                                               class="remove_from_favorites" alt="{$grid_items[i].id}"                                               title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a>                                   {else} <a class="add_to_favorites" alt="{$grid_items[i].id}"                                               title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if}                                   {/if}              </div>              <div class="boxt_pr">             {$grid_items[i].price|number_format:0:",":""}              </div>           </div>    </div>   {/if}    <div class="boxt_1">       <div class="boxt_g">       г.       </div>       <div class="boxt_g1">      {if         $grid_items[i].city ne ''} {$grid_items[i].city} {/if}      </div>    </div>    <div class="boxt_2">        <div class="boxt_u">        {if $grid_items[i].street ne ''} {$grid_items[i].street}        {if $grid_items[i].number ne ''}, {$grid_items[i].number}{/if}                        {else}         {if $grid_items[i].street ne ''} {$grid_items[i].street}        {if $grid_items[i].number ne ''}, {$grid_items[i].number}         {/if}           {/if}{/if}      </div>    </div>    <div class="boxt_3">       <div class="boxt_p">       пл.       </div>       <div class="boxt_p1">      {if $grid_items[i].square_all ne                                                           ''}{$grid_items[i].square_all}{else}-{/if} / {if                                                           $grid_items[i].square_live ne                                                           ''}{$grid_items[i].square_live}{else}-{/if} / {if                                                           $grid_items[i].square_kitchen ne                                                           ''}{$grid_items[i].square_kitchen}{else}-{/if}       </div>    </div>    <div class="boxt_4">   {$grid_items[i].text|strip_tags|truncate:200}     </div></div>{/section}

Ну вот и все . Пользуемся на здоровье.

P.S. перед тем как изменять что-то на своем сайте ОБЯЗАТЕЛЬНО ДЕЛАЙТЕ КОПИЮ!!!

Р.s/s/s/s/s Изменения писались под чистую систему (считается та система которая только-что установлена). Но если вы не делали координальных изменений то можете смело заливать.

 

Если Вам интересны мои уроки то пишите отзывы

 

Вы можете написать сами или просто заменить файл который находиться ниже.

realty_grid_thumbs.tpl.html

[Владимир 0]

Сегодня я расскажу как поменять внешний вид (отображение блоками). Урок достаточно простой.

Для начала мы продумаем как мы хотим видеть наш блок.

1.Создаем разметочную область, сам блок. Задаем высоту, ширину, прижимаем влево.

.boxt{

width: 212px;

height: 350px;

margin: 40px auto;

float: left;

margin-left: 15px;

position: relative;

}

2 Добавляем обводку блока для изображения

border: 1px solid rgba(39, 33, 33, 0.27);

 

3 Создаем 3 блока с датой, id и тип квартиры

.boxt_data {

width: 45px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_id {

width: 45px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_tip {

width: 102px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

4. Добавляем блок изображения

.boxt_image {

width: 200px;

height: 150px;

margin: 0px auto;

float: left;

margin-left: 5px;

border: 1px solid rgba(39, 33, 33, 0.27);

position: relative;

}

5. Создаем 4 разметочные области для блоков

.boxt_1 {

width: 200px;

height: 155px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_2 {

width: 210px;

height: 30px;

margin: 0px auto;

float: left;

margin-left: px;

position: relative;

}

.boxt_3 {

width: 210px;

height: 30px;

margin: 0px auto;

float: left;

margin-left: px;

position: relative;

}

.boxt_4 {

width: 200px;

height: 60px;

margin: 0px auto;

float: left;

margin-left: 5px;

margin-top: -5px;

position: relative;

border: 1px solid rgba(39, 33, 33, 0.27);

}

6.В каждой из разделочных областей мы создадим индивидуальные блоки с нужной нам информацией. Я взял такие как город, улица, площадь и описание.

.boxt_g {

width: 45px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_g1 {

width: 152px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_u {

width: 202px;

height: 20px;

margin: 0px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_p {

width: 45px;

height: 20px;

margin: 0px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_p1 {

width: 152px;

height: 20px;

margin: 0px auto;

float: left;

margin-left: 5px;

position: relative;

}

7.  добавим еще 2 блока ( 1 с ценой – 2 с избранным) так же создадим для них разделочную область. Поместим данный блок в блок с изображением.

.boxt_ipr {

width: 210px;

height: 30px;

margin: -32px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_i {

text-align: center;

width: 25px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_pr {

text-align: center;

width: 157px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

8.Теперь приступим ко второму этапу и по-моему мнению самому важному. Мы будем украшать наши блоки, напишем для них стили.

 8.1. блоку .boxt_data, .boxt_id, .boxt_tip мы зададим цвет фона, цвет текста, и зададим положение текста по центру.

background:#5599E4;

color:white;

text-align: center;

8.2 аналогично действие мы выполним с другими блоками

9. Теперь для блока boxt_pr добавим размер и цвет текста

color: #EBE6E8;

font-size: 20px;

10. Приступаем помещаем основные функции в созданные нами блоки

{section name=i loop=$grid_items}

 <div class="boxt">

    <div class="boxt_data">

    {$grid_items.date}

    </div>

    <div class="boxt_id">

    ID {$grid_items.id}

    </div>

    <div class="boxt_tip">

    {$grid_items.type_sh}

    </div>

  

     {if $grid_items.img != '' }

      <div class="boxt_image">

      <a

                                               href="{if $grid_items.url!=''}{$grid_items.url}{else}{$grid_items.href}{/if}"

                                               title="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}">

                                               <img src="{$estate_folder}/img/data/{$grid_items.img[0].preview}"

                                               alt="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}"

                                               width="110" />

              </a>

           <div class="boxt_ipr">

              <div class="boxt_i">

                {if isset($smarty.session.favorites)} {if

                                   in_array($grid_items.id,$smarty.session.favorites)} <a

                                               class="remove_from_favorites" alt="{$grid_items.id}"

                                               title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a>

                                   {else} <a class="add_to_favorites" alt="{$grid_items.id}"

                                               title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if}

                                   {/if}

              </div>

              <div class="boxt_pr">

                {$grid_items.price|number_format:0:",":""}

              </div>

           </div>

   </div>

   {else}

   <div class="boxt_image">

      <a

                                               href="{if $grid_items.url!=''}{$grid_items.url}{else}{$grid_items.href}{/if}"

                                               title="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}">

                                               <img src="{$estate_folder}/img/no_foto.png"

                                               alt="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}"

                                               width="110" />

             </a>

           <div class="boxt_ipr">

              <div class="boxt_i">

              {if isset($smarty.session.favorites)} {if

                                   in_array($grid_items.id,$smarty.session.favorites)} <a

                                               class="remove_from_favorites" alt="{$grid_items.id}"

                                               title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a>

                                   {else} <a class="add_to_favorites" alt="{$grid_items.id}"

                                               title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if}

                                   {/if}

              </div>

              <div class="boxt_pr">

             {$grid_items.price|number_format:0:",":""}

             </div>

           </div>

   </div>

   {/if}

    <div class="boxt_1">

       <div class="boxt_g">

       г.

       </div>

       <div class="boxt_g1">

      {if

         $grid_items.city ne ''} {$grid_items.city} {/if}

      </div>

    </div>

    <div class="boxt_2">

       <div class="boxt_u">

        {if $grid_items.street ne ''} {$grid_items.street}

        {if $grid_items.number ne ''}, {$grid_items.number}{/if}

                        {else}

        {if $grid_items.street ne ''} {$grid_items.street}

        {if $grid_items.number ne ''}, {$grid_items.number}

         {/if}

          {/if}{/if}

      </div>

    </div>

    <div class="boxt_3">

       <div class="boxt_p">

       пл.

       </div>

       <div class="boxt_p1">

      {if $grid_items.square_all ne

                                                           ''}{$grid_items.square_all}{else}-{/if} / {if

                                                           $grid_items.square_live ne

                                                           ''}{$grid_items.square_live}{else}-{/if} / {if

                                                           $grid_items.square_kitchen ne

                                                           ''}{$grid_items.square_kitchen}{else}-{/if}

      </div>

    </div>

    <div class="boxt_4">

   {$grid_items.text|strip_tags|truncate:200}

    </div>

</div>

{/section}

 

 

Ну вот и все . Пользуемся на здоровье.

P.S. перед тем как изменять что-то на своем сайте ОБЯЗАТЕЛЬНО ДЕЛАЙТЕ КОПИЮ!!!

Р.s/s/s/s/s Изменения писались под чистую систему (считается та система которая только-что установлена). Но если вы не делали координальных изменений то можете смело заливать.

 

Если Вам интересны мои уроки то пишите отзывы

 

Вы можете написать сами или просто заменить файл который находиться ниже.

 

Сегодня я расскажу как поменять внешний вид (отображение блоками). Урок достаточно простой.

Для начала мы продумаем как мы хотим видеть наш блок.

1.Создаем разметочную область, сам блок. Задаем высоту, ширину, прижимаем влево.

.boxt{

width: 212px;

height: 350px;

margin: 40px auto;

float: left;

margin-left: 15px;

position: relative;

}

2 Добавляем обводку блока для изображения

border: 1px solid rgba(39, 33, 33, 0.27);

 

3 Создаем 3 блока с датой, id и тип квартиры

.boxt_data {

width: 45px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_id {

width: 45px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_tip {

width: 102px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

4. Добавляем блок изображения

.boxt_image {

width: 200px;

height: 150px;

margin: 0px auto;

float: left;

margin-left: 5px;

border: 1px solid rgba(39, 33, 33, 0.27);

position: relative;

}

5. Создаем 4 разметочные области для блоков

.boxt_1 {

width: 200px;

height: 155px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_2 {

width: 210px;

height: 30px;

margin: 0px auto;

float: left;

margin-left: px;

position: relative;

}

.boxt_3 {

width: 210px;

height: 30px;

margin: 0px auto;

float: left;

margin-left: px;

position: relative;

}

.boxt_4 {

width: 200px;

height: 60px;

margin: 0px auto;

float: left;

margin-left: 5px;

margin-top: -5px;

position: relative;

border: 1px solid rgba(39, 33, 33, 0.27);

}

6.В каждой из разделочных областей мы создадим индивидуальные блоки с нужной нам информацией. Я взял такие как город, улица, площадь и описание.

.boxt_g {

width: 45px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_g1 {

width: 152px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_u {

width: 202px;

height: 20px;

margin: 0px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_p {

width: 45px;

height: 20px;

margin: 0px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_p1 {

width: 152px;

height: 20px;

margin: 0px auto;

float: left;

margin-left: 5px;

position: relative;

}

7.  добавим еще 2 блока ( 1 с ценой – 2 с избранным) так же создадим для них разделочную область. Поместим данный блок в блок с изображением.

.boxt_ipr {

width: 210px;

height: 30px;

margin: -32px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_i {

text-align: center;

width: 25px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

.boxt_pr {

text-align: center;

width: 157px;

height: 20px;

margin: 5px auto;

float: left;

margin-left: 5px;

position: relative;

}

8.Теперь приступим ко второму этапу и по-моему мнению самому важному. Мы будем украшать наши блоки, напишем для них стили.

 8.1. блоку .boxt_data, .boxt_id, .boxt_tip мы зададим цвет фона, цвет текста, и зададим положение текста по центру.

background:#5599E4;

color:white;

text-align: center;

8.2 аналогично действие мы выполним с другими блоками

9. Теперь для блока boxt_pr добавим размер и цвет текста

color: #EBE6E8;

font-size: 20px;

10. Приступаем помещаем основные функции в созданные нами блоки

{section name=i loop=$grid_items}

 <div class="boxt">

    <div class="boxt_data">

    {$grid_items.date}

    </div>

    <div class="boxt_id">

    ID {$grid_items.id}

    </div>

    <div class="boxt_tip">

    {$grid_items.type_sh}

    </div>

  

     {if $grid_items.img != '' }

      <div class="boxt_image">

      <a

                                               href="{if $grid_items.url!=''}{$grid_items.url}{else}{$grid_items.href}{/if}"

                                               title="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}">

                                               <img src="{$estate_folder}/img/data/{$grid_items.img[0].preview}"

                                               alt="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}"

                                               width="110" />

              </a>

           <div class="boxt_ipr">

              <div class="boxt_i">

                {if isset($smarty.session.favorites)} {if

                                   in_array($grid_items.id,$smarty.session.favorites)} <a

                                               class="remove_from_favorites" alt="{$grid_items.id}"

                                               title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a>

                                   {else} <a class="add_to_favorites" alt="{$grid_items.id}"

                                               title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if}

                                   {/if}

              </div>

              <div class="boxt_pr">

                {$grid_items.price|number_format:0:",":""}

              </div>

           </div>

   </div>

   {else}

   <div class="boxt_image">

      <a

                                               href="{if $grid_items.url!=''}{$grid_items.url}{else}{$grid_items.href}{/if}"

                                               title="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}">

                                               <img src="{$estate_folder}/img/no_foto.png"

                                               alt="{$grid_items.city}/{$grid_items.district}/{$grid_items.street}"

                                               width="110" />

             </a>

           <div class="boxt_ipr">

              <div class="boxt_i">

              {if isset($smarty.session.favorites)} {if

                                   in_array($grid_items.id,$smarty.session.favorites)} <a

                                               class="remove_from_favorites" alt="{$grid_items.id}"

                                               title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a>

                                   {else} <a class="add_to_favorites" alt="{$grid_items.id}"

                                               title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if}

                                   {/if}

              </div>

              <div class="boxt_pr">

             {$grid_items.price|number_format:0:",":""}

             </div>

           </div>

   </div>

   {/if}

    <div class="boxt_1">

       <div class="boxt_g">

       г.

       </div>

       <div class="boxt_g1">

      {if

         $grid_items.city ne ''} {$grid_items.city} {/if}

      </div>

    </div>

    <div class="boxt_2">

       <div class="boxt_u">

        {if $grid_items.street ne ''} {$grid_items.street}

        {if $grid_items.number ne ''}, {$grid_items.number}{/if}

                        {else}

        {if $grid_items.street ne ''} {$grid_items.street}

        {if $grid_items.number ne ''}, {$grid_items.number}

         {/if}

          {/if}{/if}

      </div>

    </div>

    <div class="boxt_3">

       <div class="boxt_p">

       пл.

       </div>

       <div class="boxt_p1">

      {if $grid_items.square_all ne

                                                           ''}{$grid_items.square_all}{else}-{/if} / {if

                                                           $grid_items.square_live ne

                                                           ''}{$grid_items.square_live}{else}-{/if} / {if

                                                           $grid_items.square_kitchen ne

                                                           ''}{$grid_items.square_kitchen}{else}-{/if}

      </div>

    </div>

    <div class="boxt_4">

   {$grid_items.text|strip_tags|truncate:200}

    </div>

</div>

{/section}

 

 

Ну вот и все . Пользуемся на здоровье.

P.S. перед тем как изменять что-то на своем сайте ОБЯЗАТЕЛЬНО ДЕЛАЙТЕ КОПИЮ!!!

Р.s/s/s/s/s Изменения писались под чистую систему (считается та система которая только-что установлена). Но если вы не делали координальных изменений то можете смело заливать.

 

Если Вам интересны мои уроки то пишите отзывы

 

Вы можете написать сами или просто заменить файл который находиться ниже.

Добрый день!

Делал все как http://www.sitebill.ru/news47.html  но результата никакого не получил.

Можно ли сделать главную такую, как http://estate.sitebill.ru/  ?

Сайт http://sdamprodam.etownpro.ru/

С уважением, Владимир.

[TopRaN 235]

можно в настройках ( в админке) переключите тип списка объявлений с "list" на "thumbs"