source: branches/comu-ver2/html/user_data/packages/default/css/products.css @ 18207

Revision 18207, 6.1 KB checked in by miningbrownie, 15 years ago (diff)

 http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=4320&forum=8&post_id=19282#forumpost19282 で言われているページ送りとかのレイアウト崩れに対する対策

Line 
1@charset "utf-8";
2
3
4/* 検索結果
5----------------------------------------------- */
6p.conditionarea {
7    clear: both;
8    width: 566px;
9    margin: 0 auto;
10    padding: 5px;
11    border: solid 1px #333;
12}
13
14
15/* ページ送り
16----------------------------------------------- */
17.pagenumberarea, .pagecondarea {
18    clear: both;
19    margin: 20px 0;
20    padding: 10px;
21    background-color: #f3f3f3;
22}
23
24ul.pagenumberarea {
25    height: 2.5ex;
26    padding:0px;
27}
28
29ul.pagecondarea {
30    border: 1px solid #CCCCCC;
31}
32
33ul.pagenumberarea li {
34    float: left;
35    width: 32.9%;
36}
37
38ul.pagenumberarea li.left {
39    text-align: left;
40    white-space: nowrap;
41    margin-left:10px;
42    width: 27.9%;
43}
44
45ul.pagenumberarea li.center {
46    text-align: center;
47    white-space: pre;
48    width: 27.9%
49}
50
51ul.pagenumberarea li.right {
52    float:right;
53    text-align: right;
54    white-space: nowrap;
55    width: 38.7%;
56    margin-right:10px;
57}
58
59.pagenumberarea .pagenumber{
60    color: #ff0000;
61    font-weight: bold;
62}
63
64p.pagenumberarea .number{
65    font-weight: bold;
66}
67
68/* 商品一覧 */
69
70/* タイトル
71----------------------------------------------- */
72.product h2.title {
73    border-color: #f00 #ccc;
74    background: url("../img/products/title_icon.gif") no-repeat left center;
75    background-color: #ffebca;
76}
77
78/* 商品
79----------------------------------------------- */
80div.listarea {
81    clear: both;
82    width: 580px;
83    padding: 20px 0 30px 0;
84    overflow: auto;
85    background: url("../img/common/line_580.gif") no-repeat bottom;
86}
87
88div.listphoto {
89    float: left;
90    width: 130px;
91}
92
93div.listrightblock {
94    float: right;
95    width: 440px;
96}
97
98div.listrightblock li {
99    display: inline;
100    padding: 0 0 10px 0;
101}
102
103div.listrightblock h3 {
104    width: 420px;
105    margin: 5px 0;
106    padding: 5px 10px;
107    border-bottom: 2px solid #ebebd6;
108    background-color: #f9f9ec;
109    font-size: 120%;
110}
111
112div.listrightblock h3 a {
113    font-weight: bold;
114}
115
116div.listrightblock .listcomment {
117    margin: 0 0 10px 0;
118}
119
120div.listrightblock .pricebox {
121    float: left;
122}
123
124div.listrightblock .soldout {
125    clear: both;
126}
127
128div.listrightblock .in_cart {
129    margin: 20px auto 5px 130px;
130    padding: 10px;
131    width: 285px;
132    clear: both;
133    background-color: #ecf5ff;
134    border: 1px solid #CCCCCC;
135}
136
137div.listrightblock .quantity {
138    width: 150px;
139}
140
141div.listrightblock .btnbox {
142    margin: 0 0 10px 0;
143    padding: 1px;
144    float: right;
145}
146
147div.listrightblock dt {
148    width: 75px;
149    float: left;
150    text-align: right;
151    padding: 3px;
152    font-weight: bold;
153}
154
155div.listrightblock dd {
156    padding: 3px;
157}
158
159div.listrightblock .cartbtn {
160    clear: both;
161    text-align: center;
162}
163
164div.listrightblock .cartbtn img {
165    width: 115px;
166    margin: 5px 0 0 0;
167}
168
169div.listrightblock .box54 {
170    width: 54px;
171    border: solid 1px #ccc;
172}
173
174/* 商品詳細 */
175
176/* 商品
177----------------------------------------------- */
178div#detailarea {
179    width: 580px;
180    margin: 15px 0 0 0;
181}
182
183div#detailphotoblock {
184    float: left;
185    width: 292px;
186}
187
188div#detailphotoblock p {
189    margin: 5px 0 0 0;
190}
191
192div#detailrightblock {
193    float: right;
194    width: 280px;
195}
196
197div#detailrightblock li {
198    display: inline;
199}
200
201div#detailrightblock h2 {
202    margin: 5px 0;
203    padding: 0;
204    color: #ff6600;
205    font-size: 140%;
206    font-weight: bold;
207}
208
209div#detailrightblock dl {
210    padding: 15px 0 0 0;
211}
212
213div#detailrightblock dt {
214    font-weight: bold;
215    padding: 0 0 0 15px;
216    background: url("../img/common/arrow_gray.gif") no-repeat left center;
217}
218
219div#detailrightblock dd {
220    margin: 0 15px 0 0;
221}
222
223div#detailrightblock .box54 {
224    width: 54px;
225    border: solid 1px #ccc;
226}
227
228div#detailrightblock .btn {
229    clear: both;
230    margin: 15px 0 0 0;
231    padding: 15px 0 0 0;
232    text-align: center;
233    vertical-align: top;
234    background: url("../img/common/line_280.gif") no-repeat;
235}
236
237/* サブタイトル
238----------------------------------------------- */
239div.subarea {
240    clear: both;
241    width: 580px;
242    padding: 30px 0 0 0;
243}
244
245div.subarea h3 {
246    font-size: 120%;
247    margin: 0 0 10px 0;
248    padding: 5px 10px;
249    background-color: #e4e4e4;
250    clear: both;
251}
252
253div.subtext {
254    float: left;
255    width: 365px;
256}
257
258div.subphotoimg {
259    float: right;
260    width: 202px;
261}
262
263div.subphotoimg p {
264    margin: 5px 0 0 0;
265    text-align:right;
266}
267
268
269/* お客様の声
270----------------------------------------------- */
271div#customervoicearea {
272    clear: both;
273    width: 580px;
274    padding: 35px 0 0 0;
275}
276
277div#customervoicearea h2 {
278    padding: 0 0 10px 0;
279}
280
281div#customervoicearea .voicedate{
282    font-weight: bold;
283    margin: 10px 0 0 0;
284}
285
286div#customervoicearea .voicetitle{
287    padding: 5px 0;
288    font-size: 120%;
289    font-weight: bold;
290}
291
292div#customervoicearea li {
293    padding: 0 0 10px 0;
294    background: url("../img/common/line_580.gif") no-repeat bottom;
295}
296
297.recommend_level {
298    color: #FF0000;
299}
300
301/* トラックバック
302----------------------------------------------- */
303div#trackbackarea {
304    clear: both;
305    width: 580px;
306    padding: 35px 0 0 0;
307}
308
309div#trackbackarea h2 {
310    padding: 0 0 10px 0;
311}
312
313div#trackbackarea h3 {
314    font-size: 100%;
315    font-weight: bold;
316    padding: 0 0 10px 0;
317}
318
319div#trackbackarea .box500 {
320    width: 500px;
321    border: solid 1px #ccc;
322}
323
324/* この商品を買った人はこんな商品も買っています
325----------------------------------------------- */
326div#whoboughtarea {
327    clear: both;
328    width: 580px;
329    padding: 35px 0 0 0;
330}
331
332div.whoboughtblock {
333    clear: both;
334    width: 580px;
335    padding: 10px 0;
336    overflow: auto;
337}
338
339div.whoboughtleft {
340    float: left;
341    width: 280px;
342    padding: 10px 0;
343    position: relative;
344    background: url("../img/common/line_578.gif") no-repeat bottom;
345}
346
347div.whoboughtleft img {
348    display: block;
349    float: left;
350    margin: 0 5px 0 0;
351}
352
353div.whoboughtleft p {
354    margin: 0 0 5px 0;
355}
356
357div.whoboughtright {
358    float: right;
359    width: 280px;
360    padding: 10px 0;
361    position: relative;
362    background: url("../img/common/line_578.gif") no-repeat bottom;
363}
364
365div.whoboughtright img {
366    display: block;
367    float: left;
368    margin: 0 5px 0 0;
369}
370
371div.whoboughtright p {
372    margin: 0 0 5px 0;
373}
374
375div.whoboughtleft h3 {
376    font-size: 100%;
377}
378
379div.whoboughtright h3 {
380    font-size: 100%;
381}
Note: See TracBrowser for help on using the repository browser.