メニュー/ナビゲーションの位置

Question

おはようございます。私はコーディングの世界にいくぶん新しく、
新しいサイトの私のナビゲーションエリアに問題があります。私はサイトビルダーとしてZoho Sitesを使用しており、彼らは "組込み"のCSSを持っています。私が達成しようとしているのは、私のメニュー/ナビゲーションに、ロゴの下のページの「上部領域」の幅を実行させることです。しかし、ロゴのサイズを増やしたいのですが、そうしようとすると、メニューはますます小さくなります。現在のところ、ロゴとメニューは並んでいます。私はここにどこにいるのかを見ることができます：http://realtimehockey2015.zohosites.com/ Zohoが使用するコードは、私にとって本当に混乱していると思います。私はあなたのほとんどがこれは簡単な修正だと確信していますが、私はそれを理解できないようです。私は数日間コードを書き留めてきましたが、それを理解することはできません。 CSS全体がここでは3万文字の制限を超えているため、上部領域とナビゲーションを扱うCSSを投稿します。すべての助けが大いに感謝されるでしょう。

CSS Code 

    .themeTopArea { 
    background - color: $NavigationBGColor[#ffffff]; 
    padding: 5 px 0; 
    box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - webkit - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - moz - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - o - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); 
} 

.themeBrandingContainer { 
    display: table; 
    border: 0 solid; 
    width: 100 % ; 
} 
.tableRow { 
    display: table - row; 
} 
.tableCell { 
    display: table - cell 
} 
.themeLogoOuterContainer { 
    width: 350 px; 
    height: 50 px; 
    vertical - align: middle; 
} 
.themeLogoArea { 
    padding - right: 5 px; 
    height: 50 px; 
    width: 350 px; 

} 
.themeSitenameCaptionOuterContainer { 
    vertical - align: middle; 
    height: 100 % ; 
    width: 45 % ; 
} 
.themeSitenameCaptionInnerContainer { 
    height: 100 % ; 
    vertical - align: middle; 
} 
.themeSitenameCaptionContainer { 
    vertical - align: middle; 
    height: 100 % ; 
} 
.themeSitename { 
    font - family: $SiteNameFontFamily['Lobster Two', Georgia, serif]; 
    font - size: $SiteNameFontSize[48 px]; 
    color: $SiteNameTextColor[#1b2929]; 
    word-wrap: break-word; 
    line-height: 1; 
    } 
    .themeCaptionArea { 
    text-align: center; 
    padding: 25px 0; 
    } 
    .themeCaption { 
    font-family:$CaptionFontFamily['Overlock', Verdana, sans-serif]; 
    font-size:$CaptionFontSize[18px]; 
    color:$CaptionTextColor[# 393939]; 
    letter - spacing: 3 px; 
    text - transform: uppercase; 
} 

.themeNavigationAreaContainer { 
    vertical - align: bottom; 
    height: 100 % ; 
    width: 100 % ; 
} 
.themeNavigationArea { 
    float: left; 
}# 
navigation ul { 
    list - style: none; 
    margin: 0; 
    padding: 0; 
}# 
navigation li { 
    display: block; 
    float: left; 
    padding: 0; 
    padding - left: 10 px; 
    margin: 0; 
}# 
navigation li a { 
    display: block; 
    padding - right: 20 px; 
    color: $NavigationAColor[#ff6600]; 
    font - size: $NavigationFontSize[14 px]; 
    font - family: paladins; 
    font - weight: 500; 
    float: left; 
    text - decoration: none; 
    cursor: pointer; 
    line - height: 2.6; 
    background - image: $NavigationBGImage[url(images/navigationSeprator.png)]; 
    background - repeat: $NavigationBGRepeat[no - repeat]; 
    background - position: $NavigationBGPosition[right center]; 
}# 
navigation li: hover a, #navigation li.selected a, #navigation li.active a { 
    color: rgb(8, 8, 8, 0.8); 
    background - color: $NavigationBGSelectedColor[transparent]; 
    background - image: $NavigationBGSelectedImage[url(images/navigationSeprator.png)]; 
    background - repeat: $NavigationBGSelectedRepeat[no - repeat]; 
    background - position: $NavigationBGSelectedPosition[right center]; 
}# 
navigation li: last - child a { 
    background - image: $NavigationBGSelectedImage[none]; 
}# 
navigation li a span { 
    float: left; 
}# 
navigation li.navArrow a em, #navigation li: hover.navArrow a em, #navigation li.selected.navArrow a em, #navigation li.selected.navArrow a em { 
    background: url(images/navArrow.png) no - repeat 0 0; 
    display: block; 
    float: left; 
    height: 8 px; 
    width: 10 px; 
    margin: 18 px 0 0 10 px; 
}# 
navigation li: hover.navArrow a em, #navigation li.selected.navArrow a em, #navigation li.active.navArrow a em { 
    background: url(images/navArrowHover.png) no - repeat 0 0; 
} 

    HTML Code 

    <div class="themeSocialandSearchContainer"> 
    <div class="themeWidth"> [search start] 
     <div class="themeSearchContainer"> [searchform start] 
      <div class="themeSearchBox"> ${searchinput} ${searchbutton}</div> 
      [searchform end] </div> 
     [search end] [socialicon start] 
     <div class="themeSocialIconContainer"> 
      <div class="themeSocialiconArea">${socialicon}</div> 
     </div> 
     [socialicon end] 
     <div class="clearDiv"></div> 
    </div> 
</div> 
<div class="themeTopArea"> 
    <div class="themeWidth"> 
     <div class="themeBrandingArea"> 
      <div class="themeBrandingContainer"> 
       <div class="tableRow"> [logo start] 
        <div class="tableCell themeLogoOuterContainer"> 
         <div class="themeLogoArea">${logo 500x61}</div> 
        </div> 
        [logo end] 
        <div class="tableCell themeSitenameCaptionOuterContainer"> 
         <div class="themeBrandingContainer  themeSitenameCaptionInnerContainer"> 
          <div class="tableRow themeSitenameCaptionOuterContainer"> 
           <div class="tableCell themeSitenameCaptionContainer"> [sitename start] 
            <div class="themeSitename" data-zs- container="sitename">${sitename}</div> 
            [sitename end] </div> 

           <div class="tableCell themeNavigationAreaContainer">[navigation start] 
            <div class="themeNavigationArea"> 
             <div id="navigation">${navigation}</div> 
            </div> 
            [navigation end] </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="themeWidth"> 
    <div class="themeCaptionArea">[caption start] 
     <div class="themeCaption" data-zs-container="caption">${caption}</div> 
     [caption end]</div> 
    [banner start] 
    <div class="themeBanner">${banner 1000x460}</div> 
    [banner end] 
    <div class="themeContentContainer">[content start] 
     <div class="themeContentArea floatLeft" data-zs-container="content"> 
      [breadcrumb start] 
      <div class="themeBreadcrumb">${breadcrumb &ndash;}</div> 
      [breadcrumb end] ${content} </div> 
     [content end] [sidebar start] 
     <div class="themeSidebarArea floatLeft" data-zs-container="sidebar"> 
      <div class="themeSidebarAreaInner">${sidebar equalHeight}</div> 
     </div> 
     [sidebar end] 
     <div class="clearDiv"></div> 
    </div> 
</div> 
[footer start] 
<div class="themeFooterArea"> 
    <div class="themeWidth">${footer}</div> 
</div> 
</div> 
[footer end] [slideshow start] 
<div class="zs-slideshow-right-arrow"></div> 
<div class="zs-slideshow-left-arrow"></div> 

Answer 1

両方 themeLogoOuterContainerとthemeSitenameCaptionOuterContainerからテーブルセルのクラスを削除することで、自分の行の上にロゴとメニューを置く@ksavによって与えられた答えは、拡張として、あなたも均等にメニュー項目を配布することができますがこのCSSでページ本体の幅を横切っ：

#zpLogo { 
    height: auto; 
    width: 200%; /* however large you want */ 
} 

：あなたのロゴが大きくなるようにしたい場合にも

.themeSitenameCaptionOuterContainer { 
    width: 100%; 
} 

.themeNavigationAreaContainer { 
    width: 100%; 
} 

.themeNavigationArea { 
    width: 100%; 
} 

#navigation { 
    display: table; 
    width: 100%; 
} 

#nav-top { 
    display: table-row; 
} 

#nav-top > li { 
    display: table-cell; 
    width: calc(100%/6 - 10px); /* 100% divided by 6 menu items, each with 10px padding-left */ 
} 

は、あなたはそれを、このCSSを与えることができます

ですが、より良い解像度で画像をアップロードしたい場合があります。

Answer 2

変更：

<div class="tableCell themeLogoOuterContainer"> 
    <div class="tableCell themeNavigationAreaContainer"> 

へ：

<div class="themeLogoOuterContainer"> 
    <div class="themeNavigationAreaContainer"> 

tablecellクラスでは、これらのdivにdisplay: table-cellのCSSルールを与えています。