Jdi na obsah Jdi na menu

Druhý sloupec

(Pro novou verzi eStránek)

Podle tohoto návodu si můžete udělat druhý postranní sloupec na opačné straně, než máte ve vaši šabloně. Prosím, pokud si chcete i rozšířit stránku, tak ji nejdříve rozšiřte.

 

Kompatibilita

Současná verze eStránek:
 NE - Jiná struktura CSS a XHTML šablon.
Nová verze eStránek:  ANO  

Testováno 7. listopadu 2009

 

Šablona D

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS).

2. Najděte si tam toto:

#content{width:555px;overflow:hidden;line-height:160%;float:right;}

555px - Změňte na 350px. Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.

3. Úplně na konec vložte toto:

.levy {float:left;width:555px;}
.pravy {float:right;width:200px;}

555px - Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.

4. Otevřete si XHTML (Nastavení - Vzhled - Design - Upravit XHTML).

5. V Hlavní šabloně najděte toto:

                <div id="body">

                    <div id="nav-column">

                        <div class="column">
                            <div class="inner-column inner_frame">
                                <!--/ u_m_portrait /-->
                                <!--/ u_m_languages /-->
                           </div>
                        </div>

                        <!--/ u_m_menu /-->
                        <!--\ adv_sqr \-->

                        <div id="clear2" class="clear">
                            &nbsp;
                        </div>
                        <hr />

                        <!-- Side column left/right -->
                        <div class="column">

                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_photos /-->
                              <!--/ u_m_lastphoto /-->
                              <!--/ u_m_contact /-->
                              <!--\ adv_mess \-->
                              <!--/ u_m_code /-->
                              <!--/ u_m_maillist /-->
                              <!--/ u_m_links /-->
                              <!--/ u_m_search /-->
                              <!--/ u_m_archive /-->
                              <!--/ u_m_rss /-->
                              <!--/ u_m_stats /-->
                            </div>
                            <!-- /Inner column -->

                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>

                        </div>
                        <!-- end of first column -->
                    </div>

                    <!-- main page content -->
                    <div id="content">
                      <!--/ u_m_breadcrumbs /-->
                      <!--/ u_content /-->  
                    </div>
                    <!-- /main page content -->
                    
                    <div id="clear3" class="clear">
                        &nbsp;
                    </div>
                    <hr />

                    <div id="decoration1" class="decoration">
                    </div>
                    <div id="decoration2" class="decoration">
                    </div>
                    <!-- /Meant for additional graphics inside the body of the page -->
                </div>

6. Změňte na:

                <div id="body">
                    <div class="levy">
                    <div id="nav-column">
                        <div class="column">
                            <div class="inner-column inner_frame">
                                <!--/ u_m_portrait /-->
                                <!--/ u_m_languages /-->

                           </div>
                        </div>
                        <!--/ u_m_menu /-->
                        <!--\ adv_sqr \-->

                        <div id="clear2" class="clear">
                            &nbsp;
                        </div>
                        <hr />
                        <!-- Side column left/right -->
                        <div class="column">
                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_photos /-->
                              <!--/ u_m_lastphoto /-->
                              <!--/ u_m_contact /-->
                              <!--\ adv_mess \-->

                            </div>
                            <!-- /Inner column -->
                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>
                        </div>
                        <!-- end of first column -->
                    </div>
                    <!-- main page content -->
                    <div id="content">
                      <!--/ u_m_breadcrumbs /-->
                      <!--/ u_content /-->  
                    </div>
                    <!-- /main page content -->
                    <div id="clear3" class="clear">
                        &nbsp;
                    </div>
                    <hr />
                    <div id="decoration1" class="decoration">
                    </div>
                    <div id="decoration2" class="decoration">
                    </div>
                    <!-- /Meant for additional graphics inside the body of the page -->
                </div>
                <div class="pravy">
                <div class="column">
                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_code /-->
                              <!--/ u_m_maillist /-->
                              <!--/ u_m_links /-->
                              <!--/ u_m_search /-->
                              <!--/ u_m_archive /-->
                              <!--/ u_m_rss /-->
                              <!--/ u_m_stats /-->

                            </div>
                            <!-- /Inner column -->
                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>
                        </div>
                        </div>
                </div>

modře - Obsah levého sloupce, můžete si tam dát, co chcete.

červeně - Obsah pravého sloupce.

7. Uložte a máte hotovo.

 

Šablona H

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS).

2. Najděte si tam toto:

#content {
    width: 570px;
    float: left;
    margin-left:5px;
}

570px - Změňte na 385px. Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.

3. Úplně na konec vložte toto:

#levy {float:left;width:180px;}
#pravy {float:right;width:590px;}

590px - Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.

4. Otevřete si XHTML (Nastavení - Vzhled - Design - Upravit XHTML).

5. V Hlavní šabloně najděte toto:

                <hr />

                        <!-- Side column left/right -->
                        <div class="column">

                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_portrait /-->
                              <!--/ u_m_languages /-->
                              <!--\ adv_sqr \-->
                              <!--/ u_m_photos /-->
                              <!--/ u_m_lastphoto /-->
                              <!--/ u_m_contact /-->
                              <!--\ adv_mess \-->
                              <!--/ u_m_code /-->
                              <!--/ u_m_maillist /-->
                              <!--/ u_m_links /-->
                              <!--/ u_m_search /-->
                              <!--/ u_m_archive /-->
                              <!--/ u_m_rss /-->
                              <!--/ u_m_stats /-->
                            </div>
                            <!-- /Inner column -->

                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>

                        </div>
                        <!-- konci first column -->
                    </div>

                    <!-- main page content -->
                    <div id="content">
                      <!--/ u_m_breadcrumbs /-->
                      <!--/ u_content /-->
                    </div>
                    <!-- /main page content -->
                    
                    <div id="clear3" class="clear">
                        &nbsp;
                    </div>
                    <hr />
                    
                    <div id="decoration1" class="decoration">
                    </div>
                    <div id="decoration2" class="decoration">
                    </div>
                    <!-- /Meant for additional graphics inside the body of the page -->
                </div>

6. Změňte na:

                <hr />
                <div id="pravy">
                <div id="nav-column">

                        <!-- Side column left/right -->
                        <div class="column">

                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_portrait /-->
                              <!--/ u_m_languages /-->
                              <!--\ adv_sqr \-->
                              <!--/ u_m_photos /-->
                              <!--/ u_m_lastphoto /-->
                              <!--/ u_m_contact /-->
                              <!--\ adv_mess \-->

                            </div>
                            <!-- /Inner column -->

                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>

                        </div>
                        <!-- konci first column -->
                    </div>

                    <!-- main page content -->
                    <div id="content">
                      <!--/ u_m_breadcrumbs /-->
                      <!--/ u_content /-->
                    </div>
                    <!-- /main page content -->
                    
                    <div id="clear3" class="clear">
                        &nbsp;
                    </div>
                    <hr />
                    
                    <div id="decoration1" class="decoration">
                    </div>
                    <div id="decoration2" class="decoration">
                    </div>
                    <!-- /Meant for additional graphics inside the body of the page -->
                </div>
                <div id="levy">
                   <div id="nav-column">

                        <!-- Side column left/right -->
                        <div class="column">

                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_code /-->
                              <!--/ u_m_maillist /-->
                              <!--/ u_m_links /-->
                              <!--/ u_m_search /-->
                              <!--/ u_m_archive /-->
                              <!--/ u_m_rss /-->
                              <!--/ u_m_stats /-->

                            </div>
                            <!-- /Inner column -->

                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>

                        </div>
                        <!-- konci first column -->
                    </div>
                 </div>

modře - Obsah levého sloupce, můžete si tam dát, co chcete.

červeně - Obsah pravého sloupce.

7. Uložte a máte hotovo.

 

Šablona J

1. Otevřete si CSS (Nastavení - Vzhled - Design - Upravit CSS).

2. Najděte si tam toto:

#content { background: white; float: right; display: inline; width: 484px; overflow: hidden; margin: 0 20px 0 0; }

484px - Změňte na 208px. Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.

3. Úplně na konec vložte toto:

.levy {float:left;width:509px;}
.pravy {float:right;width:200px;}

509px - Pokud jste si rozšířili stránku, tak to ještě zvětšte o tolik, o kolik jste si ji rozšířili.

4. Otevřete si XHTML (Nastavení - Vzhled - Design - Upravit XHTML).

5. V Hlavní šabloně najděte toto:

                <div id="body">

                    <div id="nav-column">
                      <!--/ u_m_menu /-->
                        
                        <div id="clear2" class="clear">
                            &nbsp;
                        </div>
                        <hr />

                        <!-- Side column left/right -->
                        <div class="column">

                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_portrait /-->
                              <!--/ u_m_languages /-->
                              <!--\ adv_sqr \-->
                              <!--/ u_m_photos /-->
                              <!--/ u_m_lastphoto /-->
                              <!--/ u_m_contact /-->
                              <!--\ adv_mess \-->
                              <!--/ u_m_code /-->
                              <!--/ u_m_maillist /-->
                              <!--/ u_m_links /-->
                              <!--/ u_m_search /-->
                              <!--/ u_m_archive /-->
                              <!--/ u_m_rss /-->
                              <!--/ u_m_stats /-->
                            </div>
                            <!-- /Inner column -->

                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>

                        </div>
                        <!-- konci first column -->
                    </div>

                    <!-- main page content -->
                    <div id="content">
                      <!--/ u_m_breadcrumbs /-->
                      <!--/ u_content /-->



                      <div id="decoration1" class="decoration">
                      </div>
                      <div id="decoration2" class="decoration">
                      </div>
                      <!-- /Meant for additional graphics inside the body of the page -->
                    </div>
                    
                    
                    <!-- /main page content -->

                    <div id="clear3" class="clear">
                        &nbsp;
                    </div>

                    <hr />

                </div>

6. Změňte na:

                <div id="body">
                    <div id="nav-column">
                      <!--/ u_m_menu /-->
                        <div id="clear2" class="clear">
                            &nbsp;
                        </div>
                        <hr />
                       </div>
                   <div class="levy">
                    <div id="nav-column">
                        <!-- Side column left/right -->
                        <div class="column">
                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--/ u_m_portrait /-->
                              <!--/ u_m_languages /-->
                              <!--\ adv_sqr \-->
                              <!--/ u_m_photos /-->
                              <!--/ u_m_lastphoto /-->
                              <!--/ u_m_contact /-->

                            </div>
                            <!-- /Inner column -->
                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>
                        </div>
                        <!-- konci first column -->
                    </div>
                    <!-- main page content -->
                    <div id="content">
                      <!--/ u_m_breadcrumbs /-->
                      <!--/ u_content /-->
                      <div id="decoration1" class="decoration">
                      </div>
                      <div id="decoration2" class="decoration">
                      </div>
                      <!-- /Meant for additional graphics inside the body of the page -->
                    </div>
                    <!-- /main page content -->
                    <div id="clear3" class="clear">
                        &nbsp;
                    </div>
                    <hr />
                   </div>
                   <div id="pravy">
                   <div class="column">
                            <!-- Inner column -->
                            <div class="inner_frame inner-column">
                              <!--\ adv_mess \-->
                              <!--/ u_m_code /-->
                              <!--/ u_m_maillist /-->
                              <!--/ u_m_links /-->
                              <!--/ u_m_search /-->
                              <!--/ u_m_archive /-->
                              <!--/ u_m_rss /-->
                              <!--/ u_m_stats /-->

                            </div>
                            <!-- /Inner column -->
                            <div id="clear4" class="clear">
                                &nbsp;
                            </div>
                          </div>
                     </div>
                </div>

modře - Obsah levého sloupce, můžete si tam dát, co chcete.

červeně - Obsah pravého sloupce.

7. Uložte a máte hotovo.

 

Komentáře

Přidat komentář

Přehled komentářů

kangarko - kangarko

3. 11. 2011 17:41

ahoj aj ja mam stranku o radach a je aktualizovana 11.2011 :http://www.hacky-na.estranky.cz/

Jarda - druhý sloupec

19. 10. 2010 9:01

Ahoj Tomáši, musím tě pochválit a poděkovat za moc užitečné informace na tvých stránkách. Chci se zeptat, jestli by nešel udělat návod na druhý sloupec pro šablonu "C" v nové verzi stránek???