菜單/導航位置

美好的一天人們。我對編碼世界有點新，並且在我的新網站的導航區域出現問題
。我使用Zoho Sites作爲我的網站建設者，他們擁有「內置」CSS。我試圖完成的是讓我的菜單/導航運行頁面「頂部區域」的寬度，在徽標下面。我也想增加徽標大小，但是，當我嘗試這樣做時，菜單會越來越多地縮小。目前的標誌和菜單是並排的。你可以看到我現在在哪裏：http://realtimehockey2015.zohosites.com/我猜Zoho使用的代碼是令我感到困惑的。我相信對你們中的大多數人來說這是一個簡單的解決方法，但我似乎無法弄清楚。我已經玩了幾天的代碼，只是無法弄清楚。由於整個CSS超過了30,000個字符限制，因此我只會發布處理頂部區域和導航的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>

來源

2016-07-12 Del6609

進行了擴展，通過@ksav給出了答案，這使標誌和菜單上自己的行通過去除的TableCell的類都的themeLogoOuterContainer和themeSitenameCaptionOuterContainer，還可以均勻地分佈在菜單項在頁面體的寬度與此CSS：

.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：

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

但您可能需要上傳更高分辨率的圖像。

來源

2016-07-12 21:17:29 feihcsim

非常感謝。我感謝你的意見。 – Del6609

爲了添加這個CSS，我應該刪除任何現有的代碼嗎？ – Del6609

您可以這樣做，因爲這可以讓您的CSS加載速度更快，但考慮到文件的大小，這不應該是一個重大差異。相反，如果您只是將此代碼放在文件的底部，則優先於具有相同選擇器的任何先前樣式。 – feihcsim

變化：

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

到：

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

的tablecell類是給這些div的display: table-cell CSS規則。

來源

2016-07-12 20:50:55 ksav

太棒了。那樣做了。非常感謝您的幫助。 – Del6609

菜單/導航位置

回答

相關問題