- ベストアンサー
枠の固定
左右に分割したフレームの右側に <center> <div style="border-style:ridge; border-width:10px; width:400; height:120;"> </center> というタグで枠を作成しました。(枠の中に文字が入っています） 私のＰＣの画面からであると、真ん中に表示されるのですが、 画面サイズやアスペクト比が異なると、 ずれが生じてしまうようなのです。 これを常に真ん中に表示させるようなタグがあれば 教えて下さい。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- テーブルの枠の設定について
DreamweaverでHP作成中です。 テーブルの高さや幅がバラバラになってしまったので もし一括してそろえられるならその方法が知りたいです。 かなりとんちんかんなことを言っていると思う のですが、どなたか教えていただけませんでしょうか？ 1.例えば 3列2行のテーブルの中で、<td width="180" height="10"> のように設定していても、そこに<img src="img/logo.gif" width="185" height="30">をはめると幅や高さはgifの方に合わせられるのでしょうか。 2.<table width="710" border="1" height="400">の枠の中に、 <td valign="top" width="700" height="400" class="background"> のスタイルシートを背景に設定し、 <table width="685" border="0" height="10">の文字を打ち込むためのテーブルをはめ、その下に <tr valign="bottom"> <td colspan="2" valign="top" height="2" width="710" class="background"> <div align="right"><font size="-1">Copyright ○○. All rightsreserved.</font></div> </td> </tr> などを加えると、高さはどこを見れば分かるのでしょうか。 3.一つベースのページを作ってそれをテンプレートにし、文字や画像をはめ込んでいく予定です。 トップページのみFlashを使っていて、Enterで統一させたベースのページへリンクさせたいですのですが、 すでにトップとベースの枠のの大きさがずれています。 ベースにボタンなどを加えたり、トップには別の行があったりするせいで、高さと幅が狂っているのです(泣） 4.画面いっぱいを使わず、真中にwidth="710"height="500"くらいの枠を作って、画面表示が拡大縮小されても真中に表示させたいです。 どうぞ宜しくお願いします。
- ベストアンサー
- グラフィックソフト
- 枠がスクロールさせると消える
ブログのような日記調記事をいくつも縦に並べて表示したいと思っています。 例） <div 大枠> <div 記事（float: leftにしている）></div> <div 写真></div> </div> 上記<div 大枠>から繰り返し・・・ 最初ぱっと見はそれらしい形になるのですが、IEの場合のみ下の記事を見ようとスクロールさせると、大枠の左右の枠線が一部消えます。 （上下は問題なく、角部分も表示される） 上の記事に戻ると、最初見えていた上部記事の枠も左右とも消えてしまいます。 画面から見えない位置にある記事の枠を表示させる時に異常が生じるようです。 IE以外では問題なく、どうしても直すことができません。 枠を常時表示させるにはどうしたらよいでしょうか。 枠の設定 <div class="waku" style="border-style:solid; border-width:thin; border-color:#CCCCCC; padding:10px 20px 0px 0px;">
- 締切済み
- HTML
- テキストボックスの表示
テキストボックスの表示 テキストボックスを２つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＡ </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＢ </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか？
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- 画像枠のタグ
何度しても写真画像の枠ができないのですが、 枠をつけて枠の色と枠の太さを変更したいのですが。 このタグのどこが違うのでしょうか？ （枠をつけて画像のサイズだけ変更している状態です↓） <img src="http://＠＠＠＠＠.JPG" border=3 width="300" height="200"> <img src="http://＠＠＠＠＠.JPG" width="300" height="200"border=3> 両方してみたんですが、両方共できませんでした。どこが違うのでしょか？これ↑に枠と枠の色をつけて枠の太さを調節する時はどこにどのようにタグを入れたらよいのでしょうか？ 写真画像枠のタグの種類はborder=3、３のみでしょうか？ 以前聞いたことがありますが、Macのブラウザー サファリでは変更しても反映されず見ることができないのでしょうか？ お手数をお掛け致しますが、ご存知の方がおられましたら お知らせ頂けますととても助かります、宜しくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
- 枠の幅が次のようにすると
画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue; border-style:solid; border-width:1px; } --> </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>
- ベストアンサー
- HTML
- divタグのheigt:100%について
以下のようなソースを実行すると 赤い枠が黒い枠をはみ出して表示されてしまいます。 黒枠(IDが#main)もheight:100%を設定しており 赤い枠は黒い枠の子要素なのに どうして黒い枠(IDが#main)の高さが100%で表示されないのでしょうか？ html,body{ height:100%; } #main{ width:700px; height:100%; border:1px solid black; } #ue{ height:130px; width:700px; border:1px solid blue; } #shita{ height:100%; width:700px; border:1px solid red; } <body> <div id="main"> <div id="ue"></div> <div id="shita"></div> </div> </body>
- ベストアンサー
- HTML
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
