• ■メニューボタン部分の背景色横一列部分(青)と
    ■ボディ余白部分の背景色(白)を
    以下のサイトのように分けたいのですが、
    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;
    }

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • 対象のサイト、の URL をお知らせいただくと話が早いです。

    トピック投稿者 hi-roki

    (@hi-roki)

    kz様

    コメントありがとうございます。
    以下が対象のサイトです。
    あえて違いが分かるよう赤色にしています。
    http://gakuseistation.com/

    こんにちは
    以下のようなのでは、どうでしょう

    <div style="background:#fff;">
    <div id="wrapper" class="hfeed">
    
    省略
    
    </div><!-- #wrapper -->
    </div>

    いろいろやり方はあると思いますけど、パッと見、全体の背景は白にしておいて、
    「header」と「wrapper」を分けてやればいけそうな気がするけどダメでしょうか?

    #header {
        margin:0 auto;
        padding:0;
    }
    #breadcrumbs ul ,
    #wrapper {
        width:970px;
        margin:0 auto;
        padding:0;
    }
    #header {
        background:#ff0000;
    }
    #wrapper {
        background:#fff;
    }
    トピック投稿者 hi-roki

    (@hi-roki)

    nobita様

    アドバイスありがとうございました。
    試してみましたが駄目でした。

    トピック投稿者 hi-roki

    (@hi-roki)

    hikkomijian様

    アドバイスありがとうございました。
    現在の設定はhikkomijian様にご教授いただいた設定にしております。

    ボディ部分は白になりましたが
    メニューボタンの背景色は赤に反映されていません。

    このテンプレートは
    ボディ横の余白部分とメニューボタン背景色が連動している様子です。。。

    hi-Rokiさん

    「どういう風にだめだったか」教えてくれると、喜びます

    style.css 50行目の #header に height:58px;overflow:hidden; を加えると良いかもです。

    #header {
      background:#FF0000;
      height:58px;      /* コレを追加◎ */
      overflow:hidden;  /* または、コレを追加! */
    }

    ※IEは未検証。

    トピック投稿者 hi-roki

    (@hi-roki)

    kz様

    おかげさまで、かなり近づいてきました。
    http://gakuseistation.com/
    現在のコードは以下のようになっています。

    ————————————————————– */
    #header {
    margin:0 auto;
    padding:0;
    }
    #breadcrumbs ul ,
    #wrapper {
    width:970px;
    margin:0 auto;
    padding:0;
    }
    #header {
    background:#FF0000;
    height:58px; /* コレを追加◎ */
    }
    #wrapper {
    background:#FFF;
    }
    #wrapper {
    padding-top:20px;
    }

    /* Header
    ————————————————————– */

    以下の部分を抜いていますが、入れると

    overflow:hidden; /* または、コレを追加! */
    学生だから出来ること 学生のうちに始めよう!
    の一文がきえてしまうだけなので外しました。

    #header {
    margin:0 auto;
    padding:0;
    }

    上記の部分を入れると、
    現在のようにタイトルとメニューボタンが左右に離れて、全体的に赤く表示されますが
    上記部分を変えずに

    #header ,

    にしておくと、
    【学生Station】という部分からメニューボタンにかけて赤くなり、余白が白のままになります。

    あとはどのようにしたいのでしょう?
    一番上の「サイト制作」とか「ラジオ」とかの部分も赤にしたいのでしょうか?

    ということでしたら、相変わらず未検証で申し訳ないのですが、メニュー部分のソースを見ると、

    id=”header”
    の中に
    id=”masthead”
    があって、その中に
    class=”nav”
    があります。なのでその辺り「.nav」などを見つけていじってやれば良いかと。

    例えば現在のエンジ色っぽい部分を赤にしたいなら
    「#900505」を見つけて「#ff0000」に。
    マウスが乗った時の色も変えたいなら
    ff9933を他の色に。
    といった具合ではないでしょうか。

    「.nav」が付いてる部分や「.nav li:hover a」の所ですかね。

    style.css 63行目に「幅」と「中央寄せ」を追加:

    #masthead {
    position:relative;
    text-align:right;
    width:970px;    /* コレを追加! */
    margin:0 auto;  /* コレを追加! */
    }

    でどうでしょう。

    #なんで margin:0 auto; で中央寄せやねん、わかりにくいぞCSS。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「メニュー部分の背景色と余白の色を分けたい」には新たに返信することはできません。