Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #210966

    Dear support,

    I have a necessity to make multiple languages at my website template. I already created Language bar, consist of 3 buttons, working well, but problem to place it right after Navigation, just next to the Contact menu. I am able to place it on the right side on the next row, but this causing that additional appears which look good, but I want the standard look of the template. Is it possible to extend Menu bar a little? I am not very strong in CSS and I don’t where to add change.

    My style.css looks like this: (I posted only part from header, navigation and my custom code)
    /*navigation*/
    #top #nav{
    height:30px;
    line-height:30px;
    padding-left:13px;
    right:5px;
    position:absolute;
    z-index:100;
    }

    #nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:50px;
    z-index:5;
    }

    #top #nav a{
    height:30px;
    line-height:30px;
    display:block;
    padding:0 21px;
    text-decoration:none;
    text-align:center;
    outline:none;
    z-index:35;
    position:relative;
    float:left;
    }

    #top #nav li{
    float:left;
    position:relative;
    z-index:20;
    }

    #top #nav li li{
    border-left:none;
    margin-top:0;
    border-top:1px solid;
    }

    #top #nav ul {
    display:none;
    left:0;
    position:absolute;
    top:29px;
    width:192px;
    border-width:1px;
    border-style: solid;
    border-bottom: none;
    }

    #top #nav li ul a{
    width:150px;
    height:auto;
    float:left;
    text-align:left;
    border-bottom-width:1px;
    border-bottom-style: solid;
    line-height:24px;
    padding:4px 21px;
    font-size: 12px;
    }

    #top #nav ul ul{
    top:auto;
    }

    #top #nav li ul ul {
    left:192px;
    top:-2px;
    }

    #top #nav li:hover ul ul, #top #nav li:hover ul ul ul,#top #nav li:hover ul ul ul ul{
    display:none;
    }
    #top #nav li:hover ul, #top #nav li li:hover ul, #top #nav li li li:hover ul, #top #nav li li li li:hover ul{
    display:block;
    }

    /*background pointer*/
    /* Represents the background of the highlighted menu-item. */
    #top #nav li.back {
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
    top:20px !important;
    top:39px; /*ie6fix*/
    }
    #top #nav li.back .left {
    height: 30px;
    margin-right: 9px;
    }

    /* Languages */

    #nav_lang {
    width:450px;
    float:right;
    margin:10px 0 10px 60px;
    padding:0 0 0 100px;
    }

    #nav_lang li {
    margin:0 15px 0 0;
    float:left;
    }

    #nav_lang li a {
    display: block;
    }

    #nav_lang a:hover {
    visibility:visible;
    }

    /* English */

    #nav_en {
    width:35px;
    height:35px;
    background: transparent url(‘../images/United-Kingdom.png’) no-repeat bottom right;
    overflow: hidden;

    }

    #nav_en a:hover img {
    visibility:hidden;
    }

    /* Russian */

    #nav_ru {
    width:35px;
    height:35px;
    background: transparent url(‘../images/Russia.png’) no-repeat bottom right;
    overflow: hidden;
    }

    #nav_ru a:hover img {
    visibility:hidden;
    }

    /* Czech */

    #nav_cz {
    width:35px;
    height:35px;
    background: transparent url(‘../images/Czech-Republic.png’) no-repeat bottom right;
    overflow: hidden;
    }

    #nav_cz a:hover img {
    visibility:hidden;
    }

    In any html file of template I add some code like:
    <!–end head–>
    </div>

    <!– end center–>
    </div>

    <div id=”nav_lang”>

      <li id=”nav_en”>English
      <li id=”nav_ru”>Russian
      <li id=”nav_cz”>Czech

    </div>

    <!–end wrapper–>
    </div>

    If I will place it in navigation part (<ul id=”nav”>) my panel look bad, So if I place it after the “center” it looks where I wanted, but on the next row and I want just after Contact button.

    Let me know if you need more information. My site is not ready for hosting, but I can send a screenshots to show my problem. let me know address where to send and I will send.

    Thanks in advance,
    reist.

    #211042

    Hi reist!

    We need to see the actual website. Please post it here.

    Best regards,
    Ismael

    #211430

    Hi Ismael,
    Thanks for quick reply. I hosted site temporary, take a look: http://www.technoserv.eu

    As you will see – language bar currently only on the “home page”. buttons are OK, I only need to lift it up, just next to the “Contact” button, otherwise it make a blank row between picture and Logo, which doesn’t look good to me.

    Let me know if you need more details about problem.

    Reist

    #211436

    Hey!

    Put the language bar inside the inner div (.center):

    Then apply this code to the Quick CSS:

    #nav_lang {
        position: absolute;
        top: 12px;
        right: -125px;
        width: auto !important;
    }

    Best regards,
    Josue

    #211441

    WOW!!! This is exactly what I needed and exactly where! Great and proficient job guys!!! Well done! Many thanks!!!

    Have a great weekend!

    reist

    #211442

    You are welcome, glad we could help :)

    Regards,
    Josue

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.