FAQtoid

Allen · Jul-15-2012, 06:59 PM #1961

Quote:

Originally Posted by Lemur Lover

Al my friend, you've excelled yourself yet again

The Custom Header code worked a treat, also great to see that Thai characters can be used!

My wife's midway through translating all our pages, so it's probably best to wait until all that is done and we're ready to add the additional nav bar in Thai. Come that point I'll try out the CSS part you provided and may well get back to you again if I need any further assistance with the tweaking.

Although I'm not completely ready to roll with my blog, I have recently set up a Blogger account in preparation. With respect to that, I do have another question for you Al whenever you have the time:

Assuming this is in fact possible to do, do you happen to have a tutorial that gives instruction on how to import custom nav bars from SmugMug websites directly into Blogger accounts?

It's still relatively early days for me trying to figure out how to customise my Blogger account, and although I haven't yet found this myself, I've read things in forums that seem to suggest there are customisation fields for both HTML and CSS. Any help on this would, as always, be greatly appreciated.

Many thanks in advance and wishing you a excellent week ahead

See this thread.
http://www.dgrin.com/showthread.php?t=101262

Lemur Lover · Jul-15-2012, 11:50 PM #1962

Quote:

Originally Posted by Allen

See this thread.
http://www.dgrin.com/showthread.php?t=101262

Excellent stuff, thanks again Al

Lemur Lover · Jul-17-2012, 04:10 AM #1963

Quote:

Originally Posted by Allen

Add red in your header

Code:

...
...
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
</ul>
</div>  <!-- closes menu -->


<div class="menu Thai">
<ul>
   <li><a href="Link">บ้าน</a></li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a href="Link">Menu 2</a></li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a href="Link">Menu 3</a></li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a class="drop" href="#noclick" title="">เขา
       <!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul> 
           <li><a href="/gallery/21836637_dv9B3s" title="">The Photographer</a></li>
           <li><a href="/gallery/21836651_WSLKFZ" title="">The Photography</a></li>
       </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a href="Link">การติดต่อ</a></li>
</ul>
</div>

<div style="clear: both;"></div>
<!-- End Navbar Code -->

Add to CSS. Might need a little tweaking. Also where it's displayed needs to be set.

Code:

      /* style the outer div to give it width */
.Thai {
   display: none;
   z-index: 80;
   width:460px;     /* Main bar total width, minimize to center and not wrap to two lines*/
}

.category_Thai .Thai {display:block;}

Hi Al,

We're making good progress with the translations and I wanted to make a start on the Thai version of the nav bar, however, the red HTML code you provided, which initially seemed like it would be a piece of cake to complete, has seen me come a little unstuck I'm afraid.

Tried several different things to no avail, so wondering perhaps if you could look at the current HTML code I have in the Custom Header, which I'll paste for you complete below, then below that I'll paste the HTML I have translated into Thai that I'm trying to make a duplicate nav bar directly underneath the English version; I guess what I'm hoping for is instruction on an easy way to "stitch" them together, as it were.

Current menu bar in English:







<div class="menu">
<ul>

<li><a href="/" title="">Home</a></li>

<li class="navDot"> • </li>
<li><a class="drop" href="" title="">Photo Galleries
</a>

<ul class=”moveUL”>
<li><a class="drop" href="#noclick" title="">Birds
</a>

<ul>
<li><a href="/Birds/Birds-Thailand-1/17365494_kHCMWX">Thailand</a></li>
<li><a href="/Birds/Birds-Malaysia/17349215_PNnfHn">Malaysia</a></li>
<li><a href="/Birds/Birds-South-Africa/19024720_gTHSjZ">South Africa</a></li>
<li><a href="/Birds/Birds-Madagascar/19179777_cZ2G7W">Madagascar</a></li>
</ul> 
</li>
<li><a class="drop" href="#noclick" title="">Primates
</a>

<ul>
<li><a href="/Animals/Primates-Thailand-1/17364378_gWVWg5">Thailand</a></li>
<li><a href="/Animals/Primates-Malaysia/17349321_N3MBK8">Malaysia</a></li>
<li><a href="/Animals/Primates-Madagascar/19180260_Grsf39">Madagascar</a></li>
</ul> 
</li>
<li><a class="drop" href="#noclick" title="">Predators
</a>

<ul>
<li><a href="/Animals/Predators-Thailand/22266257_c8rNNq">Thailand</a></li>
<li><a href="/Animals/Predators-South-Africa/22266390_XWdPB4">South Africa</a></li>
</ul> 
</li>
<li><a href="/Animals/Bears/17379134_L5QjQt" title="">Bears & Tapir</a></li>
<li><a href="/Animals/Elephants/18369150_7FJPZz" title="">Elephants</a></li>
<li><a href="/Animals/Reptiles-1/17377609_ttjGfr" title="">Reptiles</a></li>
</ul> 
</li>

<li class="navDot"> • </li>
<li><a class="drop" href="#noclick" title="">Khao Kheow Open Zoo
</a>

<ul>
<li><a href="/Zoos/Khao-Kheow-Open-Zoo/21336429_MNHPTS" title="">Introduction</a></li>
<li><a href="/Zoos/Animal-Welfare/21705018_WMRPXW" title="">Animal Welfare</a></li>
<li><a href="/Zoos/Breeding-Programmes/21835844_sCD4Bg" title="">Breeding Programmes</a></li>
<li><a class="drop" href="#noclick" title="">Special Attractions
</a>

<ul>
<li><a href="/Zoos/es-ta-te/21731074_Vtb4K2">Es-ta-te Camping Resort</a></li>
<li><a href="/Zoos/Flight-of-the-Gibbon/21836618_7btJkD">Flight of the Gibbon</a></li>
</ul> 
</li>
<li><a href="/Zoos/Getting-to-Khao-Kheow/21836682_hMh6NB" title="">Getting to Khao Kheow</a></li>
</ul> 
</li>
<li class="navDot"> • </li>
<li><a class="drop" href="#link" title="">Infants & Young Animals
</a>

<ul>
<li><a href="/Zoos/Clouded-Leopard/21836309_gkTtTm">Clouded Leopard</a></li>
<li><a href="/Zoos/African-Lion/21836302_Fsp5fj">African Lion</a></li>
<li><a href="/Zoos/Siberian-Tiger/21836339_tSmSqb">Siberian Tiger</a></li>
<li><a href="/Zoos/Siamang/23913809_GrNdtt">Siamang</a></li>
<li><a href="/Zoos/White-Cheeked-Gibbon/21836353_WbWTS6">White-Cheeked Gibbon</a></li>
<li><a href="/Zoos/White-Handed-Gibbon/21836363_Sd4Xvg">White-Handed Gibbon</a></li>
<li><a href="/Zoos/Red-Shanked-Douc-Langur/21836322_SCQ48c">Red-Shanked Douc Langur</a></li>
<li><a href="/Zoos/Brown Capuchin/21836347_mC9cWW">Brown Capuchin</a></li>
<li><a href="/Zoos/Malayan-Tapir/21836329_7ppjVf">Malayan Tapir</a></li>

</ul> 
</li>
<li class="navDot"> • </li>
<li><a class="drop" href="#noclick" title="">About
</a>

<ul>
<li><a href="/Other/About-the-Photographer/21836637_dv9B3s" title="">The Photographer</a></li>
<li><a href="/Other/About-the-Photography/21836651_WSLKFZ" title="">The Photography</a></li>
</ul> 
</li>
<li class="navDot"> • </li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
</ul>
</div> 
<div style="clear: both;"></div>


Same menu bar translated into Thai:







<div class="menu">
<ul>

<li><a href="/" title="">บ้าน</a></li>

<li class="navDot"> • </li>
<li><a class="drop" href="" title="">แกลลอรี่
</a>

<ul class=”moveUL”>
<li><a class="drop" href="#noclick" title="">นก
</a>

<ul>
<li><a href="/Birds/Birds-Thailand-1/17365494_kHCMWX">เมืองไทย</a></li>
<li><a href="/Birds/Birds-Malaysia/17349215_PNnfHn">มาเลเชีย</a></li>
<li><a href="/Birds/Birds-South-Africa/19024720_gTHSjZ">อัฟริกาใต้</a></li>
<li><a href="/Birds/Birds-Madagascar/19179777_cZ2G7W">มาดากัสก้า</a></li>
</ul> 
</li>
<li><a class="drop" href="#noclick" title="">สัตว์เลี้ยงลูกด้วยนม
</a>

<ul>
<li><a href="/Animals/Primates-Thailand-1/17364378_gWVWg5">เมืองไทย</a></li>
<li><a href="/Animals/Primates-Malaysia/17349321_N3MBK8">มาเลเชีย</a></li>
<li><a href="/Animals/Primates-Madagascar/19180260_Grsf39">มาดากัสก้า</a></li>
</ul> 
</li>
<li><a class="drop" href="#noclick" title="">สัตว์กินเนื้อเป็นอาหาร
</a>

<ul>
<li><a href="/Animals/Predators-Thailand/22266257_c8rNNq">เมืองไทย</a></li>
<li><a href="/Animals/Predators-South-Africa/22266390_XWdPB4">อัฟริกาใต้</a></li>
</ul> 
</li>
<li><a href="/Animals/Bears/17379134_L5QjQt" title="">หมี และ สมเสร็จ</a></li>
<li><a href="/Animals/Elephants/18369150_7FJPZz" title="">ช้าง</a></li>
<li><a href="/Animals/Reptiles-1/17377609_ttjGfr" title="">สัตว์เลื้อยคลาน</a></li>
</ul> 
</li>

<li class="navDot"> • </li>
<li><a class="drop" href="#noclick" title="">สวนสัตว์เปิดเขาเขียว
</a>

<ul>
<li><a href="/ThaiTranslation/Introduction/24213838_FfKTKn" title="">บทแนะนำ</a></li>
<li><a href="/ThaiTranslation/Animal-Welfare/24197745_tKNtZh" title="">สวนสัตว์เปิดเขาเขียว</a></li>
<li><a href="ThaiTranslation/Breeding-Programmes/24214570_zjj6GG" title="">โครงการณ์แพร่พันธุ์</a></li>
<li><a class="drop" href="#noclick" title="">สถานที่น่าสนใจ
</a>

<ul>
<li><a href="/ThaiTranslation/es-ta-te-Camping-Resort/24214844_9fSsTs">เอสตาเต้แคมป์ปิ้งรีสอร์ท</a></li>
<li><a href="/ThaiTranslation/Flight-of-the-Gibbon/24214817_bh35PT">Flight of the Gibbon</a></li>
</ul> 
</li>
<li><a href="/ThaiTranslation/Getting-to-KKOZ/24214955_8fxVGW" title="">การเดินทางสู่เขาเขียว</a></li>
</ul> 
</li>
<li class="navDot"> • </li>
<li><a class="drop" href="#link" title="">สัตว์แรกเกิดและลูกสัตว์
</a>

<ul>
<li><a href="/ThaiTranslation/Clouded-Leopard/24172974_4jXCFG">เสือลายเมฆ</a></li>
<li><a href="/ThaiTranslation/African-Lion/24175332_SngHzR">สิงโตอัฟริกัน</a></li>
<li><a href="/ThaiTranslation/Siberian-Tiger/24177383_z3LFZj">เสือไซบีเรียน</a></li>
<li><a href="/ThaiTranslation/Siamang/24177349_nHTxhD">สยามมัง</a></li>
<li><a href="/ThaiTranslation/White-Cheeked-Gibbon/24177425_9t26s2">ชะนีแก้มขาว</a></li>
<li><a href="/ThaiTranslation/White-Handed-Gibbon/24177515_wRqPbm">ชะนีมือขาว</a></li>
<li><a href="/ThaiTranslation/Red-Shanked-Douc-Langur/24177314_6ncD3W">ค่างห้าสี</a></li>
<li><a href="/ThaiTranslation/Brown-Capuchin/24177229_GSk3GB">ลิงสีทอง</a></li>
<li><a href="/ThaiTranslation/Malayan-Tapir/24177272_8G4HSW">สมเสร็จมาเลเชีย</a></li>

</ul> 
</li>
<li class="navDot"> • </li>
<li><a class="drop" href="#noclick" title="">เกี่ยวกับ
</a>

<ul>
<li><a href="/ThaiTranslation/About-The-Photographer/24197335_2VqBbX" title="">ช่างภาพ</a></li>
<li><a href="/ThaiTranslation/About-the-Photography/24215207_NQggbD" title="">รูปภาพ</a></li>
</ul> 
</li>
<li class="navDot"> • </li>
<li><a href="/" onclick="return false;" class="customContactButton">ติดต่อ </a></li>
</ul>
</div> 
<div style="clear: both;"></div>


As always, thank you for your time with this Al!

Allen · Jul-17-2012, 06:02 AM #1964

Quote:

Originally Posted by Lemur Lover

Hi Al,

We're making good progress with the translations and I wanted to make a start on the Thai version of the nav bar, however, the red HTML code you provided, which initially seemed like it would be a piece of cake to complete, has seen me come a little unstuck I'm afraid.

Tried several different things to no avail, so wondering perhaps if you could look at the current HTML code I have in the Custom Header, which I'll paste for you complete below, then below that I'll paste the HTML I have translated into Thai that I'm trying to make a duplicate nav bar directly underneath the English version; I guess what I'm hoping for is instruction on an easy way to "stitch" them together, as it were.
...

As always, thank you for your time with this Al!

One thing I don't see is the additional class for the Thai navbar.

<div class="menu Thai">

I guess I'm not understanding what you're wanting. I just pasted in the html and it worked. Where do
you want this to display? I thought it would be just for a category named "Thai". Do you want this
for all pages showing both navs?
Here's a screen shot combining the two nav's into one. A snippet of the code with a few characters inserted.

Code:

<li><a href="/" title="">Home<br />บ้าน</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a class="drop" href="" title="">Photo Galleries<br />แกลลอรี่
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="”moveUL”">
        <li><a class="drop" href="#noclick" title="">Birds<br />นก
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Birds/Birds-Thailand-1/17365494_kHCMWX">Thailand • เมืองไทย</a></li>
                <li><a href="/Birds/Birds-Malaysia/17349215_PNnfHn">Malaysia • มาเลเชีย</a></li>   
                <li><a href="/Birds/Birds-South-Africa/19024720_gTHSjZ">South Africa</a></li>
                <li><a href="/Birds/Birds-Madagascar/19179777_cZ2G7W">Madagascar</a></li>  
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="#noclick" title="">Primates<br />สัตว์เลี้ยงลูกด้วยนม
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Animals/Primates-Thailand-1/17364378_gWVWg5">Thailand </a></li>
                <li><a href="/Animals/Primates-Malaysia/17349321_N3MBK8">Malaysia</a></li>   
                <li><a href="/Animals/Primates-Madagascar/19180260_Grsf39">Madagascar</a></li>  
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="#noclick" title="">Predators<br />สัตว์กินเนื้อเป็นอาหาร
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Animals/Predators-Thailand/22266257_c8rNNq">Thailand • เมืองไทย</a></li> 
                <li><a href="/Animals/Predators-South-Africa/22266390_XWdPB4">South Africa • อัฟริกาใต้</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

Lemur Lover · Jul-17-2012, 08:02 AM #1965

Quote:

Originally Posted by Allen

Add red in your header

Code:

...
...
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
</ul>
</div>  <!-- closes menu -->


<div class="menu Thai">
<ul>
   <li><a href="Link">บ้าน</a></li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a href="Link">Menu 2</a></li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a href="Link">Menu 3</a></li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a class="drop" href="#noclick" title="">เขา
       <!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul> 
           <li><a href="/gallery/21836637_dv9B3s" title="">The Photographer</a></li>
           <li><a href="/gallery/21836651_WSLKFZ" title="">The Photography</a></li>
       </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="navDot">&nbsp;•&nbsp;</li>
   <li><a href="Link">การติดต่อ</a></li>
</ul>
</div>

<div style="clear: both;"></div>
<!-- End Navbar Code -->

Add to CSS. Might need a little tweaking. Also where it's displayed needs to be set.

Code:

      /* style the outer div to give it width */
.Thai {
   display: none;
   z-index: 80;
   width:460px;     /* Main bar total width, minimize to center and not wrap to two lines*/
}

.category_Thai .Thai {display:block;}

Quote:

Originally Posted by Allen

One thing I don't see is the additional class for the Thai navbar.

<div class="menu Thai">

I guess I'm not understanding what you're wanting. I just pasted in the html and it worked. Where do
you want this to display? I thought it would be just for a category named "Thai". Do you want this
for all pages showing both navs?
Here's a screen shot combining the two nav's into one. A snippet of the code with a few characters inserted.

Code:

<li><a href="/" title="">Home<br />บ้าน</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a class="drop" href="" title="">Photo Galleries<br />แกลลอรี่
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="”moveUL”">
        <li><a class="drop" href="#noclick" title="">Birds<br />นก
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Birds/Birds-Thailand-1/17365494_kHCMWX">Thailand • เมืองไทย</a></li>
                <li><a href="/Birds/Birds-Malaysia/17349215_PNnfHn">Malaysia • มาเลเชีย</a></li>   
                <li><a href="/Birds/Birds-South-Africa/19024720_gTHSjZ">South Africa</a></li>
                <li><a href="/Birds/Birds-Madagascar/19179777_cZ2G7W">Madagascar</a></li>  
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="#noclick" title="">Primates<br />สัตว์เลี้ยงลูกด้วยนม
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Animals/Primates-Thailand-1/17364378_gWVWg5">Thailand </a></li>
                <li><a href="/Animals/Primates-Malaysia/17349321_N3MBK8">Malaysia</a></li>   
                <li><a href="/Animals/Primates-Madagascar/19180260_Grsf39">Madagascar</a></li>  
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="#noclick" title="">Predators<br />สัตว์กินเนื้อเป็นอาหาร
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Animals/Predators-Thailand/22266257_c8rNNq">Thailand • เมืองไทย</a></li> 
                <li><a href="/Animals/Predators-South-Africa/22266390_XWdPB4">South Africa • อัฟริกาใต้</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>

Hi Al,

Was just about to hit the sack (coming up to 23:00 hours over here!) but just saw your latest response so wanna' get one back to you before I'm off counting Z's!

First and foremost, many thanks for your time yet again. Okay, seems I may have confused you a little. What I'm envisaging is two navigation bars showing on every page of my site, English on top, then the Thai equivalent directly beneath.

We were probably singing from the same song sheet when I first brought this up, then I most likely confused you with my words of "insertion" in my last post. Sorry about that!

Catch up with you again upon the morrow my friend. Wishing you all the best meantime.

Allen · Jul-17-2012, 08:27 AM #1966

Quote:

Originally Posted by Lemur Lover

Hi Al,

Was just about to hit the sack (coming up to 23:00 hours over here!) but just saw your latest response so wanna' get one back to you before I'm off counting Z's!

First and foremost, many thanks for your time yet again. Okay, seems I may have confused you a little. What I'm envisaging is two navigation bars showing on every page of my site, English on top, then the Thai equivalent directly beneath.

We were probably singing from the same song sheet when I first brought this up, then I most likely confused you with my words of "insertion" in my last post. Sorry about that!

Catch up with you again upon the morrow my friend. Wishing you all the best meantime.

In that case all you'd need is to display it and adjust the main width to center it. Place after .menu.

Code:

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:760px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}

      /* style the outer div to give it width */ 
.Thai {
    display: none;
    z-index: 80;
    width:590px;     /* Main bar total width, minimize to center and not wrap to two lines*/ 
}
  .category_Thai .Thai {display:block;}

Plus adding the class in the header.

<div class="menu Thai">

Code:

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
...
...
</ul>
</div>  <!-- closes menu -->

<div class="menu Thai">
<ul>
...
...
</ul>
</div> <!-- closes Thai menu -->

<div style="clear: both;"></div>
<!-- End Navbar Code -->

Lemur Lover · Jul-17-2012, 08:00 PM #1967

Quote:

Originally Posted by Allen

In that case all you'd need is to display it and adjust the main width to center it. Place after .menu.

Code:

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:760px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}

      /* style the outer div to give it width */ 
.Thai {
    display: none;
    z-index: 80;
    width:590px;     /* Main bar total width, minimize to center and not wrap to two lines*/ 
}
  .category_Thai .Thai {display:block;}

Thanks Al! Okay, your simple fix for the header worked a treat, as you can see - although not all Thai pages are finished and linked, I'll leave the Thai nav bar in place.

Having trouble with the CSS code though: I pasted it in like this:

.navDot {
font-size: 15pt;
color: #3A6948;
line-height: 22px;
}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
position:relative; /* Make the container moveable */
margin: 0 auto 30px; /* top R/L bottom */
width:760px; /* Main bar total width, minimize to center and not wrap to two lines*/
}

/* style the outer div to give it width */
.Thai {
display: none;
z-index: 80;
width:590px; /* Main bar total width, minimize to center and not wrap to two lines*/
}
.category_Thai .Thai {display:block;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

...

After adding this though the whole Thai nav bar simply disappeared. Obviously I'm doing something wrong, just not sure what. Perhaps it's this:

I noticed that you have strike-throughs in a couple of lines of the text/code you wrote, in this line:

display: none;

and in:

.category_Thai .Thai {display:block;}

which I assumed you wanted me to paste into the CSS, but as you can see, for some reason those strike-throughs don't paste for me. Please advise when you have the time.

Many thanks always!

Allen · Jul-17-2012, 08:41 PM #1968

Quote:

Originally Posted by Lemur Lover

...

After adding this though the whole Thai nav bar simply disappeared. Obviously I'm doing something wrong, just not sure what. Perhaps it's this:

I noticed that you have strike-throughs in a couple of lines of the text/code you wrote, in this line:

display: none;

and in:

.category_Thai .Thai {display:block;}

which I assumed you wanted me to paste into the CSS, but as you can see, for some reason those strike-throughs don't paste for me. Please advise when you have the time.

Many thanks always!

The strike-throughs were to show you what gets removed, from the original CSS in post 1959.

So this is all you need. Add the .Thai rule just after the .menu rule.

Code:

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:760px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}

      /* style the outer div to give it width */ 
.Thai {
    z-index: 80;
    width:590px;     /* Main bar total width, minimize to center and not wrap to two lines*/ 
}

Lemur Lover · Jul-17-2012, 10:05 PM #1969

Quote:

Originally Posted by Allen

The strike-throughs were to show you what gets removed, from the original CSS in post 1959.

So this is all you need. Add the .Thai rule just after the .menu rule.

Code:

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:760px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}

      /* style the outer div to give it width */ 
.Thai {
    z-index: 80;
    width:590px;     /* Main bar total width, minimize to center and not wrap to two lines*/ 
}

As always Al, I regard you as a marvellous godsend; worked a treat, many thanks

Don't wanna monopolise all your time, but there something else I'd really appreciate your help with:

I want to add another button to my custom nav bar (both in English and in Thai) for my blog, between “About” and “Contact”. I'm fairly confident that adding this HTML code:

<li class="navDot"> • </li>
<li><a href="Link">Blog</a></li>
</a>

</ul> 
</li>

between:

</li>
<li class="navDot"> • </li>
<li><a class="drop" href="#noclick" title="">About
</a>

<ul>
<li><a href="/Other/About-the-Photographer/21836637_dv9B3s" title="">The Photographer</a></li>
<li><a href="/Other/About-the-Photography/21836651_WSLKFZ" title="">The Photography</a></li>
</ul> 

and:

</li>
<li class="navDot"> • </li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
</ul>
</div> 
<div style="clear: both;"></div>


should work, but looking at the current CSS code I have, I'm about as confused as a puppy with two long waggly tails. I can't seem to figure out what I need to add and exactly where I would need to insert it.

Hope I haven't driven you completely nuts yet Al, as you can see though, I am at least trying my best!

Allen · Jul-18-2012, 04:19 AM #1970

Quote:

Originally Posted by Lemur Lover

As always Al, I regard you as a marvellous godsend; worked a treat, many thanks

Don't wanna monopolise all your time, but there something else I'd really appreciate your help with:

I want to add another button to my custom nav bar (both in English and in Thai) for my blog, between “About” and “Contact”. I'm fairly confident that adding this HTML code:
...
should work, but looking at the current CSS code I have, I'm about as confused as a puppy with two long waggly tails. I can't seem to figure out what I need to add and exactly where I would need to insert it.

Hope I haven't driven you completely nuts yet Al, as you can see though, I am at least trying my best!

Like this

Code:

...
<li><a class="drop" href="#noclick" title="">About
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="/Other/About-This-Site/24215468_hGP62q" title="">This Site</a></li>
        <li><a href="/Other/About-the-Photographer/21836637_dv9B3s" title="">The Photographer</a></li>
        <li><a href="/Other/About-the-Photography/21836651_WSLKFZ" title="">The Photography</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="Link">Blog</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact </a></li>
...
...
<li><a class="drop" href="#noclick" title="">เกี่ยวกับ
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
<li><a href="/ThaiTranslation/About-This-Site/24215284_Bfh2cr" title="">เว็บไซด์</a></li>
        <li><a href="/ThaiTranslation/About-The-Photographer/24197335_2VqBbX" title="">ช่างภาพ</a></li>
        <li><a href="/ThaiTranslation/About-the-Photography/24215207_NQggbD" title="">รูปภาพ</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="navDot">&nbsp;•&nbsp;</li>
<li><a href="Link">Blog</a></li>
<li class="navDot">&nbsp;•&nbsp;</li>  
<li><a href="/" onclick="return false;" class="customContactButton">ติดต่อ </a></li>
...

Change width's for the extra buttons.

Code:

      /* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin: 0 auto 30px;  /* top R/L bottom */
   width:820px;          /* Main bar total width, minimize to center and not wrap to two lines*/
}


      /* style the outer div to give it width */ 
.Thai {
    z-index: 80;
    width:670px;     /* Main bar total width, minimize to center and not wrap to two lines*/ 
}

Carmen69 · Jul-18-2012, 03:50 PM #1971

I've been working on this all day and have gotten a good start on it. The one thing I haven't been able to figure out is how to have a 2nd flyout. It would be off of Galleries->Events->#1 and then #2. I only need it under Events (so far), but everything I've tried either takes off the rest of the navi bar or lists it under events. Any suggestions/help?

www.butterflykissesphotography.me

Thanks
Carmen

Allen · Jul-18-2012, 04:19 PM #1972

Quote:

Originally Posted by Carmen69

I've been working on this all day and have gotten a good start on it. The one thing I haven't been able to figure out is how to have a 2nd flyout. It would be off of Galleries->Events->#1 and then #2. I only need it under Events (so far), but everything I've tried either takes off the rest of the navi bar or lists it under events. Any suggestions/help?

www.butterflykissesphotography.me

Thanks
Carmen

Try this.

Code:

...
<li><a class="drop" href="#nopick">Galleries
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Newborns/23528554_TvGBvG/">Newborns</a></li>
        <li><a href="/gallery/XXXXXXXX_xxxxx">Children</a></li>
        <li><a href="/Families/23678050_L9C9h2/">Families</a></li>
        <li><a href="/Seniors/23568300_gsd9Rf/">Seniors</a></li>
        <li><a class="drop" href="#nopick">Event
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
               <li><a href="/gallery/XXXXXXXX_xxxxx">Event 1</a></li>
               <li><a href="/gallery/XXXXXXXX_xxxxx">Event 2</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/gallery/XXXXXXXX_xxxxx">Military</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
...

Carmen69 · Jul-18-2012, 04:22 PM #1973

Quote:

Originally Posted by Allen

Try this.

Code:

...
<li><a class="drop" href="#nopick">Galleries
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Newborns/23528554_TvGBvG/">Newborns</a></li>
        <li><a href="/gallery/XXXXXXXX_xxxxx">Children</a></li>
        <li><a href="/Families/23678050_L9C9h2/">Families</a></li>
        <li><a href="/Seniors/23568300_gsd9Rf/">Seniors</a></li>
        <li><a class="drop" href="#nopick">Event
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
               <li><a href="/gallery/XXXXXXXX_xxxxx">Event 1</a></li>
               <li><a href="/gallery/XXXXXXXX_xxxxx">Event 2</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/gallery/XXXXXXXX_xxxxx">Military</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
...

Awesome, thanks! I had something similar, but something was missing!

Lemur Lover · Jul-18-2012, 04:43 PM #1974

Quote:

Originally Posted by Allen

Like this

Change width's for the extra buttons.

Perfect instruction yet again, thank you so much Al

I know this next question I have isn't specifically related to nav bars, but I'm wondering whether perhaps you have a quick fix for this:

Is there any way I can force the click-on links in my text to appear in the same font style and size as the rest of the text? Would be nice to have the same colour too (perhaps highlighted when cursor hovers over the linked words), but not a major issue, and I don't mind the underline for each word link; it's just the font style/type and size I'd really like to keep uniform with the rest of the text if possible. If you're not sure what I mean, please refer to this example page:

http://natureimpressions.smugmug.com...1336429_MNHPTS

Worse still is the Thai fonts in the translated page, e.g.:

http://natureimpressions.smugmug.com...4175332_SngHzR

Thanks for your time and consideration my friend

Allen · Jul-18-2012, 05:23 PM #1975

Quote:

Originally Posted by Lemur Lover

Perfect instruction yet again, thank you so much Al

I know this next question I have isn't specifically related to nav bars, but I'm wondering whether perhaps you have a quick fix for this:

Is there any way I can force the click-on links in my text to appear in the same font style and size as the rest of the text? Would be nice to have the same colour too (perhaps highlighted when cursor hovers over the linked words), but not a major issue, and I don't mind the underline for each word link; it's just the font style/type and size I'd really like to keep uniform with the rest of the text if possible. If you're not sure what I mean, please refer to this example page:

http://natureimpressions.smugmug.com...1336429_MNHPTS

Worse still is the Thai fonts in the translated page, e.g.:

http://natureimpressions.smugmug.com...4175332_SngHzR

Thanks for your time and consideration my friend

Add red in this order. You need to add spaces on your Thai page around each link.

Code:

.gallery_21336429 .myText {
    font-family: Papyrus, Comic Sans MS, Verdana; 
    font-size: 130%;
    color: #666;
    font-weight: normal;
    text-align: justify;
    line-height: 25px
}

.gallery_21336429 #albumDescription a {
    font-family: Papyrus, Comic Sans MS, Verdana !important; 
    font-size: 120%;
    color: #666;
}

.gallery_21336429 #albumDescription a:hover {
    color: #aaa;
}

.gallery_24175332 .myText {
    font-family: Angsana New, Helvetica, Verdana; 
    font-size: 200%;
    color: #666;
    font-weight: normal;
    text-align: justify;
    line-height: 25px
}

.gallery_24175332 #albumDescription a {
    font-family: Angsana New, Helvetica, Verdana !important;
    font-size: 100% !important;
    color: #666;
}

.gallery_24175332 #albumDescription a:hover {
    color: #aaa;
}

Allen · Jul-18-2012, 05:27 PM #1976

Quote:

Originally Posted by Lemur Lover

...

Noticed some illegal characters in your html. These look like they came from a word processor.

....target="”_blank”">สิงโต (แก้ความกำกวม)</a> สิงโต (<a href....

Lemur Lover · Jul-18-2012, 07:02 PM #1977

Quote:

Originally Posted by Allen

Add red in this order. You need to add spaces on your Thai page around each link.

Aw Al, this may well be simple stuff to you, but to me you're an absolute master!!!

Needless to say, all worked perfectly

As to the need to add spaces on our Thai pages around each link, perhaps this is a little something I can enlighten you on my friend: While the Thai alphabet is made up of something like 44 consonants and about 22 vowels, there are no Thai punctuation marks and spaces between words in a sentence do not occur, as they're not seen to be needed; some letters will only been used at the beginning of words while others are used only at the end of a word, so for someone who understands and reads Thai it's all perfectly clear and makes sense. With the exception of situations where a word written in a language other than Thai (i.e. using characters of a foreign alphabet) and included in a sentance, usually the only spaces one sees in a body of Thai text will be there to denote the coming of a new paragraph.

Just for the record, I can actually read Thai, though far from proficiently, but enough to be able to discern individual words most of the time ... even if still all too many of them I don't understand - LOL

Lemur Lover · Jul-18-2012, 07:18 PM #1978

Quote:

Originally Posted by Allen

Noticed some illegal characters in your html. These look like they came from a word processor.

....target="”_blank”">สิงโต (แก้ความกำกวม)</a> สิงโต (<a href....

That could well be the case Al, as the fact is on the Mac Desktop I use I can't seem to find a plain text editor like I used to have when working with MS window, like notepad. I'm usually extremely careful when working on codes in OpenOffice.org's documents (.odt), but it appears you've found an error.

Trouble is, I can't seem to find the exact error you're referring to; all the links on that page seem to work OK, or at least they do for me on my computer.

I have noticed before in pretty much all my HTML links that both " and ” is used, and I have wondered about that: should only the vertical style be used or only the italic leaning or perhaps both? Fact is - and again this is the way it appears for me on my computer - all links I have seem to be made up of both styles and they all seem to function OK.

Am I missing or misunderstanding something here?

Allen · Jul-18-2012, 07:25 PM #1979

Quote:

Originally Posted by Lemur Lover

That could well be the case Al, as the fact is on the Mac Desktop I use I can't seem to find a plain text editor like I used to have when working with MS window, like notepad. I'm usually extremely careful when working on codes in OpenOffice.org's documents (.odt), but it appears you've found an error.

Trouble is, I can't seem to find the exact error you're referring to; all the links on that page seem to work OK, or at least they do for me on my computer.

I have noticed before in pretty much all my HTML links that both " and ” is used, and I have wondered about that: should only the vertical style be used or only the italic leaning or perhaps both? Fact is - and again this is the way it appears for me on my computer - all links I have seem to be made up of both styles and they all seem to function OK.

Am I missing or misunderstanding something here?

Type a double quote here " and you'll see what pure text looks like.

From the page source.
line 583 column 1 - Warning: <a> attribute "target" has invalid value "”_blank”"

HTML Code:

<div class="myPhoto2"> 
<a href="http://natureimpressions.smugmug.com/Animals/Predators-Thailand/22266257_c8rNNq" 
target=”_blank”><img src="/photos/i-kFHhtxs/0/M/i-kFHhtxs-M.jpg" width="300" height="200" />

Every one of your targets are this way.

Lemur Lover · Jul-18-2012, 07:43 PM #1980

Quote:

Originally Posted by Allen

Type a double quote here " and you'll see what pure text looks like.

From the page source.
line 583 column 1 - Warning: <a> attribute "target" has invalid value "”_blank”"

HTML Code:

<div class="myPhoto2"> 
<a href="http://natureimpressions.smugmug.com/Animals/Predators-Thailand/22266257_c8rNNq" 
target=”_blank”><img src="/photos/i-kFHhtxs/0/M/i-kFHhtxs-M.jpg" width="300" height="200" />

Every one of your targets are this way.

I'm really trying to understand what you're saying here Al, but I'm stuck in confusion right now. I can't seem to find the page you're referring to where you see these the double quotation marks. And the fact that you're saying you see them on every one of my targets perplexes me all the more.

Which page did you pull the following from?

HTML Code:

<div class="myPhoto2"> 
<a href="http://natureimpressions.smugmug.com/Animals/Predators-Thailand/22266257_c8rNNq" 
target=”_blank”><img src="/photos/i-kFHhtxs/0/M/i-kFHhtxs-M.jpg" width="300" height="200" />


Similar Threads	Thread Starter	Forum	Replies	Last Post

DropDown NavBar Positioning and Color	CerebrusX	SmugMug Customization	6	Aug-08-2012 09:42 AM
Please Help About Dropdown Navbar	wangyunpeng	SmugMug Customization	2	Jul-09-2011 10:51 AM
single dropdown navbar?	dogwood	SmugMug Customization	33	Jun-21-2010 08:57 PM
Dropdown Navbar	juan14888	SmugMug Customization	7	Apr-19-2010 05:34 PM
navbar dropdown code errors?	amyparsons	SmugMug Customization	20	Jan-09-2009 07:53 AM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Jul-18-2012, 03:50 PM #1971
Carmen69 Beginner grinner Join Date: Jun 2012 Posts: 8	I've been working on this all day and have gotten a good start on it. The one thing I haven't been able to figure out is how to have a 2nd flyout. It would be off of Galleries->Events->#1 and then #2. I only need it under Events (so far), but everything I've tried either takes off the rest of the navi bar or lists it under events. Any suggestions/help? www.butterflykissesphotography.me Thanks Carmen