html - Magento ページの書式設定

Question

Magento で販売ページのスタイルを設定しようとしています。ここにページがあります: http://petpresto.com.au/why-choose-us/

[CMS] > [ページ] に移動して、見栄えの良いページを作成します。それはすべて中央に配置され、垂直方向にきれいに整列されています。しかし、そのページを公開してサイト上で実際に見ると、ひどいものに見えます。私は何を間違っていますか？

サポートが必要な詳細:

1. セル テーブル内のテキストを垂直方向に揃える
2. ページを中央揃えにします
3. ページの背景を白くする
4. テキストと画像のレスポンシブ (可能であれば?)
5. クロムでは、上位 3 つの画像のサイズが縮小されますが、Firefox やエクスプローラーでは縮小されません。これはなぜ起こり、どうすれば修正できますか?

私はこれを半分まともに見せようとして夢中になっています。助けてください！

スクリーンショット: これは、エディターがどのように見えるかを示すスクリーンショットです。最初のいくつかのテーブル/セルが表示されます。下にスクロールすると、ページの残りの部分は同じように見えます。

以下に貼り付けたコードの完全なコピー。

<p style="text-align: center;"><strong><span style="font-size: xx-large;">Why Choose Us?</span></strong></p>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Free Express Shipping" src="http://petpresto.com.au/images/free-delivery256.jpg" alt="Free Express Shipping" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">FREE Express Shipping</span></strong></p>
<p>You get FREE&nbsp;<strong>Express Delivery</strong>&nbsp;with Australia Post.</p>
<p>Anything you order by 4pm (AEST) will be shipped the same day. Tracking number will be provided so you can follow the parcel on the Australia Post website.</p>
<p>Items under 1kg and in metro areas will arrive the next business day, others a maximum of three days.&nbsp;Super fast!</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Money Back Guarantee" src="http://petpresto.com.au/images/money-back-guarantee256.png" alt="Money Back Guarantee" width="256" height="239" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Money Back Guarantee</span></strong></p>
<p>You're covered by our famous FULL 100% No Questions Asked Money Back Guarantee!</p>
<p>If you want your money back just return the product within 28 days and we'll give you a<strong> full refund, no questions asked.</strong> Additional shipping is the buyers responsibility.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Two Year Warranty" src="http://petpresto.com.au/images/2-year-warranty256.png" alt="Two Year Warranty" width="256" height="195" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Two Year Warranty</span></strong></p>
<p>You get a&nbsp;2 Year Warranty&nbsp;covering any defects.</p>
<p>We go to great lengths to ensure our products outlast the competition in every way - but in the rare case that something does go wrong just contact us for a&nbsp;<strong>free replacement or refund</strong>.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Warehouse Pricing" src="http://petpresto.com.au/images/warehouse256.png" alt="Warehouse Pricing" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Discount Warehouse Price</span></strong></p>
<p>Your products are<strong> shipped&nbsp;direct from our Sydney warehouse.</strong></p>
<p>This cuts out any middle man and reduces business expenses.</p>
<p>All of those savings are then passed on to you. So you get the lowest possible price!</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Australian Business" src="http://petpresto.com.au/images/Australia-Flag256.png" alt="Australian Business" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Australian Business</span></strong></p>
<p>We are&nbsp;100% Australian owned and operated.</p>
<p>Buying Australian gives you peace of mind. We are just around the corner if you need any help.</p>
<p>Plus you get that warm fuzzy feeling for supporting a genuine Ozzie business.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="All Cards Welcome" src="http://petpresto.com.au/images/visa-mastercard256.png" alt="All Cards Welcome" width="256" height="281" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Safe and Secure Payment</span></strong></p>
<p>Your payment is safley and securley processed through our PCI-DSS certified payment processor.</p>
<p>We accept all major cards including Visa, Mastercard, American Express, Dinners Club, and more.</p>
</td>
</tr>
</tbody>
</table>

Answer 1

以下のコードをチェックして、ニーズに合っているかどうかを確認してください。

.std table {
    float:none; 
    margin: auto;
 }

.std img {
    height:138px;
    width:138px;
    /* max-width: 100%; remove this */
}

フィドルの例

今、私がよく理解していないことが1つあります.背景色を白にしたいですか？使用して#f7f7f6; いる を使用すると、一部の画像で問題が発生する可能性があります。すべての画像が透明で背景に溶け込むわけではないためです。

Answer 2

Ok、

あなたが持っているあなたのコードで：

<table cellspacing="10" border="0" align="center" style="width: 600px;">

変更：

<table cellspacing="10" border="0" align="center" style="width: 600px; float:none; margin: auto;">

それはあなたの問題を解決します。table タグのクラスを作成し、この css を別のファイルに配置することをお勧めします。

乾杯、