Menu/Navigation 位置

Question

大家好。我对编码世界有些陌生，并且有
我的新站点导航区域有问题。我使用 Zoho Sites 作为我的网站构建器，它们有很多 "built-in" CSS。我想要完成的是让我的 menu/navigation 运行页面 "top area" 的宽度，位于徽标下方。我也想增加徽标大小，但是，当我尝试这样做时，菜单会越来越小。目前，徽标和菜单并排放置。您可以在此处看到我现在所在的位置：http://realtimehockey2015.zohosites.com/ 我猜 Zoho 使用的代码正是让我感到困惑的地方。我敢肯定，对于你们大多数人来说，这很容易解决，但我似乎无法弄清楚。我已经玩弄代码几天了，就是想不通。因为这里整个CSS超过了30,000个字符的限制，所以我只post和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

变化：

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

至：

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

tablecell class 为这些 div 提供 CSS display: table-cell 规则。

Answer 2

作为@ksav 给出的答案的扩展，它通过从 both[= 中删除 tableCell class 将徽标和菜单放在它们自己的行上20=] 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 */ }

但您可能想要上传分辨率更高的图片。

Menu/Navigation 位置

Menu/Navigation Position

html

css

navigation