Question

美好的一天。我对编码世界有些新意，而且我有一个我的新网站导航区域的问题。我使用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>

Answer 1

变化：

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

为：

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

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

Answer 2

作为@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 */
}

但您可能希望上传更高分辨率的图片。

菜单/导航位置

2 个答案: