プロが教えるわが家の防犯対策術！

CSS：<ul>と<li>の間に「<!--」と「-->」を入れる以外でナビが崩れない方法は？

解決済

  • 質問者：touchy
  • 質問日時：
  • 回答数：3件

CSS：<ul>と<li>の間に<!--と-->を入れても、Dreamweaverでソースフォーマットの適用をおこなうとソースの改行が自動的に変わてしまうので、ナビゲーションの並びが崩れてしまいます。
適用は必要なので困っております。
ナビゲーションが崩れないほかの方法はないものでしょうか？

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： abril
  • 回答日時：

> <ul>と<li>の間に<!--と-->を入れても、Dreamweaverでソースフォーマットの適用をおこなうとソースの改行が自動的に変わてしまうので、ナビゲーションの並びが崩れてしまいます。



<ul>と<li>の間の改行のあるなしで何故崩れるのでしょう？あまりその様な状態が想像できませんが。
---------------------------------------------------------------------
<ul>
<li>ナビ1</li>←ここの改行の事ではなく？
<li>ナビ2</li>
…
</ul>
---------------------------------------------------------------------
ナビによくある<li>を横並びにしてぴったり並べるスタイルであれば、</li>と次の<li>の間の改行コードによる隙間を無くす為に取られる手法ですが。
もしこの<li>を横並びにさせる方法が"display: inline;"による場合であれば、その替わりに(displyは初期値のまま）"float: left;"を使用すれば改行コードがあっても隙間はなくなります。その替わり、floatを適切に解除する他の配慮が必要になってきますが。

ソースを見せて頂かないと詳細は分かりかねます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

Dreamweaverのソースフォーマットの適用の件は有名な話なのですが、ソースが勝手に改行されることによって、実際のブラウザでの表示でも、ナビゲーションが改行されてしまう現象です。困っております。

ソースは途中なので特にCSSは関係ないものもありますが以下です。
これをご覧いただくことで改善されるでしょうか？
「<!--」と「-->」を使わない方策がないものかと思案しておりますが・・・。

[htmlソース]

<div id="hdr-nv">
<ul>
<li><a href="nd/index.html"><img src="img/cmn/nv_hdr01.gif" alt="" name="hdrnv01" width="131" height="47" id="hdrnv01" onmouseover="MM_swapImage('hdrnv01','','img/cmn/nv_hdr01on.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li><!--
--><li><a href="po/index.html"><img src="img/cmn/nv_hdr02.gif" alt="" name="hdrnv02" width="131" height="47" id="hdrnv02" onmouseover="MM_swapImage('hdrnv02','','img/cmn/nv_hdr02on.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li>
</ul>
</div>



[CSSソース]
#hdr-nv{
position: absolute;
margin: 92px 0px 0px 219px;
width: 607px;
height: 47px;
left: 0px;
top: 10px;
}

#hdr-nv ul {
float: left;
text-align: left;
}

#hdr-nv li{
display:inline;
padding-left: 5px;
}

通報する
お礼日時：2008/03/26 20:31

No.2

  • 回答者： abril
  • 回答日時：

> これをご覧いただくことで改善されるでしょうか？


> 「<!--」と「-->」を使わない方策がないものかと思案しておりますが・・・。

ソースを拝見しました。
やはり、改行コードをコメントタグで隠しているのは「<ul>と<li>の間」ではなく、「</li>と次の<li>の間」のことなのですね。

ただ、「実際のブラウザでの表示でも、ナビゲーションが改行されてしまう現象」というのが今ひとつ明確に受け取れていないのですが、nv_hdr01.gifとnv_hdr02.gifが横並びにならずに改行されてしまう、という事ではないですよね？質問者様のオリジナルのソースから</li>と次の<li>の間のコメントアウトを外してみても、そういう現象は起きなかったので。最初に補足要求させて頂いた様に「nv_hdr01.gifとnv_hdr02.gifの間に定義した以上の余白ができてしまう現象」という解釈で正しいでしょうか？

そうであると仮定して、頂いたソースをサンプルのHTMLに組み込んで検証してみました。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./css/sample.css" type="text/css" media="all" />
<title>サンプル18</title>
</head>

<body>

<div id="hdr-nv">
<ul>
<li><a href="nd/index.html"><img src="./images/nv_hdr01.gif" alt="hdrnv01のテキスト情報" name="hdrnv01" width="131" height="47" id="hdrnv01" /></a></li>
<li><a href="po/index.html"><img src="./images/nv_hdr02.gif" alt="hdrnv02のテキスト情報" name="hdrnv02" width="131" height="47" id="hdrnv02" /></a></li>
</ul>
</div>

</body>
</html>

----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
（※ulは以下の様に初期化されているものと思います）
ul {
list-style: none;
padding: 0;
margin: 0;
}
#hdr-nv{
（そのまま）
}
#hdr-nv ul {
（そのまま）
}
#hdr-nv li{
float: left;
padding-left: 5px;
}
#hdr-nv li img{
vertical-align: bottom;
}
----------------------------------------------------------------------
これで、</li>と次の<li>の間の改行コードをコメントアウトしなくても予め<li>に与えられた"padding-left: 5px;"以上の隙間はなくなります。
IE6.0／7.0、Firefox2.0～、Opera9.25 on Windows XPで結果が同じになる事を確認しています。
また、質問者様のオリジナルのソースの状態では、"#hdr-nv ul"の下方向にも1～2pxほどの余白が出来ていましたが、こちらもなくなります。

いかがでしょうか？
もしもっと別の問題を抱えていらっしゃる様でしたら、引き続き補足して下さい。

この回答への補足

ふぅ～む・・・助かります。ありがとうございますm(_ _)m
他の箇所まで修繕アイデアいただきましてありがとうございます。

現象が見られなかったということですが、ごめんなさい、私が間違っておりました。
リストでGlobalNavigationをつくる場合、横並びにしたときだけ勝手に改行される話でした！

今回は縦並びなので関係ありませんでしたね！
大変ご面倒おかけしました。

ただ、リストのGlobalNaviを横並びに配置したときは本当になるんです。
コメントタグをつけて改行無しで<li>から</li>までを記述しないと
ナビゲーション画像群が途中で改行してしまうんです。
Dreamweaverの例の処理をしてしまうと、一行で記述していても勝手に改行させて整形されてしまうので問題となる、という話です。

いずれにせよお手数おかけしまして申し訳ありませんでした。
しかしアドバイスは役立っております。

補足日時：2008/03/28 15:22
通報する
    • good
    • 0
    • 件
通報する

No.3ベストアンサー

  • 回答者： abril
  • 回答日時：

> 現象が見られなかったということですが、ごめんなさい、私が間違っておりました。


> リストでGlobalNavigationをつくる場合、横並びにしたときだけ勝手に改行される話でした！
> 今回は縦並びなので関係ありませんでしたね！

えーと…"#hdr-nv li"で"display:inline;"と定義されていますので、「縦並び」にはならない筈ですが？
どうも状況がよく飲み込めませんが、問題があったのは"#hdr-nv"ではなく、別スレッドでポストされている"#nv-global"まわりのことだった、ということでしょうか。

まあいずれにせよ多分　http://oshiete1.goo.ne.jp/qa3900200.html　スレッドの方で解決策を得られているかと思いますので、本件は終了ということですね。

蛇足ですが：

> ただ、リストのGlobalNaviを横並びに配置したときは本当になるんです。
> コメントタグをつけて改行無しで<li>から</li>までを記述しないと
> ナビゲーション画像群が途中で改行してしまうんです。
> Dreamweaverの例の処理をしてしまうと、一行で記述していても勝手に改行させて整形されてしまうので問題となる、という話です。

その場合は先程回答した様に、<li>を横並びにする手段を"display: inline;"ではなく（displayは初期値のblockのまま）"float: left;"で置き換えれば、コードの改行の有無（</li>と次の<li>の間でも、<li>とその子要素の<img>の間でも）に関係なく余分な隙間はできなくなりますから、フォーマットの適用をしたとしても問題はなくなると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

いや申し訳ないm(_ _)m
偶然似た案件を複数やっていて頭がカオスになっていました。
その通りです、display: inline;を入れているので横並びでした。

それで、blockとfloat:leftをやってみて、なおかつコメントアウトコードを削除してやってみました。
結果、出来ました！！
以前、コメントアウトをしなければどうにも崩れるとれっきとした「CSS開設本」に書いてあったのですが、それってどうよ？という思いです。

ただ、XPのIE6、Firefox2.0だけの確認なので、他の環境もチェックする必要がありますが、とにかく今の時点でも感謝です！
お手数おかけしましたがありがとうございましたm(_ _)m

通報する
お礼日時：2008/03/29 12:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報