メニュー部分の背景色と余白の色を分けたい
-
■メニューボタン部分の背景色横一列部分(青)と
■ボディ余白部分の背景色(白)を
以下のサイトのように分けたいのですが、
http://juhyougo.co.jp/
うまく行きません。対象のサイトのスタイルシートは以下の内容です。
/*
*/
@import url(“../twentyten/style.css”);
body {
color:#000;
background:#FF0000;/*–★この指定色がメニュー部分と背景余白部分の色になる★–*/
word-wrap:break-word;
}/*– link settings –*/
a:link,
a:visited {
color: #336699;
text-decoration: none;
}
a:hover,
a:active {
color: #0077CC;
text-decoration: underline;
}hr.clear
{
width:1px;
height:1px;
color:#FFFFFF;
border:none;
clear:both;
}/* Layout
————————————————————– */
#header ,
#breadcrumbs ul ,
#wrapper {
width:970px;
margin:0 auto;
padding:0;
background:#;
}
#header ,
#wrapper {
background:#FFF;
}
#wrapper {
padding-top:20px;
}/* Header
————————————————————– */
#masthead {
text-align:right;
position:relative;
}
#masthead p#site-description {
width:auto;
font-size:12px;
margin:0;
padding:0;
position:absolute;
top:5.9em;
right:10px;
}
#site-title {
width:auto;
font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;
font-size:24px;
font-weight:900;
padding:0.5em 0;
/*/ reset /*/
margin:0;
line-height:normal;
background:#;
}
/*– Nav –*/
.nav {
font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;
font-weight:900;
background-color:#900505;
float:right;
/*/ reset /*/
margin: 0;
}
.nav li {
width:auto;
text-align:center;
float:left;
/*/ reset /*/
list-style:none;
}
.nav li:hover {
position:relative;
}
.nav li:hover a {
background:#900505;
position:relative;
}
.nav li a {
width:auto;
color:#FFF;
text-decoration:none;
border-right:1px solid #7D0303;
padding:20px 20px 20px 20px;
display:block;
}
.nav li:first-child a {
border-left:1px solid #7D0303;
}
body.home .nav li.home a ,
.nav li:hover ,
.nav li a:hover ,
.nav li.current-menu-item a ,
.nav li.current_page_item {
color:#330000;
background:#FF9933;
}/*– Nav child –*/
.nav li ul {
display:none;
}
.nav li:hover > ul {
width:120%;
display:block;
position:absolute;
top:100%;
left:0px;
z-index:10;
/*/ reset /*/
margin: 0;
}
.nav li ul li {
width:120%;
}
.nav li ul li a {
color:#FFF;
border-left:1px solid #7D0303;
border-bottom:1px solid #7D0303;
display:block;
}
.nav li ul li a:hover {
color:#330000;
background:#FF9933;
}
.nav li ul li ul {
display:none;
}
.nav li ul li:hover > ul {
top:0;
left:-143%;
z-index:10;
}/*– Breadcrumbs list –*/
#breadcrumbs {
font-size:12px;
background:#F5F5F5;
padding:1em 0px 10px 0px;
clear:both;
}
#breadcrumbs li {
display:inline;
}/*– Header image –*/
#head_img {
margin:0 auto;
}/* Main
————————————————————– */
#main {
width:970px;
padding:20px 0px 0px 0px;
}/*– Container –*/
#container {
width:700px;
float:left;
}/*– Primary, Secondary –*/
#primary,
#secondary {
width:210px;
float:right;
}/*– Header image –*/
#container div {
margin:0 0 1em;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
width:auto;
color: #000;
margin: 0 0 10px 0;
line-height: 1.5em;
border:1px solid #E8E8E8;
border-bottom:none;
padding:7px 10px 7px 10px;
background:url(images/dot_border.gif) repeat-x left bottom #F7F7F7;
float:none;
}
.entry-utility {
margin:0px 0px 20px 0px;
}/* Front Page
————————————————————– */
#site_content_nav {
margin:0px 0px 20px 0px;
padding:10px 10px 10px 10px;
background:url(images/dot_back.gif);
}
#site_content_nav ul {
width:100%;
margin:0px 0px 0px 0px;
background:#FFF;
display:table;
}
#site_content_nav li {
width:23%;
*width:22%;
margin:0px 1%;
padding:10px 0;
list-style:none;
float:left;
}
#site_content_nav li h2 {
margin:0px 0px 5px 0px;
border:none;
padding:0px 3px 8px 3px;
background:url(images/dot_border.gif) repeat-x left bottom;
}
#site_content_nav li h2 a {
padding:0px 0px 0px 25px;
background:url(images/icon/icon_01.gif) no-repeat left center;
}
#site_content_nav li p {
margin:0px 0px 0px 10px;
}.go_backnumber {
text-align:right;
}/* =Content
————————————————————– */
.home .sticky {
/*/ reset /*/
background:none;
border-top:none;
margin-left: -20px;
margin-right: -20px;
padding:0;
}/* Side
————————————————————– */
#primary h3,
#secondary h3 {
margin:0px 0px 7px 0px;
padding:7px 3px 7px 3px;
background:url(images/dot_border.gif) repeat-x left bottom;
}
/*– Header image –*/
#searchform label {
margin:0px 0px 7px 0px;
padding:7px 3px 7px 3px;
background:url(images/dot_border.gif) repeat-x left bottom;
}/* Footer
————————————————————– */
#footer {
width:970px;
padding:20px 0px 0px 0px;
clear:both;
}
#colophon {
width:970px;
border-top:4px solid #300000;
padding:20px 0px 0px 0px;
}
- トピック「メニュー部分の背景色と余白の色を分けたい」には新たに返信することはできません。