Skip navigation
Kurichan57
Currently Being Moderated

Centering a drop down menu

Mar 29, 2013 8:13 AM

Tags: #drop_down_menues #centering_drop_down_menues

Hi Everyone

I have a shopping site (in Japanese). The site has been going since 2003 and I have used 4 different webmasters until I decided $800 a month for changing the price on 5 items was too much.

Now I have decided to do the site myself.

I have never done HTML or any coding and started a few days ago.

It seems to me that each webmaster just added their bits on top of other's with html, php and goodness knows what else. I have had to delete 6 times the amount of files that are now on the site.

I have always hated the fact that the site in on the left, so I have decided to try and centre it. I have managed this in a crude way on the Homepage, but for the life of me I cannot centre the drop down menu to line up automatically

with the drop down box on different computers. It's ok on my Vaio 17" but not on others. If I put auto on the each category Left: all the drop downs end up under 'Homeopathy'

Bearing in mind I am a 4 year old with this stuff, can anybody help out?

It's a big site with a few 100 pages, shopping cart etc, so I have a lot of learning to do.

 

Here is the main page:

www.fairdew.com

 

Here is the section that relates to the drop down menues (on the first one I put centered in the 'left:'   for the other sections I just put the px which worked for my pc):

 

<div id="LayerHM" style="position:absolute; left:centered; top:70px; width:100px; height:50px; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('LayerHM','','show')" onMouseOut="MM_showHideLayers('LayerHM','','hide')">

  <table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCFF">

    <tr>

      <td bgcolor="#EEEEEE">

        <table border="0" cellpadding="0" cellspacing="10">

          <tr>

            <td nowrap="nowrap" class="NaviLayer"><a href="homeopathy/index.html" class="navi">インデックスページ</a><br>

              <a href="homeopathy/index.html#INFO" class="navi">ホメオパシーとは</a><br>

              <a href="homeopathy/homeopathy_info01.html" class="navi">レメディの選択と処方</a><br>

              <a href="homeopathy/homeopathy_info02.html" class="navi">レメディに対する反応</a><br>

              <a href="homeopathy/homeopathy_info03.html" class="navi">ホメオパシーFAQ</a></td>

          </tr>

          <tr>

            <td nowrap class="NaviLayer">フェアデュウ・ホメオパシー<br>

                            <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="fairdew/FAI_homeopathy01.html" class="navi">OTCレンジ全商品リスト</a><br />

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="fairdew/homeopathy/japanesepollens.html" class="navi">ジャパニーズ・ミックスド・ポレンズ</a></td>

          </tr>

          <tr>

            <td nowrap="nowrap" class="NaviLayer">エインズワース社<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="homeopathy/AIN_homeopathy01.html" class="navi">OTCレンジ(30c)全商品リスト</a><br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="homeopathy/AIN_101.html" class="navi">ホメオパシーキット</a></td>

          </tr>

          <tr>

            <td nowrap="nowrap" class="NaviLayer">フェアデュウ・ティッシュソルト<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="homeopathy/NEW_tissuesalt01.html" class="navi">シングルティッシュソルト全商品リスト</a> <br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="homeopathy/tissuesalt_info01.html" class="navi">ティッシュソルトとは</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="homeopathy/tissuesalt_info02.html" class="navi">レメディができるまで</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="homeopathy/tissuesalt_info03.html" class="navi">レメディの使い方</a><br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="homeopathy/tissuesalt_info04.html" class="navi">ティッシュソルトFAQ</a></td>

          </tr>

          <tr>

            <td nowrap class="NaviLayer">ヒリオス社<br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="homeopathy/HEL_cream.html" class="navi">ホメオパシークリーム</a></td>

          </tr>

          <tr>

 

          </tr>

        </table>      </td>

    </tr>

  </table>

</div>

<div id="container"><div id="LayerFE" style="position: absolute; left: 650px; top: 71px; width: 100px; height: 50px; z-index: 1; visibility: hidden;" onMouseOver="MM_showHideLayers('LayerFE','','show')" onMouseOut="MM_showHideLayers('LayerFE','','hide')">

  <table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCFF">

    <tr>

      <td bgcolor="#EEEEEE">

        <table border="0" cellpadding="0" cellspacing="10">

          <tr>

            <td nowrap="nowrap" class="NaviLayer"><a href="flower_essence/index.html" class="navi">インデックスページ</a><br>

              <a href="flower_essence/index.html#INFO" class="navi">フラワーエッセンスとは</a><br>

              <a href="flower_essence/floweressence_info01.html" class="navi">フラワーエッセンスの効果</a><br>

              <a href="flower_essence/floweressence_info02.html" class="navi">エッセンスの選び方</a><br>

              <a href="flower_essence/floweressence_info03.html" class="navi">エッセンスの摂り方</a><br>

              <a href="flower_essence/floweressence_info04.html" class="navi">フラワーエッセンスFAQ</a></td>

          </tr>

                    <tr>

            <td nowrap class="NaviLayer">クリスタルハーブ社<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/CRH_essence01.html" class="navi">フラワーレメディ全商品リスト</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/CRH_039.html" class="navi">エマージェンシーエッセンス</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/CRH_042.html" class="navi">フラワーレメディセット</a><br>

                <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="flower_essence/CRH_essence04.html" class="navi">ローズエッセンス</a>                      </td>

          </tr>

          <tr>

            <td nowrap="nowrap" class="NaviLayer">エインズワース社<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_essence01.html" class="navi">フラワーレメディ全商品リスト</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_039.html" class="navi">リカバリーレメディ</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_040.html" class="navi">リカバリープラス</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_041.html" class="navi">エマージェンシークリーム</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_042.html" class="navi">フラワーレメディセット</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_043.html" class="navi">トリートメントボトル</a><br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_044.html" class="navi">エマージェンシースプレー</a></td>

          </tr>

          <tr>

            <td nowrap="nowrap" class="NaviLayer">ヤン・デ・ヴァリースフラワーエッセンス<br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="flower_essence/JDV_essence.html" class="navi">全商品リスト</a></td>

          </tr>

          <tr>

            <td nowrap="nowrap" class="NaviLayer">ペットのためのフラワーエッセンス<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="flower_essence/AIN_pets.html" class="navi">エインズワース社</a><br> <img src="../image/border_navi01.gif" width="16" height="16" align="middle">

              <a href="CRH_pets.html" class="navi">クリスタルハーブ社</a><br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="flower_essence/BIO_pets.html" class="navi">バイオフォース社</a></td>

          </tr>

        </table>      </td>

    </tr>

  </table>

</div>

<div id="LayerAR" style="position:absolute; left:820; top:70px; width:100px; height:50px; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('LayerAR','','show')" onMouseOut="MM_showHideLayers('LayerAR','','hide')">

  <table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCFF">

    <tr>

      <td bgcolor="#EEEEEE">

        <table border="0" cellpadding="0" cellspacing="10">

          <tr>

            <td nowrap="nowrap" class="NaviLayer"><a href="aroma/index.html" class="navi">インデックスページ</a></td>

          </tr>

          <tr>

            <td nowrap class="NaviLayer">ロバート・ティスランド社<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"><a href="aroma/TIS_essential.html" class="navi">エッセンシャルオイル</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"><a href="aroma/TIS_rareoils.html" class="navi">希少高額オイル</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"><a href="aroma/TIS_skinperfume.html" class="navi">香水用ブレンドオイル</a><br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"><a href="aroma/TIS_carrier.html" class="navi">キャリアオイル</a><br>              <img src="image/border_navi02.gif" width="16" height="16" align="middle"><a href="aroma/TIS_seasonal.html" class="navi">季節限定セレクション</a> </td>

          </tr>

 

        </table>      </td>

    </tr>

  </table>

</div>

<div id="LayerCM" style="position:absolute; left:930; top:70px; width:100px; height:50px; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('LayerCM','','show')" onMouseOut="MM_showHideLayers('LayerCM','','hide')">

  <table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCFF">

    <tr>

      <td bgcolor="#EEEEEE">        <table border="0" cellpadding="0" cellspacing="10">

          <tr>

            <td nowrap="nowrap" class="NaviLayer"><a href="cosme/index.html" class="navi">インデックスページ</a></td>

          </tr>

          <tr>

            <td nowrap="nowrap" class="NaviLayer">フェアデュ<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="/cosme/FAI_clay.html" class="navi">クレイ</a><br>

          <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="cosme/WEL_almond.html" class="navi">植物オイル</a><br><img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="cosme/WEL_almond.html" class="navi">CO2抽出オイル </a><br>

          <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="cosme/WEL_almond.html" class="navi">浸出オイル</a><br>          </tr>

        </table>      </td>

    </tr>

  </table>

</div>

<div id="LayerHB" style="position:absolute; left:1030; top:70px; width:100px; height:50px; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('LayerHB','','show')" onMouseOut="MM_showHideLayers('LayerHB','','hide')">

  <table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCFF">

    <tr>

      <td bgcolor="#EEEEEE">

        <table border="0" cellpadding="0" cellspacing="10">

          <tr>

            <td nowrap class="NaviLayer"><a href="herb/index.html" class="navi">インデックスページ</a></td>

          </tr>

          <tr>

            <td nowrap class="NaviLayer">バイオフォース社<br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="herb/BIO_021.html" class="navi">エキナフォース</a> <br>

              <img src="image/border_navi01.gif" width="16" height="16" align="middle"> <a href="herb/BIO_022.html" class="navi">エキナセア・コンプレックス (子供用)</a> <br>

              <img src="image/border_navi02.gif" width="16" height="16" align="middle"> <a href="herb/BIO_tincture01.html" class="navi">ハーブティンクチャー</a> </td>

          </tr>

 

        </table>      </td>

    </tr>

  </table>

</div>

 

 

 

 

 

 

And here is the css for the site ( I don't think what I am looking for is in here though)

 

 

 

 

@charset "Shift_JIS";

* {

    font-size: 12px;

    line-height: 1.4;

    font-family: "ヒラギノ角ゴ Pro W3", Gothic, sans-serif;

    color: #999999;

}

 

body{

 

 

}    #container {

 

width: 750px;

 

margin:0 auto;

 

border: 1px solid green;                       */This is the section I put in for centering the site, along with inserting it in the HTML code/*

 

}

 

 

 

td {

 

}

img {

    border:None;

 

}

form {

        margin: 0;

}

a.basic:link {

    color: #666666;

    text-decoration: none;

}

a.basic:visited {

    color: #333333;

    text-decoration: none;

}

a.basic:hover {

    color: #333333;

    text-decoration: none;

    background-color: #EEEEEE;

}

a.basic:active {

    color: #333333;

    text-decoration: none;

}

a.content {

    text-decoration: none;

}

a.content:link {

    color: #666666;

    border-bottom: 1px dotted #9999FF;

}

a.content:visited {

    color: #333333;

    border-bottom: 1px dotted #9999FF;

}

a.content:hover {

    color: #333333;

    border-bottom: 1px solid #9999FF;

    background-color: #EEEEEE;

}

a.content:active {

    color: #333333;

    border-bottom: 1px dotted #9999FF;

}

a.navi:link {

    color: #333333;

    text-decoration: none;

}

a.navi:visited {

    color: #333333;

    text-decoration: none;

}

a.navi:hover {

    color: #333333;

    text-decoration: none;

    background-color: #E0E0F3;

}

a.navi:active {

    color: #333333;

    text-decoration: none;

}

a.LinkOrange:link, a.LinkOrange:visited {

    font-weight: bold;

    text-decoration: none;

    color: #CC9900;

}

a.LinkOrange:hover {

    text-decoration: underline;

}

a.LinkGreen:link, a.LinkGreen:visited {

    font-weight: bold;

    text-decoration: none;

    color: #009933;

}

a.LinkGreen:hover {

    text-decoration: underline;

}

a.LinkRed:link, a.LinkRed:visited {

    font-weight: bold;

    text-decoration: none;

    color: #FF6666;

}

a.LinkRed:hover {

    text-decoration: underline;

}

 

.NaviLayer {

    font-size: 10px;

    line-height: 150%;

    font-family: "MS PGothic", "Osaka" Gothic, sans-serif;

}

.WholeBG {

    background-image: url(image/index_wholebg.gif);

    background-repeat: no-repeat;

    background-position: right bottom;

}

.TableBorder {

    border: 1px solid #CCCCCC;

}

.TableLine {

    border-top-width: 1px;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-left-width: 1px;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: dotted;

    border-left-style: none;

    border-top-color: #CCCCCC;

    border-right-color: #CCCCCC;

    border-bottom-color: #CCCCCC;

    border-left-color: #CCCCCC;

}

.TableLine2 {

    border-top-width: 1px;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-left-width: 1px;

    border-top-style: solid;

    border-right-style: none;

    border-bottom-style: dotted;

    border-left-style: none;

    border-top-color: #CCCCCC;

    border-right-color: #CCCCCC;

    border-bottom-color: #CCCCCC;

    border-left-color: #CCCCCC;

}

.TableLine3 {

    border-top-width: 1px;

    border-right-width: 1px;

    border-bottom-width: 1px;

    border-left-width: 1px;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: solid;

    border-left-style: none;

    border-top-color: #CCCCCC;

    border-right-color: #CCCCCC;

    border-bottom-color: #CCCCCC;

    border-left-color: #CCCCCC;

}

li {

    font-size: 12px;

}

 

/****************************************************/

/*           Addons since July 2006                 */

/****************************************************/

ul.FAQ {

    margin: 0;

    padding: 0 0 0 25px;

}

ul.FAQ li.Q {

    list-style: url(image/common/bullet_q.gif);

    margin-bottom: 5px;

    color: #9999FF;

}

ul.FAQ li.A {

    list-style: url(image/common/bullet_a.gif);

    margin-bottom: 12px;

}

 

/* Baa Baa sheep for Mei Mei products */

ul.SheepList {

    list-style: url(cosme/image/MEI_dot_sheep_right.gif);

}

ul.SheepList li {

    padding-left: 12px;

    line-height: 1.4;

}

 

/* Temporary Adjustment */

.TableLine p {

    margin: 8px 0;

}

 

 

.Img_Left {

    float: left;

    margin: 0 10px 10px 0;

}

.Img_Right {

    float: right;

    margin: 0 10px 0 10px;

}

div.Clear {

    clear: both;

}

 

/** Flower Remedy Detailed Description part **/

div#DescriptionTable {

    width: 730px;

    margin-left: 10px;

}

div#DescriptionTable .SamllBox {

    float: left;

    display: block;

    width: 230px;

}

div#DescriptionTable .MediumBox {

    float: left;

    display: block;

    margin: 0 0 10px 5px;

    width: 320px;

}

div#DescriptionTable .MediumBox img {

    float: left;

    margin-right: 10px;

}

div#DescriptionTable .Center {

    margin: 0 20px;

}

 

div#DescriptionTable h3 {

    margin: 0 0 4px 0;

    padding: 3px 15px;

    font: bold 12px;

    color: #FF9900;

    line-height: 1.0;

    background: url(image/bg_yellow_short.gif) top left no-repeat;

}

div#DescriptionTable h4 {

    margin: 0 0 14px 0;

    padding: 3px 15px;

    font: bold 12px;

    color: #5777A0;

    line-height: 1.0;

    background: url(image/bg_blue_long.gif) top left no-repeat;

}

div#DescriptionTable h5 {

    margin: 0 0 14px 0;

    padding: 3px 15px;

    font: bold 12px;

    color: #5777A0;

    line-height: 1.0;

    background: url(image/bg_blue_short.gif) top left no-repeat;

}

div#DescriptionTable .SamllBox ul {

    margin-left: 25px;

    padding: 0;

    list-style: outside url(image/dot_yellow.gif);

}

 

 

a.urlLatestH1:link, a.urlLatestH1:visited {

    font-size: 14px;

    color: #009900;

    text-decoration: none;

    border-bottom: 1px dotted #9999FF;

}

a.urlLatestH1:hover {

    border-bottom: 1px solid #9999FF;

    background-color: #EEEEEE;

}

a.urlLatestH2:link, a.urlLatestH2:visited {

    font-size: 12px;

    color: #0093D3;

    text-decoration: none;

    border-bottom: 1px dotted #9999FF;

}

a.urlLatestH2:hover {

    border-bottom: 1px solid #9999FF;

    background-color: #EEEEEE;

}

 

a.White:link, a.White:visited {

    font-weight: bold;

    color: #FFFFFF;

    border-bottom: 1px dotted #9999FF;

}

a.White:hover {

    border-bottom: 1px solid #9999FF;

    background-color: #009900;

}

 

 

 

Thanks Very much

 

Kruichan

 
Replies
  • Currently Being Moderated
    Mar 29, 2013 10:04 AM   in reply to Kurichan57

    Your show/hide menu choice is complex due to its use of absolutely positioned layers.

     

    See what happens on the second dropdown when the absolute; left: setting is changed to 240px

    Looks OK until you change the viewport width when it falls apart because, while the page content moves with viewport changes, that layer is locked into the absolute position you specified.

     

    I'd start over with a JQuery menu

     

    <div onmouseout="MM_showHideLayers('LayerFE','','hide')" onmouseover="MM_showHideLayers('LayerFE','','show')" style="position: absolute; left: 240px; top: 71px; width: 100px; height: 50px; z-index: 1; visibility: hidden;" id="LayerFE">

     

    layer.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 11:35 AM   in reply to Kurichan57

    Hello Kruichan,

     

    hence there would be no objection to follow Ken's hint, but he said it already "Your show/hide menu choice is complex". I now have to take to it your "I have never done HTML or any coding and ..." so I would prefer to rebuild (only) your menu radically. For this you will find pretty templates here e.g.:

     

    http://www.dynamicdrive.com/style/csslibrary/category/C1/,

    http://www.dynamicdrive.com/dynamicindex1/ (see menus)

    http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml or

    http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/ex amples/

     

    If you leave your website, which was working before you changed it, you have time enough to learn how html and css work.

     

    Good luck!

    hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 11:35 AM   in reply to Kurichan57
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 11:46 AM   in reply to Kurichan57

    You're welcome -

     

    As I said, the code I posted was directly from your page.

    All I changed was the absolute; left: setting for the sexond dropdown from whatever is was to 240px.

     

    Sadly this will only work until the viewport width is changed.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 1:02 PM   in reply to Kurichan57

    Nancy is pointing you to the right menu idea. And I would hesitate to suggest that someone use jQuery for anything until they had a better notion of how to use CSS and HTML.

     

    You need to walk before you should try to run.

     

    $800 for just changing a few price items sounds excessive—unless this was implimented in a really arcane way. Maybe I should raise my rates…

     

    But in your case, since I do not understand any Japanese, I'd probably need to work with a translator, which might cause me to need to charge more. I can do English and Spanish and that is pretty much it.

     

    One of the first things that beginners often try is AP divs. And, because absolute positioning causes the whole flow of a website to get lost, it is one of the worst things you can do to a website.

     

    Your site looks fairly simple. It has a few design problems:

     

    1. The contrast between text and background is too low.
    2. The text is very small.
    3. On most pages, there is too much text, not enough graphics or pictures.
    4. I don't see any way to order the products on-line. Now, that may be my error, as I cannot read Japanese.
    5. Your page width is set to 750 pixels and I would recommend you go to 900. screens are larger now.

     

    Frankly, I think you could completely re-create the HTML part of your website by simply using the website page templates that come with Dreamweaver.

     

    As to the php, if you are just starting out, you need to hire someone to do the shopping cart. You won't be able to write that yourself for at least a year. There are also shopping carts you can purchase as well.

     

    You're asking about a drop-down menu. I would redo one standard page in Dreamweaver by going to File>New> Blank Page> choose HTML, then choose a layout. I would not recommend you use the "liquid" layouts there. You need a header, you need a footer. You can do your home page by simply picking "1 column fixed, centered, header and footer. Do that and Dreamweaver will create a CSS and an HTML file with the HTML file linked to the CSS. Change header/footer colors to match your company's colors, but be sure the text is not gray but either black over a light color, white over a dark color.

     

    You have five photographs down the left hand side. You can create a left float for those photos in CSS (add this to the style sheet that  Dreamweaver creates):

     

    .floatLeft {

              float: left;

              margin-right: 8px;

    }

     

    If you plan to cause photos to be on the right, you can do the same thing for a right-floated photo:

     

    .floatRight {

              float: right;

              margin-left: 8px;

    }

     

    Then, when you insert a photo in Dreamweaver, you can pick floatLeft or floatRight from the Class picker in your inspector on the bottom of your screen in Dreamweaver.

     

    Dreamweaver won't make your drop-down menu. You need to go where Nancy O. pointed you.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 3:52 PM   in reply to Kurichan57

    If you have 300 pages in a website, you need a templatted website. Or something along the lines of what Nancy suggests, with server-side includes, which may be pretty hard for a neophyte to handle.

     

    I would not touch a redesign of a 300+ page website for under $2500, myself. It's a lot of work. And then, there is the Japanise language. I don't think I could even generate the characters, let alone understand what I was typing, so were I doing this, my contract would probably go to an estimated $5,000 so I could have a Japanise interpreter by my side for the creation of each page.

     

    There is a Community Professional here who is in the UK, which is where I guess you are out of. It's Murray Summers and he absolutely knows what he is doing. I think you can private message him from his Community Page and he's around the forums enough so I'm pretty sure you'll get a response at least after Easter.

     

    Personally, I would not take on a website with a language I do not speak.

     

    As to making the basic pages, I would recommend you do a page using one of the Dreamweaver ready-to-roll pages, then use Nancy's suggestion for a drop-down menu, or buy a plugin for drop-down menus from Project VII. Al Sparber (one of the owners of Project VII is around these forums and can help you establish a rollover state like the one you currently have on your website, with English or Japanise popping up when you roll over a menu item. Frankly, I think he'd like the idea so much that the technique might be seen in later work of his.

     

    But then you have the issue of the server-side code that runs your store. If there is a database of items and prices, then you have to connect with a mySQL database using php (that's the way most web servers do it). And that takes someone who knows php and mySQL. I use a coder named Chris who lives near me to write stuff I cannot handle. Stuff I can handle, I write myself. I have several websites that I have produced with online stores.

     

    But with respect to getting your website operational the way you want it and the way it should be, there is a good rule of thumb operational here: Good, Fast, Cheap, pick any two. We can help you to the extent we know what's going on, but using this resource isn't as fast as tomeone churning out the pages you need one after the other, which is what a talented webmaster will do for you. So look at us as cheap, but slow.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2013 3:05 AM   in reply to Kurichan57

    Hello Kurichan,

     

    stop, stop, don't think we won't let you down. I for my part try to insert some of simple menus into your source code and I'm sure you will get here more and more simple smart and innovative solutions to the challenges that stir you.

     

    May I repeat my advice from above: "leave your website, which was working before you changed it, ..."

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2013 8:16 AM   in reply to Kurichan57

    Hello Kurichan,

     

    your http://www.fairdew.com/ in my IE10 works ok. There are no broken links and I can see all the images, as far as I can tell. My recommendation obout a new menu I've implemented. Therefore I adapted Nancy O.'s template  from here: http://alt-web.com/TEMPLATES/3-col-970.shtml.

     

    drJapNan.jpg

     

     

     

     

    If you like it, I can send you my code snippets. So, that you can develop a new menu and delete the old one step by step.

     

    Hans-Günter

     

    P.S.

    What do you think about two of them, the one English spoken the other one Japanese. So you could forget these disjoint or rollover techniques?

     

    modified by hans-g.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points