画像のレイアウトの問題について何か助けていただければ幸いです。簡単に修正できると確信していますが、エラーがどこにあるのかを突き止めるのに本当に苦労しています。
eBay のリストを作成しましたが、最初の行の 2 番目の画像が最初の画像よりもわずかに低く、画像のスタックの問題もあります。理由がわかりません。リストへのリンクは次のとおりです。
http://www.ebay.co.uk/itm/330879734229?var=&ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
3 番目に、ここにあるようなイメージ スライダーとライトボックスを実装したいと思います。
しかし、私は似たようなものを見つけることができないようです.正しい方向に私を向ける助けは素晴らしいでしょう.
eBayのリストのコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
@charset "utf-8";
body {
font:100%/1.4;
color:#000;
margin:0;
padding:0;
font-family: Sans-Serif, 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#thumbnailArea {
float: left;
white-space:nowrap;
padding: 5px;
margin: 0px 10px 40px 30px;
width: 200px;
height: 265px;
border: 3px solid #999999;
}
.crossbox {
float:left;
height:auto;
width: 1060px;
border-top: 5px solid #999999;
border-bottom: 5px solid #999999;
}
a img {
border:none;
}
ul,ol,dl {
margin:0;
padding:0;
}
h3,h6,p {
margin-top:0;
}
h1 {
font-size:80%;
display:inline;
color:#000;
}
h1,h2,h3,h4,h6,h5 {
margin-top:3px;
font-weight:100;
}
h2,h3,h6,h5{
color:#666;
}
h2 {
font-weight:bold;
color:#36b3fa;
fontfamily: Sans-Serif;
margin:0px;
}
h3 {
font-size:200%;
display:inline;
}
h4 {
font-size:90%;
color:#333;
margin:0;
}
h5 {
color:#666;
font-size:100%;
margin-top: 0px;
margin-bottom: 5px;
line-height: 5px;
}
h6 {
font-size:100%;
}
#list {
margin-top:0;
margin-left:40px;
line-height: 15px;
}
.spacer {
}
.container {
background:#FFF;
overflow:auto;
width: 1100px;
}
.sprybox {
margin-left: 40px;
height:50px;
width:890px;
}
.header {
position: relative;
width:880px;
height:200px;
}
.header-logo {
width: 1100px;
height: auto;
}
#element {
width:600px;
float:left;
height:auto;
margin-top: 30px;
}
.clear {
clear:both;
}
a:hover,a:active,a:focus {
text-decoration:none;
color:#333;
}
.content {
width:280px;
float:left;
height:auto;
margin-left:0px;
margin-bottom:35px;
}
.breakline {
width: auto;
margin-bottom: 10px;
border-bottom:2px solid #999;
}
.deliverydetails,.paymentdetails,.productdescription,.feedback,.aboutus,.termsandconditions {
width:380px;
height:auto;
background-color:#f7f7f7;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
padding:30px 30px 30px 30px;
border:2px solid #666;
margin-left: 0px;
margin-top: 30px;
}
.imagecontainer {
float:left;
width:525px;
}
#footer {
float:left;
width:1100px;f
ont-family:arial;
font-size:13px;
clear:left;
background-color:#36b3fa;
background-repeat:no-repeat;
width:1100px;height:48px;
}
#footer .footerText {
float:left;
width:420px;
color:white;
margin-top:16px;
margin-left:10px;
}
#footer .footerText a {
color:white;
text-decoration:none;
}
#footer .footerText a:hover {
color:white;
text-decoration:underline;
}
.copy {
text-align:left;
float:right;
clear:both;
margin-top:-27px;
margin-right:5px;
background-color: transparent;
border: none;
}
.outercont {
}
</style>
<div class="outercont">
<div class="container">
<div class="logo"> <a href="http://stores.shop.ebay.co.uk/New-Horizon-Products/home.html"> <img src="http://sweetvision.co.uk/ebayimages/MWT/logobanner2.jpg" alt="header logo"
class="header-logo" /> </a></div>
<!-- end.header --><!--end of sprybox -->
<div class="imagecontainer">
<style type="text/css">
<!--
.Thumbnail-Image {
float: left;
margin: 10px 0 0 10px;
padding: 0 0 0 0;
width: 246px;
border: 0;
}
.image { float: left; width: 256px; text-align: center; padding:0 0 10px 0; }
.image a { text-decoration: none; font-size: 0.8em; }
.Image-Gallery-Divider { float: left; width: 400px; height: 10px; }
-->
</style>
<script type="text/javascript">
// Create the array object
var ItemImagesArray=new Array
("http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg",
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg",
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg",
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg",
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg","","","","","","","","","","");
// We make sure the first image exists before we execute the displaying of the images
if (ItemImagesArray[0] != "") {
// Create the indexing variable
var ItemImagesArrayIndex = 1;
for (ItemImagesArrayIndex in ItemImagesArray) {
if (ItemImagesArray[ItemImagesArrayIndex] != "") {
// If we do have additional images, create the image object here
document.write("<div class='image'><a href='" + ItemImagesArray[ItemImagesArrayIndex] + "' target='_blank;'><img src='" + ItemImagesArray[ItemImagesArrayIndex] + "' width='246' class='Thumbnail-Image' /></a>");
document.write("<br /><a href='" + ItemImagesArray[ItemImagesArrayIndex] + "' target='_blank;' title='Click to open supersize image'>Click to open supersize image</a></div>");
// Ok we write the dividers here
if (ItemImagesArrayIndex == 1) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
if (ItemImagesArrayIndex == 3) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
if (ItemImagesArrayIndex == 5) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
if (ItemImagesArrayIndex == 7) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
if (ItemImagesArrayIndex == 9) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
if (ItemImagesArrayIndex == 11) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
if (ItemImagesArrayIndex == 13) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); }
}
}
}
</script>
<div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg" width="246" class="Thumbnail-Image"></a><br>
<a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div>
<div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg" target="_blank"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg" width="246" class="Thumbnail-Image"></a><br>
<a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div>
<div class="Image-Gallery-Divider"><!-- No Content --></div>
<div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg" width="246" class="Thumbnail-Image"></a><br>
<a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div>
<div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg" width="246" class="Thumbnail-Image"></a><br>
<a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div>
<div class="Image-Gallery-Divider"><!-- No Content --></div>
<div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg" width="246" class="Thumbnail-Image"></a><br>
<a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div>
</div>
<div class="content">
<div class="productdescription">
<p> <span style="font-size:larger;"><strong>New Ladies bodycon Midi dress - New With Tags.</strong></span> </p>
<center>
<img class="spacer" src="http://sweetvision.co.uk/ebayimages/MWT/break2pinkcurve.jpg" height="2" width="380" />
</center>
<h2>Description</h2>
<h4>Ladies super soft stretch fabric midi Bodycon dress available in either Snake Print or Black Lizard print.</h4>
<h4> These gorgeous, flattering Bodycon dresses are Brand new in their original packaging, and ready for that special occasion.</h4>
<h4>The dresses have the following features:</h4>
<h4>
<ul id="list">
<li>Snake or Lizard print (exactly as shown in the pictures)</li>
<li>Midi length approximately 43 inches </li>
<li>Gorgeous figure hugging and flattering bodycon style</li>
<li>93% Viscose, 7% Elastane − high quality soft fabric</li>
<li>Available in UK Sizes 6−14</li>
</ul>
</h4>
<center>
<img class="spacer" src="http://sweetvision.co.uk/ebayimages/MWT/break2pinkcurve.jpg" height="2" width="380" />
</center>
<h2>Sizes</h2>
<h4>
<ul id="list">
<li>S (Size 6 -8)</li>
<li>M (Size 8 -10)</li>
<li>L (Size 10 -12)</li>
<li>XL (Size 12 -14)</li>
</ul>
</h4>
<center>
<img class="spacer" src="http://sweetvision.co.uk/ebayimages/MWT/break2pinkcurve.jpg" height="2" width="380" />
</center>
<h2>Important</h2>
<h4>As stated in eBay's policies - if for any reason you are unhappy with the item you have purchased please contact me <span style="font-weight:bold">BEFORE</span> leaving feedback. I always have, and always do, everything within my power to resolve an issue and I pride myself on my customer service and the quality of my products.</h4>
<h4> By contacting me first it is only fair as it gives me chance to solve any issues and provide a professional and conscientious service that I set out to achieve.</h4>
</div>
<div class="deliverydetails">
<h2>Delivery details</h2>
<h4>These items will be shipped in 1 working day with an estimated transit period of 2-3 days.</h4>
</div>
<div class="paymentdetails">
<h2>Payment details</h2>
<h4>Payment by Paypal only.</h4>
<h4>Unfortunately we do not accept payment by cheque or postal order.</h4>
</div>
</div>
<!--end div element -->
<div id="footer">
<div class="footerText"><a href="http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=newhorizonproducts">about us</a> | <a href="http://stores.ebay.co.uk/New-Horizon-Products">Visit Store</a> | </div>
<!-- end .container -->
<div class="copy">
<h1>Copyright © New Horizon Products 2013 - All Rights Reserved.</h1>
</div>
</div>
</div>
</div>
<!-- end .container -->
</div>
<!--STARTFROOGALLERY-->
<!--
Copyright ©2009-2012 Frooition Ltd. All rights reserved.
The following HTML, JavaScript and CSS Styling may not be used or reproduced in whole or in part, without the prior permission of Frooition.
All eBay graphics not owned by eBay or eBay associations are the property of the eBay account owner and may not be used without their written authorisation.
Any person or group of persons found to be in breach of this notice may face legal action.
**From the froo apps center**
-->
<link href="http://user.froo.com/32b8225d1d6cfce239ee302226a863f3/FCS/css/froocross.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "http://user.froo.com/32b8225d1d6cfce239ee302226a863f3/FCS/js/froocross.js";
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+">");document.write("</"+az+bz+cz+">");var fz = "http://apps.froo.com/application/FCS/xpromo_content/jsvariable.php?key=32b8225d1d6cfce239ee302226a863f3";
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+">");document.write("</"+az+bz+cz+">");var fw = document.body.offsetWidth;document.write("<style>#froo-gallery-wrap { margin-left:"+((fw-600)/2)+"px; height:0px;}</style>");
</script>
<div id="froo-gallery-wrap" name="froo-gallery-wrap"></div>
</div>
<script language="Javascript">buildFrooGallery();</script>
<!--ENDFROOGALLERY-->
</body>
</html>