ここから本文です

HTML、CSS共に初心者ですがよろしくお願い致します。 クラス名topguideitemが付...

vin********さん

2013/3/2515:31:15

HTML、CSS共に初心者ですがよろしくお願い致します。

クラス名topguideitemが付いている要素に対して横に一列で並べて背景色を付けてポインタを置くと背景色が変わるようにしたいのですが、上手くいきません。

なにが問題か自分ではわからないので、以下に書いておきます。
お手数ですが、回答よろしくお願いします。それともっとこうしたほうが良いとか、文法的におかしいとか、指摘していただけますと幸いです!これを機に色々学ばせていただきたいと考えておりますので、何卒よろしくお願い致します。


/*HTML*/

<!DOCTYPE HTML>
<html lang="ja">
<meta charset="UTF-8">
<head>
<link rel="stylesheet" type="text/css" href="css.css" media="all">
<title>タイトル</title>
</head>
<body>
<div id="pagebody">
<header>
<h1><a href="index.html" class="top">HPタイトル</a></h1>
</header>
<nav>
<ul id="topguide">
<li class="topguideitem"><a href="zzz1">xxx1</a></li>
<li class="topguideitem"><a href="zzz2">xxx2</a></li>
<li class="topguideitem"><a href="zzz3">xxx3</a></li>
<li class="topguideitem"><a href="zzz4">xxx4</a></li>
<li class="topguideitem"><a href="zzz5">xxx5</a></li>
<div class="c-both"></div>
</ul>
</nav>
<section></section>
<br><br>
<footer>
<p></p>
</footer>
</div>
</body>
</html>

/*CSS*/

@charset "UTF-8";
body {
margin:0px;
padding:0px;
background-color:#c0c0c0; /*グレー*/
}

div#pagebody {
margin:30px 45px;
padding:0px;
line-height:1.5em;
font-weight:normal;
font-style:normal;
background-color:#fffafa; /*スノー*/
text-align:center;
}

.c-both { clear: both; }

a.nav { /*リンクされた文字*/
text-decoration:none;
color:#FFFFFF;
}

nav {
margin:0px;
padding:0px;
}

ul#topguide{
margin:0px;
padding:0px;
}

ul#topguideitem li {
list-style:none;
float:left;
width:20%;
background-color:#7CFC00;
}/*ここがうまくいかないです。*/

li.topguideitem:hover {
background-color:#228B22;
}/*ここもうまくいきません*/

p {
display:inline;
}

footer {
background-color:#7CFC00;
color:#FFFFFF;
margin:2px;
padding:2px;
line-height:normal;
}

補足早速ご回答頂き、ありがとうございます!

回答頂けた通りに変更してみますと、ワイズ100%でリストの5つの要素が順々に縦に細くならんでしまいました。
無論タイプミス等はチェックしました。

ちなみに今現在はFFFTPに上げる前にフォルダ内で作成、確認をしております。それが問題ですか?

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
194
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

sit********さん

リクエストマッチ

編集あり2013/3/2516:54:06

>vintageclotheshichiさん

>背景色が変わるようにしたいのですが、上手くいきません。

id名を間違えています。
× ul#topguideitem li {
○ ul#topguide li {

色変更は優先度の問題。
ul#topguide li { のほうで背景色が指定してあるので。
× li.topguideitem:hover {
○ ul#topguide li.topguideitem:hover {

clearがうまくできていないので、こうしたほうがいいかも。
(section に文字を入れてみると分かるかと)
ul#topguide{
margin:0px;
padding:0px;
overflow:auto; /*float解除の簡易指定*/
border:3px solid #333; /*表示確認用*/
}
li.topguideitem {
list-style:none;
float:left;
width:20%;
background-color:#7CFC00;
}
li.topguideitem:hover {
background-color:#228B22;
}

<div class="c-both"></div> は削除。

あと、
<meta>は<head>~</head>の中に書きましょう。

<ul></ul>の中に<div>は入れられません。
(<li></li>の中に<div>は入れられます。)
<div class="c-both"></div> は<li class="c-both"></li> に変えるか、上記のように削除を。

<br><br>や<p></p>は削除。余白はスタイルシートのmarginかpaddingで調整。


>それが問題ですか?

修正したcssの問題だと思います。

質問した人からのコメント

2013/3/25 19:19:43

降参 本当にありがとうございました。
しっかりとした文法を学ぶために精進致します<m(__)m>

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる