0
美好的一天人们。我对编码世界有点新，并且在我的新网站的导航区域出现问题
。我使用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 –}</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>
非常感谢。我感谢你的意见。 – Del6609
为了添加这个CSS，我应该删除任何现有的代码吗？ – Del6609
您可以这样做，因为这可以让您的CSS加载速度更快，但考虑到文件的大小，这不应该是一个重大差异。相反，如果您只是将此代码放在文件的底部，则优先于具有相同选择器的任何先前样式。 – feihcsim