質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

background-color が変わらない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 10K+

TomofumiKimura

score 25

ul list のbackground-color が変わりません。どうしてなのでしょうか?

<!-- Assignment 18 % COMP112 Tomofumi Kimura index page-->
<!DOCTYPE html>
<html lang="en">
    <head>
    <!-- kimto341 child care-->
        <meta charset = "UTF-8">
        <link rel="stylesheet" type = "text/css" href="style.css">
        <title>Child Care HomePage</title>
    </head>
    <body>
    <!-- Main Heading-->
    <div id = "header">
    <h1>Welcome to Mama Bear Child Care</h1>
    </div>
    <!-- Navigation Area -->
    <div id = "nav">
    <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href = "philosophy.html">Our Philosophy</a></li>
        <li class = "dropdown"><a href="javascript:void(0)" class = "dropbtn">Our Centre</a>
        <div class = "dropdown-content">
        <a href="accelerated_programme.html">Mama Bear Accelerated Programme</a>
        <a href="environment.html">Our Environment</a>
        <a href="goals.html">Our Goals</a>
        </div>
        </li>


        <li><a href="childs_day.html">The Childs Day</a></li>
        <li><a href="settling.html">Settling in</a></li>
        <li><a href = "staff.html">Our Staff</a></li>

    </ul>
    </div>

    <!-- Contact Area -->
    <div id = "contacts">
        <h3 id="contact_us">Contact Us</h3>
        <h4>If you have any questions about the Mama Bear please contact us at:</h4>
            <ul>
                <li>enquiries@mamaBear.co.nz</li>
                <li>123 Salmon Lake Lane</li>
                <li>Big Bear City</li>
            </ul>
    </div>
    <!-- Main Area -->
    <div class="content">
        <h2>Our Philosophy</h2>

        <ul id = "philo_list">
            <li>We believe in positive respectful partnerships between <br>children, families, caregivers and teachers where we value our community's diversity.</li>
            <li>We aim to support children's learning through a stimulating prepared environment that nurtures and develops dispositions for learning and provides opportunities for success, challenges, individual interests, and freedom of choice.</li>

            <li>Our community fosters contextual, collaborative and reciprocal learning, where teachers are facilitators, carers and friends of the children.</li>
            <li>We empower children to be independent, competent, confident, compassionate and responsible human beings, and most importantly to have fun in the process.</li>

        </ul>

    </div>
    <!-- Footer area -->
    <div id = "footer">
        <footer>This website was created for a University project.  The content is largely fictional and no services are actually being offered.</footer>

    </div>

    </body>
</html>
/* COMP112 Assignment 18% tkimura Tomofumi Kimura stylesheet*/ 

body{
    background-color:rgb(224, 200, 202);
    margin:0px;

}

/* main heading*/
#header h1{
    background-color:red;
    text-align: center;
    width:100%;
    margin:0px;
    padding:20px;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
/* Navigation whole area */
#nav{
    background-color:rgb(87, 209, 204);
    position:fixed;
    top:75px;
    left:0;
    right:0;
    width:100%;
    margin:0px;
}
/* Navigation whole ul ara */
#nav ul{
    max-width:100%;
    list-style-type:none;
    padding:0;
    margin-top:0px;
    margin-left:150px;
    margin-right:auto;
    margin-bottom:auto;
    overflow:hidden;
    background-color:inherit;
}
/* Navigation list area*/
#nav li{
    float:left;


}

/* Navigation list link, DropDown menu*/
#nav li a, .dropbtn{
    display:block;
    color:inherit;
    text-align:center;
    padding:14px 30px 10px 30px;
    text-decoration: none;


}
/* when user move the pointer to the place */
#nav li a:hover, .dropdown:hover .dropbtn{
    background-color:yellow;
}

#nav li.dropdown{
    display:block;
}
/* drop down area*/
.dropdown-content{
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    min-width:100px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* drop down list element*/
.dropdown-content a{
    color:black;
    padding:12px 16px;
    text-decoration: none;
    display:block;
    text-align:left;
}
/* when mouse is over the drop down list element */
.dropdown-content a:hover{
    background-color:#f1f1f1;
}

.dropdown:hover .dropdown-content{
    display:inline;
}

/* Contact Us Area*/

#contacts{
    position:fixed;
    right:10px;
    float:right;
    width:220px;
    margin-left:20px;
    border-radius:25px;
    border:2px solid #73AD21;
    background-color:yellow;
    padding:10px;
}
#contact_us{
    color:red;
}

/* Main Area*/
.content{
    margin-top:170px;
    margin-right:20px;
    width:1100px;
    height:auto;

}


/* h2 Mama Bear CHild Care heading */
.content h2{
    text-align: center;
    color:rgb(0, 102,255);
}
.content h3{
    text-align: center;

}
.content h4{
    text-align:center;

}
.content span{
    color:red;
}
#attention{
    text-align:center;
    background-color:rgb(153,204,255);
    border:dotted 2px ;
    padding-left:-10px;
    border-radius: 40px;
}

/* Education Services UList*/
.content ul{
    margin:auto;
    border-radius: 50px;
    border:2px solid #73AD21;
    padding:40px;
    padding-top:10px;
    width:400px;
    height:140px;
    background-color:rgb(153,204,255);
    list-style-image: url('../Images/list_image/icn_12.gif');
}
.content li{
    padding:20px;
}
/* Philosophy page List */
#philo_list{
    border-radius:50%; 
    background-color:white;
    width:600px;
    height:400px;
}

/* Footer area*/

#footer{
    margin-top:30px;
    position:relative;
    background-color:rgb(87, 209, 204);
    color:inherit;
    padding:30px;
    width:100%;
    height:10px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2017/05/16 10:37

    具体的にどの箇所が想定と違っているのでしょうか?

    キャンセル

  • TomofumiKimura

    2017/05/16 10:48

    あ、すいません。philo_list の中の背景がwhite になってるはずなのですが。青になってしまいます。

    キャンセル

  • Zuishin

    2017/05/16 11:02

    Chrome で見てみましたが、楕円の中の話ですよね? 白いですよ。試しに background-color:white; をコメントアウトしたら青くなりました。

    キャンセル

  • TomofumiKimura

    2017/05/16 11:05

    あれ、おかしいですね、なぜか自分のは青のママなんですけど

    キャンセル

回答 1

checkベストアンサー

+1

違う html を開いているか、書き換える前のキャッシュを見ているのではないですか?
まず URL を見て正しいかどうか確かめてください。
次に更新して変わらないかどうか確かめてください。

Chrome でしたら、F12 を押すとデベロッパーツールが開きます。
そこで Elements タブを選択してその中から該当タグを選択し、Styles を見てください。
どうなっていますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/16 11:31

    なぜか、background-color:white; を消してまたそこにbackground-color:white; を打ったら白になりました。今度からはZuishinさんの手順をお手本に間違いを直していこうと思います。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る