- ベストアンサー
ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
メニュー（#menu など)を、ＣＳＳで作りたいのであれば、リスト（li)でまず項目を作り（画像５つなら、テキストで５つ入力）、display:inline; でこのリストが横並びになり、このメニューリンク(#menu a)のa要素に、display:block； を指定、paddingやwidthも指定、float:left; も指定。 背景画像をa:hover 等で指定すれば、クリック時に背景画像変更が可能。 余白やマージンの設定は、プレビュー等で確認して、良い様に設定してください。試しにＣＳＳを書いてみました。違うところがあるかも分かりませんが、考え方として以下のようにとられてはいかがでしょうか。 例） #menu{ float:left; height:50px; width:500px; } #menu li{ display:inline; } #menu a{ display:block; width:98px; float:left; padding:5px; text-decoration:none; } #menu a:hover{ color:#FFFFFF; background:url(img/menu_top.gif); }
その他の回答 (3)
- yk0223
- ベストアンサー率17% (21/123)
No2です。 >ブラウザを縮小してみると、上に３つ。下に２つといったぐあいに >改行されてしまうんです。 ウィンドウの大きさを変えたらってことですよね？ 質問者さんが貼ってあるソースをそのまま使ってみましたが、 改行されず、スクロールバーが出てきましたよ（WIN+IE6.0の環境です）。 問題ないんじゃないですか？？ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> <style Type="text/css"> <!-- #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } --></style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
お礼
遅くなってしまい申し訳ないです。 私も同じ環境の・・・はず・・・orz ありがとうございました。
- yk0223
- ベストアンサー率17% (21/123)
css部分の #head { width:760px; bgcolor: #ff0000; } の中の bgcolor: #ff0000; はcssではありません。 背景色変わらなかったでしょ？ background-color もしくは background と記述して下さい。 http://www.hajimeteno.ne.jp/stylesheet/css1/p-bgcolor.html#background-color 自動改行については、質問の意味がよくわかりませんでした。。 幅760pxの#menu;の中に、760px分（20+180+180+180+180+20）の画像をぴったり敷き詰めているのに、最後の画像だけ下に回り込んでしまう、という意味でしょうか？ それだと多分ブラウザ等によって、表示され方が違うので、#menuや#mainを{width:100%;} 等にしたほうがいいと思います。
補足
ご指摘のＢＧＣＯＬＯＲについては、気づきませんでした。 自動改行については。 スタイルシートでの枠幅が５００だったとして。 幅が９８のイメージを５つ横に並べた場合に ブラウザを縮小してみると、上に３つ。下に２つといったぐあいに 改行されてしまうんです。 これって、スタイルシートでの枠がうまくできてないのでしょうか？
- go_nta
- ベストアンサー率45% (5/11)
タイトルの『ＣＳＳで自動改行させたくない。』と言うのであればテーブルの<th>要素や<td>要素にCSSで『white-space:nowrap;』を指定すれば良いかと・・・お試し下さい。
お礼
回答ありがとうございます。 今回は、テーブルを使わず。スタイルシートで枠を区切って作ってみたいのです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
大変遅くなってしまいもうしわけないです。 試してみますね！ありがとうございました。