レイアウトを追加(カラム3)をして画像を3枚張ると、画像が重なる

2017年9月18日 at 15:47

レイアウトを追加(カラム3、マージン0)を行い、3段組にして
各1枚ずつ画像を貼りつけ(画像ブロックを追加)たところ、
左から1枚目と2枚目の画像重なってしまいます。
2枚目と3枚目は綺麗につながります。
それぞれの画像は同じ幅のピクセル数で、上段(web)の全幅の1/3となっています。
ブロック2の「デザイン&カスタムテンプレート」の「マージン」を左に8pix設定すると、
1枚目と2枚目の重なりは無くなりますが、2枚目と3枚目が重なるようになります。
更に、ブロック3の「マージン」を左に8pix設定すると、
1枚目、2枚目、3枚目ともに重なりは無くなり、綺麗につながります。
上段とのずれもありません。

なぜこのようなことが起こるのでしょうか?
マージン指定は、なんだか気分が悪いです。
宜しくお願い致します。

タグ:

Re: レイアウトを追加(カラム3)をして画像を3枚張ると、画像が重なる

2017年9月19日 at 14:39
aboさま

concrete5のバージョンは?
テーマは何を使っていますか?

レイアウトを追加(カラム3、マージン0)を行い、3段組にして

マージン0ということは、Bootstrap ではなく『自由形式のレイアウト』で設定したのでしょうか?

バージョン8.2.1のデフォルトテーマ(エレメンタル)で試してみましたが、画像が重なることはありませんでした。
 

Re: レイアウトを追加(カラム3)をして画像を3枚張ると、画像が重なる

2017年9月19日 at 19:37
nipper様

ご返信ありがとうございます。
concrete5のバージョンは8.2.1となります。
既存のテーマは使用しておりません。
シンプルに以下の様のテーマ?ファイルを指定しました。
レイアウトを追加は『自由形式のレイアウト』で設定しました。

default.php
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php
$this->inc('elements/header.php');
?>
<div class="main">
<div class="top-title-box">
<?php
$a = new Area('top-title');
$a->display($c);
?>
</div>
</div>

style.css
.main {
width:960px;
}
.main div {
padding-left:0;
margin: 0px;
}
 

Re: レイアウトを追加(カラム3)をして画像を3枚張ると、画像が重なる

2017年9月19日 at 20:44
concrete5の使い方・ヘルプ 5.7以降 (モダン) 操作・編集方法 編集モード ブロックエリア レイアウトの追加

>1ピクセルも寸分たがわずにサイトデザインを行う手法(ピクセルパーフェクト)としてはオススメできません。

ヘルプページにやめた方が良いと書いてありました。
でも、nipper様は普通に出来ている様なので謎です。

php上で3つのnew Areaを並べて、画像を貼ったらきれいにつながりました。

イラレでスライスした画像をconctere5上で一つのエリアにブロックを積み重ねていって、ページを完成させられると思っていましたが出来ないようですね。
 

Re: レイアウトを追加(カラム3)をして画像を3枚張ると、画像が重なる

2017年9月20日 at 10:41
aboさま

既存のテーマは使用しておりません。

自作のテーマということでしょうか?
上記のコードだけでは何とも言えませんが、このコードに関しては特に問題ないと思いますが...
レイアウト以外のスタイルシートの影響はありませんか?

Chrome のデベロッパーツールや Firefox の開発ツール等で問題のある箇所を調べてみれば原因がわかるかもしれません。
 

Re: レイアウトを追加(カラム3)をして画像を3枚張ると、画像が重なる

2017年9月20日 at 20:23
nipper様

ご返信ありがとうございます。

解決しました!
結果から言うと3つの画像のサイズ(幅)は同じかと思っていましたが、
真ん中の画像だけ少し小さかったようです。

出力されたソースを見ていたら、キッチリ33.333%で幅は指定されていたので
本当に同一のサイズだと綺麗に横につながるようです。

有難うございます。