ＣＳＳで自動改行させたくない。

解決済

質問者：akira212
質問日時：2006/10/15 14:11
回答数：4件

スタイルシートやテーブルで、幅を指定してあげると
その幅にあわせて自動改行したりとか、その枠内の背景だけを
変更することができると思うんですが。
スタイルシートでやっても、なぜかうまくいきません。
今は、あきらめてテーブルでやってるんですが。
何がよくないのか、教えていただければ幸いです。
根本的な基本が、わかってないんですかね？

ＣＳＳ
#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件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： webtera
回答日時：2006/10/16 18:19

メニュー（#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);
}

- 0
- 件

通報する

この回答へのお礼

大変遅くなってしまいもうしわけないです。
試してみますね！ありがとうございました。

通報する

お礼日時：2006/10/24 11:29

No.4

回答者： yk0223
回答日時：2006/10/16 19:29

No2です。

>ブラウザを縮小してみると、上に３つ。下に２つといったぐあいに
>改行されてしまうんです。

ウィンドウの大きさを変えたらってことですよね？

質問者さんが貼ってあるソースをそのまま使ってみましたが、
改行されず、スクロールバーが出てきましたよ（WIN+IE6.0の環境です）。
問題ないんじゃないですか？？

<html>
<head>
　<link href="base.css" rel="stylesheet" type="text/css">
<style Type="text/css">
</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>

- 0
- 件

通報する

この回答へのお礼

遅くなってしまい申し訳ないです。
私も同じ環境の・・・はず・・・orz

ありがとうございました。

通報する

お礼日時：2006/10/24 11:28

No.2

回答者： yk0223
回答日時：2006/10/16 00:53

css部分の

#head {
width:760px;
bgcolor: #ff0000;
}

の中の bgcolor: #ff0000; はcssではありません。
背景色変わらなかったでしょ？
background-color　もしくは　background　と記述して下さい。

http://www.hajimeteno.ne.jp/stylesheet/css1/p-bg …

自動改行については、質問の意味がよくわかりませんでした。。

幅760pxの#menu;の中に、760px分（20+180+180+180+180+20）の画像をぴったり敷き詰めているのに、最後の画像だけ下に回り込んでしまう、という意味でしょうか？

それだと多分ブラウザ等によって、表示され方が違うので、#menuや#mainを{width:100%;} 等にしたほうがいいと思います。

この回答への補足

ご指摘のＢＧＣＯＬＯＲについては、気づきませんでした。

自動改行については。
スタイルシートでの枠幅が５００だったとして。
幅が９８のイメージを５つ横に並べた場合に
ブラウザを縮小してみると、上に３つ。下に２つといったぐあいに
改行されてしまうんです。

これって、スタイルシートでの枠がうまくできてないのでしょうか？

補足日時：2006/10/16 13:14

通報する