- 締切済み
ページの内容が折り返してしまう。
ホームページを作成中で 今フレーム横割りで三分割したページを 枠で囲んで表示させたくて 下のようなタグを各ページに打ちこんでいます。 BODY {border-width:pt; border-color: #99ccff; border-style:solid; border-left-width:px; border-right-width:px; border-bottom-width:px; border-top-width:px} ですがお気に入りのウインドウを出したときや ウィンドウを小さくしたときに ページの内容が枠につぶされて レイアウトがくずれてしまいます。 ページを枠で囲んだまま 折り返しをできなくするようにするには どうしたらよいのでしょうか アドバイスお願いします。
- yu-aya
- お礼率88% (32/36)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- kamineco
- ベストアンサー率25% (38/151)
<body> <div style="width: 640px;">ページの内容</div> </body> のように、ページの内容を囲むタグに width 属性をつけて％以外の単位を指定すれば改行されません。ためしに上の例でウインドウを狭めてみてください。
- quads
- ベストアンサー率35% (90/257)
基本的に推奨される形ではないですが。 構成を把握しないとアドバイスも難しいので、せめてフレームの分割値等を明示していただきたいのですが。 > ページの内容が枠につぶされて > レイアウトがくずれてしまいます。 状況が不明確です。 領域不足でインライン要素が改行されるのか、ブロック要素がIEの仕様によりwidth指定を無視するものなのか、領域不足でフロートしたブロック要素の表示領域がずれる等、問題が明確でないと回答も面倒です。 問題となるページを提示していただければよいのですが。 指定方法はいろいろありますが、 white-space:nowrap で解消されるでしょうか。
お礼
説明不足ですみません； でもこの方法で文字の折り返しの問題は解決しました アドバイスありがとうございました
関連するQ&A
- 【急ぎます！】ページ幅を解除と、メニューの色を変更するには
http://flash.xtaro.com/sozai/tool/fcount/sample.htmここを参考にＨＰを作っています。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 700px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #66cc99; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 700px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #339966; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #bbffdd ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> (1)メニュー１や２の色を変更するにはどうすればいい？ (2)ページ背景色をhttp://www.kds.kddi.com/topics/index.htmlのようにグラデーションにするにはどうすればいい？ (3)ページ幅を変更するにはどうすれいい？
- ベストアンサー
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい
cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 ［css］ <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします
- ベストアンサー
- HTML
- 文字と枠線がくっつきすぎている
たとえば、 ←枠と文字の距離を離したいのですが、どうすればいいでしょうか。 普通のテーブルでは、cellpaddingで指定しますよね。下のような場合、どうすればいいでしょうか。 <BODY bgColor=#ffffff> <DIV class=block3 style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 10px solid; WIDTH: 400px; BORDER-BOTTOM: 0px solid; HEIGHT: 30px">←↑ くっついてるのを離したい<BR>くっついてるのを離したい</DIV> </BODY> </html> よろしくお願いします。
- ベストアンサー
- HTML
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- 2階層目の現在ページをナビで表示させるには
こんにちわ。 WORDPRESSでホームページを作成しております。 添付画像の様にグローバルナビで現在の位置を背景色緑で表示してるのですが、1階層目の時しか表示されません。 ＷＯＲＫＳの2階層目である「コンサルティング」も同様にしたいのですが、2階層目も反映してくれるにはどの様なPHPを記述すればいいのでしょうか。 ---------ＰＨＰ記述--------- <ul id="nav"> <li<?php if(is_home()){echo ' class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> --------------------------- ---------ＣＳＳ（ＣＳＳは関係ないと思いますが、一応）------------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 110px; text-decoration: none; color: #333333; border-top: 1px solid #fff } #nav li a:hover { color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; border-top: 1px solid #00645C } --------------------------- また、ページ内リンクをしたいのですが、絶対パスで単純にサーバーにアップされてるＵＲＬを記述する方法しかないのでしょうか。
- 締切済み
- PHP
お礼
問題は解決しました！ アドバイスありがとうございました。