Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #20441

    Hello

    I’m trying to find the best way to have the FR/EN images in my header for a bilingual website . I was wondering what is the best way do you suggest me to have 2 images with links to the specific website in the header .

    Thanks

    #107642

    Maybe i’m not clear in my question . I just want to add 2 language flag in the header ( Top right underneath the social icons ) for a bilingual website .

    #107643

    Hi

    I would say add a new div class right before the logo and navigation menu is called in the header.php. Right after:

    <div class='container'>

    Then style its position with a bit of css.

    Maybe something like:

    <div class='container'>
    <!-- my custom flag code-->
    <div class="flags-holder">
    <a href="http://yourlink.com><img src="http://yoursite.com/yourimagelink.png"></a>
    <a href="http://yourlink.com><img src="http://yoursite.com/yourimagelink.png"></a>
    </div>

    Just make sure the url to your image is correct and the size you want.

    Regards,

    Devin

    #107644

    Thanks for the help Devin but it don’t work .

    I added this code as a test just after <div class=’container’> in header .php and nothing happen .

    <div class="flags-holder">
    <a href="http://designabsolu.com/><img src="http://designabsolu.com/wp-content/uploads/2013/01/facebook.png"></a>
    <a href="http://designabsolu.com/en><img src="http://designabsolu.com/wp-content/uploads/2013/01/facebook.png"></a>
    </div>

    Images are just for the test

    Thanks a million.

    #107645

    If you have any kind of cache plugin running, disable it. Additionally, you should still see the flags-holder class inserted in as well as the images though they will still need to be styled to get them into position.

    If you have a link to the site we can take a look and see whats going on but the area in the header.php is where you want to add the html.

    #107646

    http://designabsolu.com/ is the website address . Thanks again for your help .

    #107647

    I will keep it unlocked so you can see it . As it’s under construction for now

    Many thanks !!

    #107648

    I think you pasted the code incorrectly somehow. Its showing up like this in your source:

    <div class="flags-holder">
    <a href="http://designabsolu.com/ <img src="></a>
    <a><img /></a>
    </div>

    It should be:

    <div class="flags-holder">
    <a href="http://designabsolu.com> <img src="http://designabsolu.com/wp-content/uploads/2013/01/facebook.png"></a>
    <a href="http://designabsolu.com/en> <img src="http://designabsolu.com/wp-content/uploads/2013/01/facebook.png"></a>
    </div>

    Make sure, that when you pasted into the header.php file, you aren’t accidentally pasting any other characters. It should be plain text.

    Regards,

    Devin

    #107649

    Thanks for your time Devin .The code is pasted exactly like that in the header.php ` <div class=”flags-holder”>

    <a href=”http://designabsolu.com <img src=”http://designabsolu.com/wp-content/uploads/2013/01/facebook.png”></a>

    <a href=”http://designabsolu.com/en <img src=”http://designabsolu.com/wp-content/uploads/2013/01/facebook.png”></a>

    </div> `

    Maybe i did something wrong in my quick css

    Here is what is in my quick css . also maybe you can help me clean it up :)

    Thanks

    .seperator-addon {
    width: 0%;
    }
    #top #slideshow_big .slideshow_container .slideshow{
    border-bottom-width: 0px;
    border-bottom-style: solid;
    }
    #top .template-dynamic .callout {
    padding: 10px 0 0;
    }
    .dynamic-column-title{
    font-family:"Open Sans", sans-serif;
    }
    .flex_column h1{
    font-family:"Open Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 0 0;
    }
    .callout h1, h2, h3, h5, h1 a, h2 a, h3 a, h5 a{
    font-family:"Open Sans", sans-serif;
    }
    #top .widgettitle {
    font-family:"Open Sans", sans-serif;
    }
    .dynamic_element.title_container h1{
    font-size: 16px;
    font-weight: normal;
    padding-bottom:20px;
    }
    #footer{
    background-color: transparent;
    color: transparent;
    }
    .template-dynamic-accueil .flex_column_1{
    height: 97px;
    }
    .template-dynamic-accueil .flex_column_2{
    height: 97px;
    }
    .title_container .page-subtitle, #top .dynamic_el_1 .page-subtitle {
    font-family:"Open Sans", sans-serif;
    font-style: Normal;
    }
    .title_container, #top .dynamic_el_1 .title_container {
    height: 43px;
    padding-top:15px;
    }
    .sidebar .widget.widget_text{
    padding-bottom:10px;
    }
    p .dynamic_textarea_p .dynamic_element .dynamic_el_2 p{
    font-family:"Open Sans", sans-serif;
    font-style: Normal;
    font-size: 10px;
    }
    .content_slider h3{
    font-size: 16px;
    }
    .template-dynamic-services-dynamic p{
    margin-bottom: 0px;
    }

    #107650

    Here is a screenshot off my Dreamweaver

    #107651

    I missed a > . I’ve updated the code above but it should be:

    <div class="flags-holder">
    <a href="http://designabsolu.com> <img src="http://designabsolu.com/wp-content/uploads/2013/01/facebook.png"></a>
    <a href="http://designabsolu.com/en> <img src="http://designabsolu.com/wp-content/uploads/2013/01/facebook.png"></a>
    </div>

    IE:

    <a href="#"><img src="#"></a>

    If you are using dreamweaver, you can always just use it to create code yourself. Insert>image then click on that image and add your url to the properties panel where it shows the Link field.

    Regards,

    Devin

    #107652

    Thanks Devin !

    It works but now i have a problem i tried this code css style <div class=”flags-holder” style=”float:right;”> to set the images to the right But now the menu move a little bit to the left .What i can do to put the menu where it was ?

    Thanks again for your help !

    Regards!

    #107653

    I tried this code in the quick css in place of the other one . it work as you can see on my website but only in 1920×1080 otherwise it change the position can you help me on that . Thanks

    .flags-holder{
    float: right !important;
    margin-right: 25.5%;
    width: 930px;
    height: 20px;
    position: relative;
    top:2px;
    z-index: 100;
    }

    #107654

    My last try is with text and i put this code in header.php

    <div class='container_wrap' id='header'>
    <div class="flags-holder" align="right" style="position:relative">
    <p><a href="http://designabsolu.com">FR</a> /
    <a href="http://designabsolu.com/en">EN</a><p/>
    </div>

    and this code in the quick css but it’s changing position depending on the screen resolution . Mine is 1920×1080 and it look good .

    .flags-holder{
    float: right !important;
    margin-right: 25.5%;
    margin-left: 74.5%;
    font-size: 11px;
    width: 98%;
    height: 20px;
    position: relative;
    top:2px;
    z-index: 100;
    }

    Thanks again!

    #107655

    Hi,

    Please refresh your understanding of html/css . Also this is not good:

    <div class="flags-holder" align="right" style="position:relative">

    Instead try something like

    <div class='container_wrap' id='header'>
    <div class="flags-holder">
    <div class="flag-fr"><a href="http://designabsolu.com">FR</a></div>
    <div class="flag-en"><a href="http://designabsolu.com/en">EN</a></div>
    </div>

    css

    #top .flags-holder{
    float: right !important;
    margin-right: 25.5%;
    margin-left: 74.5%;
    font-size: 11px;
    width: 98%;
    height: 20px;
    position: relative;
    top:2px;
    z-index: 100;
    }

    You need to use google developer tools to tweak the css in the chrome browser. Otherwise you will be going in circles. Once you add the code, please provide a url to the page.

    Thanks,

    Nick

    #107656

    Thanks Nick .

    I will ;)

    I changed all the codes for those you gave me but nothing show in the page = http://designabsolu.com/

    Thanks for your help !

    #107657

    I would like to have the 2 links just under the rss icon.

    Many thanks !!

    #107658

    Hi,

    This css will do it. I just dunno where you want them so i stuffed them in top part

    #top .flags-holder {
    float: right !important;
    font-size: 11px;
    width: 98%;
    height: 20px;
    position: relative;
    bottom: 45px;
    right: -60%;
    z-index: 100;
    }

    Thanks,

    Nick

    #107659

    Hi Nick .Thanks for your time it’s really appreciated . But it doesn’t work . I tried to take a look at it with the Google developer tools but can’t figure out how to place it .

    I hope you can help me on that . I would like to have it at the same place of this address ( http://designabsolu.com/en/ ) Viewed in this screen resolution 1920×1080 or it’s not at the good place .

    Sorry for my lack of experience in css and html .

    Thanks a million !

    #107660

    Hi,

    at my browser size 1360 laptop, it’s there http://www.clipular.com/c?2192273=XpJSzAwwXuvG9n_BieEgNvqmfB0 … where are you trying to position it?

    Also you replaced your old code which is not valid align right on a div? if you are looking to put images on them you need to add the img code to the css

    And you should practice for 1 hour with google tools. I also use dreamweaver since 1999, but without dev tools you can’t effectively do css in dreamweaver. Here is a video i made for you https://docs.google.com/file/d/0B8hqGBMSfHtKaGtRZnhwWkt4QTg/edit?usp=sharing

    Thanks,

    Nick

    #107661

    WOW thanks for the video Nick ! . Awesome !!!I would like to have it just under the rss icon on the corner . I’ll try to work on that . No i did not replace the old code the link was the ENGLISH website . In the original page FR = http://designabsolu.com/ it’s the code you give me. I’m trying . I have replace it but when it’s only in good place on 1920×1080 otherwise it’s not at the good place .

    Screen shot of what i see in 1920×1080

    here is the code i put in the quick css .

    #top .flags-holder {
    float: right !important;
    margin-right:12%;
    font-size: 11px;
    height: 20px;
    position: relative;
    Top: 8px;
    left: -260px;
    z-index: 100;
    }

    And the code in the header.php

    <div class='container_wrap' id='header'>
    <div class="flags-holder">
    <p><a href="http://designabsolu.com">FR</a> /
    <a href="http://designabsolu.com/en">EN</a></p>
    </div>

    Thanks again for your time !!

    #107662

    Hello Nick your video really helped me with the Google chrome tool .Thanks a million for this tutorial ! But i can’t fix the position of the div for every screen resolution :( I tried everything but nothing works .

    See http://designabsolu.com/

    Also here i tried a other code with an additional div but it only work on 1920×1080 . http://designabsolu.com/en

    What did i do wrong ?

    Thanks

    #107663

    I found it . I changed the code in the html for

    <div class='container_wrap' id='header'>

    <div class='container'>
    <div class="flags-holder">
    <div class="flag">
    <p><a href="http://designabsolu.com">FR</a> /
    <a href="http://designabsolu.com/en">EN</a></div></p>
    </div>

    and the one in the quick css for

    #top .flags-holder {
    float: right !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    height: 20px;
    position: relative;
    padding: 0;
    left: 95.5%;
    z-index: 100;
    }
    #header .container{
    z-index: 99;
    padding-top: 2px;
    }
    .flag {
    height: 20px;
    float: right !important;
    overflow: hidden;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    right: 0;
    top: -1px;
    }

    Every thing works now even if i change the resolution . I would like to says a big thanks to Devin and Nick for the help . It’s really appreciated . The video you made is just awesome . Many Many thanks .

    #107664

    Glad we could help :)

    Let us know if you have any other questions or issues.

    Regards,

    Devin

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

The topic ‘Header – Language Flags’ is closed to new replies.