TOP > Expression Web & FrontPage Users Forum
[リストへもどる]
一括表示
タイトル： 横並びのナビゲーションリンクリスト
記事No： 186
投稿日： 2008/09/12(Fri) 03:27
投稿者： kazue
初めまして、宜しくお願いします。

windows98からvistaに変更の際、Fontpage2002からExpression Web2にしました。
『ひと目でわかるMicrosoft Expression Web2』で現在勉強中です。

横並びのナビゲーションリンクリストを作成しようとしているのですが、
「デザイン」でみると、横並びになるのですが、「プレビュー」では、
左側の縦並びになっています。


何回も作成し直しましたが、上手く行きません。
解決法を教えて頂きますよう宜しくお願いします。

タイトル： Re: 横並びのナビゲーションリンクリスト
記事No： 187
投稿日： 2008/09/12(Fri) 04:11
投稿者： wanichan
私の著書のご購入、ありがとうございます。

まず確認させていただきたいと思います。
プレビューとはブラウザでプレビューのことですよね。
保存しないとプレビューできませんが・・・

CSSファイルの#top_navi、#top_navi ul、#top_navi liのスタイルはどうなっていますか？
セレクタの名前に入力ミスはないでしょうか？

一度、CSSファイルのコードを貼り付けてください。

よろしくお願いします。

タイトル： Re^2: 横並びのナビゲーションリンクリスト
記事No： 188
投稿日： 2008/09/12(Fri) 10:03
投稿者： kazue

> プレビューとはブラウザでプレビューのことですよね。
> 保存しないとプレビューできませんが・・・

「共通」ツールバーの「上書き保存」ボタンをクリック、F12のキーを押しました。
また、「上書き保存」の隣の「プレビュー」ボタンをクリックもしてみましたが、
同じ結果でした。

CSSファイルのコードです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="header">
ヘッダー</div>
<div id="top_navi">
<ul>
<li>HOME</li>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
</ul>
</div>
<div id="cols_container">
<div id="contents">
コンテンツ</div>
<div id="menu">
メニュー</div>
</div>
<div id="footer">
フッター</div>
</div>

</body>

</html>

宜しくお願いいたします。

タイトル： Re^3: 横並びのナビゲーションリンクリスト
記事No： 189
投稿日： 2008/09/12(Fri) 10:20
投稿者： kazue
stylecssです。

body {
padding: 0px;
margin: 0px;
text-align: center;
}
#header {
background-color: #99CCFF;
}
#footer {
background-color: #99CCFF;
clear: both;
}
#container {
margin: auto;
text-align: left;
width: 760px;
background-color: #CCFFFF;
}
#cols_container {
width: 760px;
}
#contents {
float: right;
width: 560px;
padding: 10px;
}
#menu {
float: left;
width: 170px;
margin: 10px 5px 10px 5px;
}
#top_navi {
height: 1.3em;
background-color: #3399FF;
}
.#top_navi ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.#top_navi li {
float: left;
width: 100px;
height: 1.3em;
text-align: center;
padding: 0px;
margin: 0px;
}

宜しくお願いします。

タイトル： Re^4: 横並びのナビゲーションリンクリスト
記事No： 190
投稿日： 2008/09/12(Fri) 10:29
投稿者： wanichan
CSSファイルの記述に問題があります。

> .#top_navi ul {
> padding: 0px;
> margin: 0px;
> list-style-type: none;
> }
> .#top_navi li {
> float: left;
> width: 100px;
> height: 1.3em;
> text-align: center;
> padding: 0px;
> margin: 0px;
> }

この部分です。

最初の「.」をとってください！
そうすればOKです。

最初に「.」ではじまるものはクラススタイルで、「#」ではじまるものはIDスタイルです。
でも両方入っていたため、ちゃんと表示されなかったのです。

新しいスタイルを作成するときに、セレクタ名の最初に「.」が入っているので
必ず全部削除してから入力するようにしてください。

どうぞよろしくお願いします。

タイトル： Re^5: 横並びのナビゲーションリンクリスト
記事No： 191
投稿日： 2008/09/12(Fri) 11:12
投稿者： kazue
どうもありがとうございました。
解決いたしました。

これからも、こちらのサイトと『Expression Web2』を参考にしながら、Frontpageで作成した自分のサイトの編集をExpression Web2で頑張って仕上げていきたいと思います。

本当にありがとうございました。
これからも、何かありましらよろしくお願いいたします。