
横並びのメニューを表示させるところまでは出来たのですが、ウィンドウを縮小させると画像の通りリストが画面に合わせてズレてしまいます。
CSSはこのように書いています。
ul.menu{
list-style:none;
width:100%;
font-size:25px;
//margin-left:0px;
//margin-top: 642px;
position: relative;
top: 642px;
right: 27px;
padding:3px 0px;
text-align:center;
font-family: 'Gorditas', cursive;
}
ul.menu li{
list-style:none;
display:inline;
margin:0px 15px;
}
ウィンドウを縮小しても横並びのままにはならないのでしょうか?まだまだ勉強途中なのでわかりやすく教えて頂けるとありがたいです。
No.2ベストアンサー
- 回答日時:
>リストが画面に合わせてズレてしまいます。
ユーザービリティを考えると、それがベストだと思います。もし、一列に並んだままだと
・画像の大きさを小さくしてウィンドウ内に納めようとすると、画像が小さくなり判読しづらく、またポインターを合わせづらくなる。
・画像の大きさを保ったままだと横スクロールしなければ、すべてを見づらくなる。
のいずれかの問題を抱えることになります。
また、ulに対してposition:relativeを指定されて、かつtop,rightでずらしていますが、そうすると本来の位置にulがあるように、後続の要素が配置されます。
【引用】____________ここから
relative
ボックスの位置はまず通常フローにて計算され(この計算で得られた位置を通常位置と呼ぼう)、その通常位置から相対的に配置される。 なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
なお、現在ウェブ標準とみなされているCSS2.1では、displayの値がCSS2よりも増えています。
[CSS2] [CSS2.1]
inline inline
block block
list-item list-item
run-in 破棄 CSS3で導入?
compact 破棄 CSS3で導入?
----- inline-block
marker 破棄 CSS3で導入?
table table
inline-table inline-table
table-row-group table-row-group
table-header-group table-header-group
table-footer-group table-footer-group
table-row table-row
table-column-group table-column-group
table-column table-column
table-cell table-cell
table-caption table-caption
none none
inherit inherit
よって、もしリストの項目を画像で表示されているなら、display:inline-block;が本来設定すべきプロパティですが、そうすると古いブラウザは対応していません。
ul.menu,ul.menue li{display:block;list-style:none;}
ul.menu,ul{width:100%;position: relative;padding:3px 0px;text-align:center;
font-family: 'Gorditas', cursive;
}
ul.menu li{
display:inline-block;margin:0px 15px;
}
ul.menu li a img{display:block;width:11%;height:auto;}
この回答への補足
質問続きで申し訳ありません。
上記CSSの内容ですが、CSSの方もバージョンの宣言等をしないといけないのでしょうか?
今のところHTMLの方でのバージョン宣言しかしていないもので、もし宣言をした場合バージョンに合わせて破棄されたものは使用してはならないのでしょうか?
前回に続き詳しい回答有難う御座います。
なるほど…ポインタを合わせづらくなるのはちょっとですね…。
現状維持にとりあえずすることにします。
positionもまだまだ勉強途中なので色々と教えて頂きありがとうございました!
No.3
- 回答日時:
>上記CSSの内容ですが、CSSの方もバージョンの宣言等をしないといけないのでしょうか?
必要ありません。スタイルシートはブラウザは可能なものから適時導入して良いことになっています。これは、HTMLとは少し違います。HTML5の文書宣言と同じと考えて良いでしょう。
No.1
- 回答日時:
つまり、ウィンドウサイズを小さくしても途中で改行されないようにすれば良いのですね。
ページ全体の横幅を決めてあげれば解決するとおもいます。
幅が可変になるレイアウトをされているのでしたら、min-widthで最小値を指定すると良いです。
<style>
body{ text-align: center; }
div{ text-align: left; }
#main{
width: 1000px;
margin: auto;
}
</style>
<div id="main">
サイト内容
</div>
回答有難う御座います。
ページ全体の幅を決める宣言があるのですね!勉強になります。
min-widthは知らなかったので、これら調べてみることにします。
有難う御座いました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
tableタグの枠線について
-
<table>の「cellpadding」と...
-
テーブルとテーブルの間隔について
-
テーブル内のセル間にスペース...
-
文字を下に配置する
-
正規表現で「より前」と「より後」
-
画像をかさねて表示させるには?
-
ラインを端から端まで画面いっ...
-
<li>と<table>タグについて
-
<th>タグを使っても太字にしな...
-
<table>のclass指定が継承されない
-
HTMLで<HR>以外で線を引く方法...
-
VBAで作れるかな?
-
テーブルデータを折り返して表...
-
tableタグとformタグの組み合わせ
-
Visual C++ 6.0 で SQLServer...
-
テーブルタグの中にdivを含めて...
-
CSSだけで<table>の<td>や<tr>...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSで特定のテーブルだけに...
-
テーブルとテーブルの間隔について
-
テーブル内のセル間にスペース...
-
<th>タグを使っても太字にしな...
-
TABLEのセルの中の文字を行単位...
-
table表を横に並べる際の間隔指定
-
HTML tableのセルにtextareaを...
-
スタイルシートで左側だけ色を...
-
同じ幅指定のつもりなのに、ブ...
-
ホームページのテキストを折り...
-
<fieldset>タグについて
-
HTML5で、テーブル内tdタグの高...
-
画面幅に合わせてテーブルのカ...
-
tableを縦に続けるとtable間の...
-
テーブルデータを折り返して表...
-
html5のテーブル内でdivのタブ...
-
HTMLのテーブルをExcelにCopy&P...
-
<li>と<table>タグについて
-
textareaの外側の文字が下付き...
-
(HTML)Tableを任意の位置に置...
おすすめ情報