Question

嘿，让我们谈谈将我的标题和顶部菜单宽度更改为与导航和主包装器相同的宽度？中间的一切都是我能说的。

图片：http://imagizer.imageshack.us/v2/320x240q90/924/fAPEnE.jpg

到目前为止，这就是我所拥有的自定义CSS：

/* Structure */
#wrapper    { min-height: 100%; position: relative; padding: 0.5px 0 20px; }
#main   { padding: 10px 10px 0; }

这非常接近正确：

#top-menu {
min-width: auto !important;
max-width: 980px !important;
margin: auto !important;
}

#header {
position: relative !important;
min-width: auto !important;
padding: 0 10px 0 !important;
max-width: 960px !important;
margin: auto !important;
}

#nav {
min-width: auto !important;
max-width: 982px !important;
margin: auto !important;
border-bottom: 1px solid #CCC !important;
}

#mega-menu-wrap-top-menu {
clear: both !important;
min-width: auto !important;
max-width: 980px !important;
margin: auto !important;
}

原创CSS：

/* Structure */
#wrapper                { min-height: 100%; position: relative; padding: 20px 0; }
#main                   { padding: 10px 10px 0; }

/* Header */
#header                 { min-width: 990px; padding: 0; }
#branding               { width: 980px; margin: 0 auto; padding: 0; }
.logo                   { max-width: 590px; float: left; padding: 30px 0 34px 10px; }
.blog-name              { margin: 0 0 3px; line-height: 1em; display: block; }
.blog-description       { line-height: 1em; display: block; margin: 0; padding: 3px 0 0; }

/* Menus */
.sf-menu, .sf-menu *  { list-style: none; margin: 0; padding: 0; }
.sf-menu  { line-height: 1; }
.sf-menu ul  { position: absolute; left: -999em; width: 11em; z-index: 100; }
.sf-menu ul li  { width: 100%; }
.sf-menu li:hover  { visibility: inherit; }
.sf-menu li  { float: left; position: relative; }
.sf-menu a  { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul  { left: 0; top: 2.8em; z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul  { top: -999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul  { left: 11em; top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul  { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul  { left: 11em; top: 0; }
.sf-shadow ul { background: url(../images/shadow.png) no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; }
.sf-shadow ul.sf-shadow-off { background: transparent; }

#top-menu, #nav  { min-width: 990px; }
#top-menu-content, #nav-content  { margin: 0 auto; width: 978px; }
#top-menu-content .sf-menu, #nav .sf-menu  { float: left; line-height: 1.1; }

.quick-nav  { float: right; list-style: none; margin: 0 10px 0; padding: 0; }
.quick-nav li  { float: left; display: inline; }

/* Search Bar */
#searchbar  { float: right; overflow: hidden; margin: 25px 10px 0 0; }

HTML：

#main {
width:960px;
margin:0 auto;
position:relative;
}
#container {
width:660px;
float:left;
}
#content {
margin:0;
width:660px;
overflow:hidden;
}
.main-aside {
width:300px;
float:right;
position:relative;
}
#secondary {
clear:right;
}
#subsidiary {
width:960px;
margin:0 auto;
overflow:hidden;
}
#subsidiary .aside {
width:300px;
float:left;
margin:0 20px 0 0;
}
#subsidiary #third {
margin:0;
}
#main .module, #main .single-post {
margin-right: 10px;
}
.fixed {
width:960px; 
margin:0 auto;
}

提前致谢。

标题，导航和顶部菜单到相同的宽度。 CSS和HTML推荐？

0 个答案: