固定ページで商品一覧のfloatが崩れる

  • 解決済 coz

    (@coz)


    10年、 3ヶ月前

    環境:
    MAMP3.0.5
    PHP5.5.10

    現在welcartで固定ページに商品の一覧を表示しています。
    カテゴリーページでは同じHTML、CSSで同じで正しく表示されるのですが、
    固定ページの場合のみ表示が崩れます。

    具体的にはfloatで横並びにした要素の一番右の要素のみ一段下に落ちてしまうような感じです。
    　吐き出されたコードにmarginやpaddingが入っているわけでもなく、一旦表示した後にブラウザのデベロッパーツールでfloatのチェックを外し、再度チェックすると解消されます。

    ですので読み込みの順番の問題かなにかかと思うんですが、、、
    解決方法、もしくはデバッグの方法など教えて頂ければと思います。

    ご回答よろしくお願い致します。

    コードは以下です

    <?php if (have_posts()) : ?>
<?php query_posts('cat_slug=item'); ?>
<?php while (have_posts()) : the_post(); usces_the_item(); ?>
<div class="new_item col"><!--新着アイテム-->
    <a href="<?php the_permalink(); ?>">
         <div class="itm">
            <figure class="itm_con"><img src="<?php usces_the_itemImageURL(0); ?>"></figure>
         </div>
         <h5><?php usces_the_itemName(); ?></h5>
         <p>&yen;<?php usces_the_firstPrice(); ?></p>
   </a>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
15件の返信を表示中 - 1 - 15件目 (全18件中)
1 2
  • Junko Nukaga

    (@nukaga)

    10年、 3ヶ月前

    推測ですが、固定ページのみにかかっているCSSが邪魔しているように思います。
    テーマはオリジナルのものでしょうか？

    ブラウザのデベロッパーツールをお使いであれば該当部分のCSSだけではなく、親要素にあたるもののwidthやそれに関わるマージンやパディングも確認してみてはいかがでしょう？

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    回答ありがとうございます。
    テーマはオリジナルで制作したものです、CSSは全て同じものを読み込んでますがwelcrt側でなにか適応されてるかは詳しく確認してなかったです。
    確認してみます。

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    CSSを確認してみましたが得に追加で書き換えされている部分などはありませんでした
    　ちなみに親要素の幅なども違う別の固定ページの、上記コードと同じ物を入れた場所も同じように崩れています。

    Junko Nukaga

    (@nukaga)

    10年、 3ヶ月前

    ・welcart以外のプラグインを無効化してみてはいかがでしょう？
    ・該当部分のCSSコードを教えて頂くことは可能でしょうか？（ただし親要素や他の要素も関わっている可能性があるためそれだけでは解決できないかもしれませんが…）

    推測すると商品画像と品名と値段を並べていると思うので、
    new_item col にfloatをかけていらっしゃるかと思うのですが、new_itemは同じCSSを使っていてもcolクラスは何か他のCSSがかかっているとか、全く同じCSSと仰っているので可能性は少ないかと思いますが固定ページのみどこかでwelcartのusces_cart.cssに入っているものと同じクラス名を使っているなどございませんでしょうか？

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    .span_2, .top_nav_l, .links, .new_item, .cat, .items {
    width: 32.1333%;
    padding: 0px 0.6%;
    margin-left: 1.8%;
}
.col {
    margin-left: 1.8%;
    padding: 0px 0.6%;
}
.new_item {
    margin-bottom: 3.75%;
    text-align: center;
}
.col {
    border: 0px solid transparent;
    float: left;
    box-sizing: border-box;
    background-clip: padding-box !important;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
}
.body_wrap {
    text-align: left;
}
html {
    color: #1F1D1D;
    font-size: 10px;
    line-height: 2;
    font-family: "Alte DIN 1451 Mittelschrift";
    font-weight: lighter;
}

    該当部分に適応されてるのは以上のCSSです。

    class名がwelcart側と重複しないように一旦すべて変更してみましたがダメでした。
    welcart以外のプラグインを停止しても結果は同じでした。

    一応marginやpaddingなど隙間が出来そうな要素は入ってない状態で、何も無いのにずれている状態なんですがそれでもやっぱり疑わしいのはCSSでしょうか？

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    ちなみにデベロッパーツールでテーマ以外のCSSを無効にしても変化はありませんでした。
    静的な時は同じコードで正常に動いてたことと固定ページのみ崩れることが気になります。。。

    nobita

    (@nobita)

    10年、 3ヶ月前

    こんにちは

    margin-left:1.8%になっていますが、box-sizing:border-boxは、マージンを含まないらしいので、カラム落ちしてるんじゃないでしょうか？

    https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

    なので、自信はないですけど

    width: 30.333%;

    な感じにしたほうがいいのでは、、、

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    nobitaさん回答ありがとうございます。

    同じようにmarginを入れてるところも旨く動いてましたし、問題の箇所も変更してみましたがダメでした。。。

    Junko Nukaga

    (@nukaga)

    10年、 3ヶ月前

    少し試してみました。

    nobitaさんと同じ回答になるのですが、
    width: 32.1333%;
    を
    width: 31%;
    以下にすると3列になります。

    もしくは
    margin-left: 1.8%;
    を削除しても3列になります。
    margin-left部分で調整する場合
    現在は.new_itemにも.colにも重複して入っているのでどちらかに統一した方が良いと思います。
    同時に.colが2つCSSがあるのでまとめてしまった方がデバッグは楽かと。

    同じように入れている箇所が何故うまくいっているかはわからないのですが、上記widthの調整かmargin-leftの調整でカラム落ちは防げました。

    nobita

    (@nobita)

    10年、 3ヶ月前

    同じようにmarginを入れてるところも旨く動いてましたし、問題の箇所も変更してみましたがダメでした。。。

    投稿で、適切に表示されるスタイルルールが、ページで同様に表示されないのか！
    という点に納得がいかないのだと思いますが、

    CSSは、カスケードして適用されますよね　祖先要素のルールセットを引き継いでいるために、投稿とページで微妙な差が発生しているのではないかと思います。

    例えば、bodyクラスには、page や blog といったクラスが自動的に設定されるので、投稿のスタイルは、投稿の表示を見ながら調整し、ページの場合は、ページの表示を見ながらスタイルを決めているのが一般的だと思います

    共通で、きっちり決まるスタイルをもとめていくなら、祖先要素の何が影響を与えているのか、すべてのスタイルを解除再設定を繰り返して、原因を追究するしかないと思います。

    私的には、原因はほとんどの場合見つかるのではないかと思っていますが、しんどいです

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    皆さん何度もご回答ありがとうございます。

    CSSがレスポンシブなので正確には上記のCSSの重複部分はどちらかはメディアクエリで上書きされている状態になります。

    それとこれも説明不足で申し訳ないのですが、横に並ぶ要素の一番左にくる要素にはmargin-left:0;を適応してるので現状のCSSでもカラム落ちはしない様にしている状態です。

    いまの不具合の説明が難しいのですが、カラム落ちというより一段下がる感じです、横には入っている状態でなんの要素もないのに一番右の要素のみ数px程度下がってしまう状態です。

    それと気になる部分はデベロッパーツールで見たときのwidthやmarginなどの数値は上手くいってる箇所と同じということとデベロッパーツールで一旦floatを解除して再度適応すると元にきちんと横並びになるというところです。

    要素の数値に変化がなく隙間の部分にもなんの要素も内のですがそれでもやっぱりCSSの問題しか考えられないのでしょうか？

    nobita

    (@nobita)

    10年、 3ヶ月前

    要素の数値に変化がなく隙間の部分にもなんの要素も内のですがそれでもやっぱりCSSの問題しか考えられないのでしょうか？

    トラブルシューティングで、もっとも重要なのは、状況の共有だと思います。

    htmlでもいいので、その状態が確実に再現できるhtmlやCSSあるいは、javascriptが必要ですが、準備していただくことは可能ですか？

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    トラブルシューティングで、もっとも重要なのは、状況の共有だと思います。

    おっしゃる通りだと思います。
    ただ原因がわからないので確実に再現するのは難しいです、サイトをまるっと公開出来ればいいのですがまだ公開してない状態ですし、wordpressを導入する前の静的な状態では崩れていないので。。。

    mogue

    (@mogue)

    10年、 3ヶ月前

    横槍の回答ですが、おそらく

    floatしている要素のマージンか幅が太ったか
    floatしている要素を囲っている要素の幅が狭いか

    のどちらかが問題ではないでしょうか。

    floatしている要素が太る場合
    ・内容のテキストが長いものがあるか
    ・固定ページではCSSが別のものに上書きされているか、投稿ページでは当たっているはずのものが足りないか
    など既出の問題があると思います。いずれにしてもF12を押してデベロッパーツールを出してから比較し、太っていないかを確かめることが賢明でしょう。

    囲っている要素がやせている
    ・固定ページでは数ピクセル親要素のどこかで幅が狭くなってしまったりするとカラム落ちが発生します。
    これもデベロッパーツールで比較して検証するのがいいでしょう。

    手っ取り早いのは、囲っている親要素の幅をwidth:105%;などと当ててみることです。それで治れば、原因を追えると思います。
    さらに素の親の要素でoveflow;hiddenとposition;relative;を当てておけばきれいに収まるでしょう。

    横に並ぶ要素の一番左にくる要素にはmargin-left:0;を適応してる

    これはけっこう堅いCSSの当て方だと思います。
    以下のようにしてみてください。

    <style>
* {
margin:0;
padding:0;
}
div {
position:relative;
overflow:hidden;
float:none;
clear:both;
width:724px;←たとえばね
}
ul {
position:relative;
overflow:hidden;
float:none;
clear:both;
width:744px;←マージン分大きくする
}
li {
float:left;
width:228px;
margin:0 20px 20px 0;←全部のfloat要素に右マージンをあててよい。
}
</style>
<div>
<ul>
<li><a>float要素</a></li>
<li><a>float要素</a></li>
<li><a>float要素</a></li>
<li><a>float要素</a></li>
<li><a>float要素</a></li>
<li><a>float要素</a></li>
</ul>
</div>

    こんな感じだと柔軟にfloatさせられます。
    フロート問題はだいたいこんなところでつまずくのが大抵じゃないでしょうか。
    固定ページだからとかというよりは、結局はCSSの問題だと思いますがどうでしょうか。

    トピック投稿者 coz

    (@coz)

    10年、 3ヶ月前

    mogueさんコードまで記載頂いてありがとうございます。

    一応同じレイアウトで同じCSSで綺麗に表示されているカテゴリーページと、崩れている固定ページの要素の数値をデベロッパーツールで全て見比べましたが数値は同じでした。

    皆様CSSをご指摘されてますが、どうしても気になるのは吐き出されている数値が同じで崩れていることです、例えばデベロッパーツールでmarginが0になっていたとしてもwordpressやwelcart側で上書きされていたら反映はされてないけどmarginが入ってるということなんですか？

15件の返信を表示中 - 1 - 15件目 (全18件中)
1 2
  • トピック「固定ページで商品一覧のfloatが崩れる」には新たに返信することはできません。