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

古いバージョン(ホームページビルダー8.0Windows)でHPを作...

古いバージョン(ホームページビルダー8.0Windows)でHPを作成しています。
下記cssでは、レイアウトが崩れてしまいます。お詳しい方がいらっしゃいましたらお力を貸していただけないでしょうか。 <STYLE type="text/css">
<!--
.container{width : 630px;
background-color : #ffffbf;
position : relative;
}
.block_a{
width : 625px;
background-color : #b3ffb3;
margin-left : 5px;
margin-bottom : 5px;
margin-top : 5px;
}

.block_b{
position:relative;
width: 500px;
background-color:#eeeeee;
float : left;
margin-bottom : 5px;
}
.imgbox1,.imgbox2,.imgbox3,.imgbox4 {
position:relative;
margin-left:5px;
width:245px;
background-color:#ffffff;
}
.block_c{
position:relative;
margin : 5px 0px 5px;
margin-left : 500px;
width:130px;
background-color : #ffdece; }
.block_d{
position:relative;
padding:10px;
width : 625px;
background-color:#cccccc;
}
-->
</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>
</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 class="block_d">
ここはブロックd
</div>
</div>
</body>
</html>

【表示させたいこと】

ブロックaの中に2個並んだボックスを2段作り、ブロックcを右サイドに回りこませ、ブロックbとcの下にブロックdを表示させる

【結果1】

①bの中のボックスが横に並ばずに縦に並ぶ
②cが回り込んではいるがブロックbの右側に表示されない
③bとブロックcの間に隙間が出来る

【検証】
①bのサイズを小さくするとレイアウト崩れない
②containerの幅を大きくするときちんと回り込む
③どんなにしても隙間が出来る

【質問1】
cssの記述に問題があるのでしょうか?
理屈で考えるとサイズに問題はない様に思われるのですが、ぴったりにサイズを決めるとレイアウトは崩れるのでしょうか?
他に有効な記述があれば教えてください。
Yahoo!知恵袋 5115日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
これでは駄目でしょうか?
<STYLE type="text/css">
<!--
.container{width : 630px;
background-color : #ffffbf;
position : relative;
}
.block_a{
width : 625px;
background-color : #b3ffb3;
margin-left : 5px;
margin-bottom : 5px;
margin-top : 5px;
}

.block_b{
position:relative;
width: 500px;
background-color:#eeeeee;
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 : #ffdece;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
}
.block_d{
position:relative;
padding:10px;
width : 625px;
background-color:#cccccc;
}
-->
</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>
</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>


>①bの中のボックスが横に並ばずに縦に並ぶ
ボックスの幅が245X4あるので横に並ばすと630以上になります。
>ブロックaの中に2個並んだボックスを2段作り
ボックスの大きさがどれだけでしょうか?
文章とcssを見るだけではイメージがわからないので、簡単なレイアウト(手書きでもよいので)アップしていただけないでしょうか?
Yahoo!知恵袋
シェア
 
コメントする
 

参考になったと評価
  この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...
3874日前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