【2.12.3のCSSを修正】positionをfloatにする

[takai]

■概要

テキストをpositionで配置しているものを全てfloat（ダブルフロート型）にする。

ダブルフロートの方が見栄えや設計に関して適切だと判断したため。

.commentList dd div.title

• r2687 で対応済み

これと同様にダブルフロート型に変更していく。

• 左フロート、右フロートのそれぞれの width 値は内容量を考えて適当に決める

■仕様

■関連情報

[takai]

pagerRelativeMulti

• CSS: r8219
• マークアップ修正あり
  • c_event_list.tpl
  • c_topic_list.tpl
  • h_message_box.tpl

修正前

<div class="pagerRelativeMulti">
    <p>最近書き込みがあったトピックから順に表示しています。</p>
    <p><a href="./?m=pc&amp;a=page_c_event_list&amp;target_c_commu_id=237">イベント一覧はこちら</a></p>
    <div class="pager">
        <p class="number">1件～2件を表示</p>
    </div>
</div>

<div class="pagerRelativeMulti">
    <p class="icons">
        <span><img alt="返信済み" src="./skin/default/img/icon_mail_4.gif"/>返信済み</span>
    </p>
    <div class="pager">
        <p class="number">29件中 1件～20件を表示</p><p class="next"><a href="./?m=pc&amp;a=page_h_message_box&amp;ru_page=2&amp;box=inbox&amp;keyword=&amp;target_c_member_id=&amp;year=&amp;month=&amp;day=">次を表示</a></p>
    </div>
</div>

• <div class="pager"> に対応して、<div class="text">でマークアップする

修正後

<div class="pagerRelativeMulti">
    <div class="text">
        <p>最近書き込みがあったトピックから順に表示しています。</p>
        <p><a href="./?m=pc&amp;a=page_c_event_list&amp;target_c_commu_id=237">イベント一覧はこちら</a></p>
    </div>
    <div class="pager">
        <p class="number">1件～2件を表示</p>
    </div>
</div>

<div class="pagerRelativeMulti">
    <div class="text">
        <p class="icons">
            <span><img alt="返信済み" src="./skin/default/img/icon_mail_4.gif"/>返信済み</span>
        </p>
    </div>
    <div class="pager">
        <p class="number">29件中 1件～20件を表示</p><p class="next"><a href="./?m=pc&amp;a=page_h_message_box&amp;ru_page=2&amp;box=inbox&amp;keyword=&amp;target_c_member_id=&amp;year=&amp;month=&amp;day=">次を表示</a></p>
    </div>
</div>

[takai]

pagerRelativeMulti のCSS修正は r8218 と r8219 の2つ。

[takai]

pagerRelativeMulti の関連チケット #2942

[takai]

• .infoBox .parts { @rel
• .infoBox ul.moreInfo { @abs

このセレクタは position のままにしておく。

• c_event_detail.tpl
• c_home.tpl
• h_review_list_product.tpl
• inc_f_home_h_prof.tpl
  • f_home.tpl
  • h_prof.tpl

※ f_home.tplで、『マイフレンドに追加』の部分のマイフレンドの文言を変えられるため、ここが長くなった場合に文字が見えなくなるかもしれない。

[takai]

.diaryDetailBox .partsHeading

• CSS: r8240
• 関連チケット: #2939 (同じ修正)

[takai]

.searchResultList .item

.searchResultList .item {
	zoom: 1;
	position: relative;
}

不要なので削除。

• CSS: r8405

[takai]

.homeMainTable .partsHeading p.link

• CSS: r8406

[takai]

Replying to takai:

.homeMainTable .partsHeading p.link

• CSS: r8406

• r8407

確認用 background を削除。

[takai]

.formTable .partsHeading p.link

• CSS: r8408
• マークアップ修正あり
  • h_config_prof.tpl

修正前

<div class="partsHeading"><h3>プロフィール変更</h3><p>(<strong>※</strong>の項目は必須です)</p>({if $SSL_SELECT_URL})<p class="link"><a href="({$SSL_SELECT_URL})">({if $HTTPS})標準(http)({else})SSL(https)({/if})はこちら</a></p>({/if})</div>

• <h3>プロフィール変更</h3><p>(<strong>※</strong>の項目は必須です)</p> を <div class="text">～</div> で囲む

修正後

<div class="partsHeading"><div class="text"><h3>プロフィール変更</h3><p>(<strong>※</strong>の項目は必須です)</p></div>({if $SSL_SELECT_URL})<p class="link"><a href="({$SSL_SELECT_URL})">({if $HTTPS})標準(http)({else})SSL(https)({/if})はこちら</a></p>({/if})</div>

[takai]

• CSS: r8409

partsHeading の 右パディングを指定。

[takai]

以上で、xhtml_style.php は position 指定でないと配置できないものを除いて float レイアウトに全て変更完了。

[takai]

注意：修正すべきテンプレートとして挙げたのは webapp ディレクトリ以下のものなので、bizのテンプレートにも修正すべきtplが含まれているかもしれない。

[takai]

#2844で修正に関して説明しています。

[ebihara]

対応ありがとうございます。取り込みをおこないます。

[ebihara]

r8431, r8432 でマークアップの修正をおこないました。

[ebihara]

r8471 で指定するべきクラスを指定していなかったのを修正しました。