Gizport
1 回答
0
Share (facebook)
223
view
全般

shines_info様 4/30の回答ではヒント及び追記質問を頂い...

shines_info様
4/30の回答ではヒント及び追記質問を頂いているにも拘らず、HTML以下の文章を見落としておりました。
cssを一部変更し、画像を添付いたしましたので、改めて質問させていただきます。 <STYLE type="text/css">
<!--
.container{width : 630px;
background-color : #eeeeee;
position : relative;
}
.block_a{
width : 625px;
background-color : gray;
margin-left : 5px;
margin-bottom : 5px;
}

.block_b{
position:relative;
width: 500px;
background-color:#cccccc;
float : left;
margin-bottom : 5px;
}
.imgbox1,.imgbox2,.imgbox3,.imgbox4 {
position:relative;
margin-left:5px;
width:245px;
background-color:#ffffff;
}
.block_c{
position:relative;
margin-left : 500px;
width:130px;
background-color : #cccc99;
margin-right: 0px;
margin-bottom: 5px;
}
.block_d{
position:relative;
padding:10px;
width : 625px;
background-color:#3c3c3c;
}
-->
</STYLE>
</head>
<body>
<div class="container">
<div class="block_a">ここはブロックa</div>
<div class="block_b">ここはブロックb<BR>
<span class="imgbox1"><IMG src="...gif" width="245" height="50" border="0"></span>
<span class="imgbox2"><IMG src="...gif" width="245" height="50" border="0"></span><br>
<span class="imgbox3"><IMG src="...gif" width="245" height="50" border="0"></span>
<span class="imgbox4"><IMG src="...gif" width="245" height="50" border="0"></span><br>
</div>
<div class="block_c">ここはブロックc<br>
<IMG src="image9.gif" border="0"><br>
<IMG src="image10.gif" border="0"><br>
<IMG src="image11.gif" border="0"><br>
<IMG src="image12.gif" border="0"><br>
</div></div>
<div class="block_d">
ここはブロックd
</div>
</body>
</html>

ご指摘の通り500pxのブロック中に245pxを並べるとはみ出してしまいますが、それぞれのボックスをleft=5px・box=245 で改行するので収まると思っていました。
因みに、ブロックの幅・画像1~4の幅を240pxブロックbは正しく表示されますがブロックcは崩れたままです。
ブロックcを正しく表示する為には、containerのサイズを大きくしなければなりません。
サイズの問題なのでしょうか?
バージョンが古い為なのでしょうか?shines_info様からはレイアウトが崩れて見えないのであれば安心して作成できます。

納得が出来ず困っておりますので宜しくお願いいたします。
Yahoo!知恵袋 5113日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
補足へのお返事です。

こちらではブロックcに画像を追加しても、正しく表示されています。
ブロックbの下に回り込んでしまうとしたら、
.block_b (もしくは c) に float:left を入れていないためか、
.block_b (もしくは c) に margin や padding を追加することで、
width の合計が .container の630pxを超えてしまうため…かな^^;

当初、画像1~4が縦並びになってしまっていたように、
width に入りきれない要素は、下に押しやられてしまいます。
このあたりがテーブルデザインとは微妙に違います。
CSSデザインは、とにかく width の計算が面倒くさいです(笑)

.block_c に float:left を入れる意味ですが、
ブロックcに対して、ブロックbの左側に整列しなさいという指示です。
ちなみに、.block_c は float:right でも大丈夫です。

とにかく、横並びにする<div>は float で制御するようにして、
次の<div>でクリアするというのを頭に入れておいて、
あとは色々試したりして、感覚で覚えていくしかありません。

すみません、なんかうまく説明できませんでした^^;

------------------------------------------------------------

shines_info様ではありませんが、退屈しているので…。

まず、500pxの中に245pxが並んで入らないとのことですが、
</span>と<span class="imgbox2">の間、同様に、
</span>と<span class="imgbox4">の間で改行されているため、
それが半角スペースとして認識され、はみ出しているのかもです。
</span><span class="imgbox2">…と、
改行せずに記述すると、きちんと収まるはずです。

次に、ブロックcの表示位置についてです。
CSSでレイアウトを作るには、position と float がありますが、
そのあたりの区別がきちんとできていないように思えます^^;

今回のレイアウトは、float だけで大丈夫です。
position:relative は、とりあえず全部消しちゃいましょう^^;
.block_c から margin-left:500px も削除して、
代わりに float:left を .block_c にも適応します。

float はその次の<div>でクリアしなければなりません。
なので、clear:both を .block_d に適応して、
<div>の block_d を container の中に入れてしまいます。

記述は以下のようになります。
<IMG src="image12.gif" border="0"><br>
</div> (※block_c の閉じ)
<div class="block_d">ここはブロックd</div> (※float のクリア)
</div> (※container の閉じ)

これで、とりあえずレイアウトは整うと思います。
もう一度、position と float を研究してみて下さい。

あと、Firefoxで見ると、ブロックdがはみ出しています。
padding:10px;
width:625px;
と設定しているので、625+(10*2)=645pxとなっているからです。
ブラウザによって解釈が違いますので、注意が必要です。
(文法を正確に反映するのは、Firefoxの方です)
Yahoo!知恵袋 5112日前
シェア
 
コメントする
 

参考になったと評価
  このQ&Aは参考になりましたか?

Share (facebook)
その他の解決方法を知っていますか?
回答する
全般
41
Views
質問者が納得プリンタドライバ(PCL XLドライバ)の問題だと思われます。 解決策または回避策はプリンタメーカーにより異なります。 まずは最新のドライバをインストールして、それでダメならプリンタの削除をしてからプリンタの再インストール位しか手段はないかと思います。 上記を試しても解決しない場合は、メーカーサポートに問い合わせですね。
3535日前view41
全般
29
Views
質問者が納得/* ----------------メニュー用 背景・文字色設定 */ /* 通常・訪問済みリンクカラー */ #submenu a:link, #submenu a:visited { color: #ffffff; /* 文字色 */ □□□□□□□□background-color: #555555; font-size: 12px; } /* マウスを上に重ねた時リンクカラー */ #submenu a:hover { color: #333333; background-color...
3873日前view29
全般
46
Views
質問者が納得今見てみるとurlでアクセスできますし、 googleへキャッシュもインデックスもされています。 サーバ側でメンテしていてクローラがその時アクセス 出来なかったのでしょう。 googleウェブマスターのメッセージは確認したら削除できますので 削除して下さい。 その後はメッセージ来ないと思います。
4146日前view46
全般
34
Views
質問者が納得<補足への回答> 参考URLにもあると思いますが―― On Error Goto ER 以降の処理がエラーならエラー処理ルーティンに行きなさい、という意味です。 "ER"の部分は参考URLの先では "GoTo ErrorHandler" と記述されていますが、自分なりにわかりやすい文字列でOKです。 ER: On Error Goto 0 先に生じたエラーを解消します。 ファイルがないことを明示したい場合は Private Sub CommandButton...
4208日前view34
全般
44
Views
質問者が納得<STYLE type="text/css"><!--body{cursor:url(http://hana.poche.jp/angel66l/kagi.ico);}a{cursor:url(http://hana.poche.jp/angel66l/kagi.ico);}--><styletype="text/css">.entry .contents{text-align:center;}</style><s...
4340日前view44

関連製品のQ&A