list-styleの変更がうまくできない

締切済

質問者：sousisouai
質問日時：2010/03/27 10:16
回答数：5件

せっかく画像も用意したのに、画像も表示されたのに、
http://hiromitsu.s220.xrea.com/basket.jpg
でも、表示されたら、なんか画像が変形してるんです。
http://hiromitsu.s220.xrea.com/index.html
（リンク先はまだ作ってません。）
なんでこんなことが起こるんですか？
なにが悪いですか？
よろしくお願いします。
sources
[css]

font-family: "MS Pゴシック";
font-style: nomal;
font-size:14pt;
line-hight: 150px;
background-image : url(basket.jpg) ;
background-position : left ; /* 位置は左端の真ん中 */
background-repeat : no-repeat ; /* 背景だけど繰り返し表示しない */
padding-left : 100px ; /* 「画像の横幅+マーカーとの距離」を左方向に空ける */
}

[html]
<dl>
<dt>
<ul>
<li><a href="xxx.html">理念</a></li>
<li><a href="yyy.html">製品</a></li>
<li><a href="zzz.html">プラン</a></li>
<li><a href="aaa.html">ご相談</a></li>
<li><a href="bbb.html">Q＆A</a></li>
<li><a href="index.html">home</a></li>
</ul>
</dt>
<dd>
...
</dd>
</dl>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2010/03/28 00:30

ちょっと時間が取れたので、HTMLとCSSを書いてみました。

私は、ナビゲーションリンクはページ上部に置くことが多いので、縦並びはあまりなれていない。
★HTML4.01strict
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )で検証済み
★CSS2
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )で検証済み
★IE8,Opera9.26,GoogleChrome4.1、safari4.05,firefox3.5,firefox3.6で確認済み
★携帯端末を考慮する場合は、CSSの一部を@media screen{}で囲むか、media別CSSを用意すること。
★スタイルシート解除テスト
★HTML本体部分のタブは全角スペースで置き換えてあります。(必ずタブに変換してテスト)
★ちょっと遊びで余分な物が入ってます。試してみたいことがあってね。

☆注意点
・ナビゲーションリンクは、HTML5への変更がしやすいようにclass.navとしてあります。
・本文の高さは、内容が少ない場合でも、ナビゲーションリンクの高さだけは確保してあります。
・マウスオーバー時に、A要素の背景に別途、透明背景の透かし背景を用意してください。smoke.gif16px×16pxくらいでよい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ＡＡＡＡＡＡＡＡチーム</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">

</style>

</head>
<body>
<div>
　<div id="top">
　ロゴなど
　</div>
　<h1>ＡＡＡＡＡＡＡＡチーム</h1>
　<div class="bodyText">
　　<p>この本文部分は、標準的なウィンドウサイズで幅640px、幅の広い、あるいは狭いウィンドウでは最小400px、最大840pxで中央に表示されます。</p>
　　<p>あああああああああああああ<strong>あああああああああ</strong>
　　ああああああああああああああああああああああ</p>
　　<p>ああああああああああああああああああああああああああ
　　あああああああ</p>
　　<p>あああああああああああああああああああああああああああ
　　あああああああああああああああああああああ</p>
　　<ul class="nav">
　　　<li><a href="xxx.html">理念<span>私たちの理念とは</span></a></li>
　　　<li><a href="yyy.html">製品<span>製品一覧</span></a></li>
　　　<li><a href="zzz.html">プラン</a></li>
　　　<li><a href="aaa.html">ご相談</a></li>
　　　<li><a href="bbb.html">Q＆A</a></li>
　　　<li><a href="index.html">home</a></li>
　　</ul>
　<hr>
　<div class="fukidashi">
　　たとえば？（ここにポインター:カソールを合わせる）
　　<div>
　　ここに不満を理解する箇条書きを挿入するところです。
　　</div>
　</div>
　</div>
</div>
</body>
</html>

- 0
- 件

通報する

No.4

回答者： u2122
回答日時：2010/03/27 23:20

＞1.文字と画像が揃わない。

でしたら、CSSのli　に、

padding-top:20px;/* 数字は自分で調整してください */

を入れてあげれば、上にスペース（margin）が空くので、文字が画像の真ん中あたりにきます。

＞2.本来右側に持って期待文章が下に流れている。
は何処の部分のことでしょうか？　dl　で囲われている部分すべてを横一列に並べたいのでしょか？

［例1］
理念製品プランご相談 Q＆A home

［例2］
* 理念　　私たちは、現在の混沌とした情勢に絶えられずに立ち上がった、少数精鋭の集団です。
　　* 製品　　　私たちの言う生活向上では、命健康人心仕事の全てを、維持増進するこ・・・・　
* プラン
* ご相談
* Q＆A
* home

例1のように横一列で並べたいのか、例2のように縦一列に並べたリストの横に文字を並べたいのかで対応が違います。どんなふうにしたいか教えて下さいな。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2010/03/27 21:31

いくつか確認したいことがあります。

＞1.文字と画像が揃わない。
＞2.本来右側に持って(いきたい)文章が下に流れている。
　()は私が訂正？

　これは、<dd>内に書かれているすべての文章という意味ですね。
　一つ一つの文章が、リストの項目に対応しているのではないということですね。

＞これを実現するために、適切なｄｌに変わるタグはなんでしょうか？
　ここは、検索エンジンはむろん、すべてのユーザーエージェントが情報を正確に理解できることがHTMLの基本ですから、出発点が違う。

＞拝啓画像にしているのは、list-style-image:が、うまく動作しなかったのです。
　list-style:imageをはじめとして、リストの細かい制御手順はCSSの仕様書でも詳しく規定されていないためブラウザによってさまざまに解釈・表示されます。特にmarginやpadding。そのため、現状では、display:blockでブロックにする方が確実です。

該当部分のマークアップは、次のようにするのがスマートでしょう。ナビゲーションリンクは、HTML5で導入されるnav要素を見越して、class="nav"でマークアップしてみました。
<body>
　<div>
　　<div id="top">
　　ロゴなど
　　</div>
　　<h1>ＡＡＡＡＡＡＡＡチーム</h1>
　　<div class="bodyText">
　　　<p>私たちは、・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</p>
　　　<p>・・・・・・・・・・・・・<strong>・・・・・・・・・</strong>・・・・・・・・・・・・・・・・・・・・・・</p>
　　　<p>・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・<p>
　　　<p>・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</p>
　　　<ul class="nav">
　　　　<li><a href="xxx.html">理念</a></li>
　　　　<li><a href="yyy.html">製品</a></li>
　　　　<li><a href="zzz.html">プラン</a></li>
　　　　<li><a href="aaa.html">ご相談</a></li>
　　　　<li><a href="bbb.html">Q＆A</a></li>
　　　　<li><a href="index.html">home</a></li>
　　　</ul>
　　　<hr>
　　　<div class="fukidashi">
　　　　たとえば・・
　　　　<div>
　　　　ここに不満を理解する箇条書きを挿入するところです。
　　　　</div>
　　</div>
</body>

- 0
- 件

通報する

No.2

回答者： u2122
回答日時：2010/03/27 11:59

［原因］

高さが指定されていない為に、画像の上のみしか表示されていないからだと思います。

あとsousisouai 様はリストの左側に画像を付けたいんですよね？
でしたら、このCSSではリストではなく、背景（background）に画像がくる設定になっています。

［CSS］
body{
font-family: "MS Pゴシック";
font-style: nomal;
font-size:14pt;
line-hight: 150px;
}
ul{
list-style:none;
margin-left:100px;
}
li{
background-image:url(./basket.jpg);
height:67px;/* 画像の高さを指定→これで画像が全部表示されます */
background-repeat:no-repeat;/* 画像の繰り返しを防止 */
padding-left:70px;/* 画像横幅分右に移動するので、画像と文字が重なり合うのを防止します */
}

としてみてはいかがでしょうか？

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2010/03/27 10:57

CSSを適用する前に、まずHTMLをきちんと治しましょう。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )］より

CSSの修正はそのあとでないと・・
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )

DTにはinline要素しか含むことができない。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
<!ELEMENT DT - O (%inline;)*
　　　　　　　　　　　　　^^^^^^^^^
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Lists in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

____firefox+HTML Validator
チェック：HTML Validator
----------------------
line 1 column 1 - 警告: missing <!DOCTYPE> declaration
line 41 column 1 - 警告: <marquee> is not approved by W3C
line 46 column 1 - 警告: missing <dd>
line 54 column 1 - 警告: discarding unexpected </dt>
line 5 column 1 - 警告: <script> inserting "type" attribute
line 38 column 11 - 警告: <iframe> proprietary attribute "allowtransparency"
line 38 column 233 - 警告: <img> lacks "alt" attribute
line 45 column 1 - 警告: trimming empty <dt>
line 58 column 55 - 警告: trimming empty <p>
情報: Document content looks like HTML Proprietary
0 個のエラー / 9 個の警告

この回答への補足

確かに、私も本則ではないと思いながらなんとなく使っていました。
そこで、今出ている問題がHTMLを正しくすることで解決されるのかどうかも含めて質問したいと思います。
画像が圧縮されることはno.2で解決しました。
でも、
1.文字と画像が揃わない。
2.本来右側に持って期待文章が下に流れている。

これを実現するために、適切なｄｌに変わるタグはなんでしょうか？
また、拝啓画像にしているのは、list-style-image:が、うまく動作しなかったのです。
その書き方にも重要なヒントがありますか？
よろしくお願いします。

補足日時：2010/03/27 15:18

通報する