スタイルシートのみです。
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{
＿width:90%;margin:0 auto;
＿max-width:900px;min-width:640px;
}
div.section{position:relative;}
div.section:after{content:"";display:block;width:100%;clear:left;}
div.section div{margin:0;}
#merchandise{width:80%;margin-left:20%;}
#merchandise ol,merchandise ol li{
＿display:block;list-style:none;margin:0;padding:0;
}
#merchandise ol li{
＿width:220px;height:360px;overflow:hidden;float:left;
＿border:solid 1px gray;position:relative;margin:5px;
＿text-align:center;padding-top:5px;
}
#merchandise ol li ol li{
＿width:100%;height:auto;border:none;
＿position:static;margin:0;margin:5px;
}
#merchandise ol li ol li+li{
＿width:200px;text-align:left;text-indent:1em;margin-top:20px;
＿height:70px;line-height:18px;padding:2px 5px;
}
#merchandise ol li ol li+li+li{
＿text-align:right;text-indent:0;position:absolute;
＿bottom:5px;right:5px;border:none;height:auto;
}
#merchandise ol li ol li+li:hover{
＿position:relatve;height:106px;z-index:100;overflow:auto;
＿background-color:white;border:solid 1px black;
＿box-shadow:3px 3px 3px 2px rgba(0,0,0,4);
}
#merchandise ol li ol li+li+li:hover{height:auto;border:none;box-shadow:none;}
#merchandise ol li ol li+li:hover+li{z-index:-10;}
#merchandise ol li.new{padding-top:220px;text-align:right;height:145px;z-index:20;}
#merchandise ol li.new ol{position:relative;top:-216px;height:360;z-index:-10;}
#merchandise ol li.new ol li+li+li{
＿text-align:right;position:absolute;bottom:-340px;
}
#merchandise ol li.new:before{
＿content:"NEW";color:red;position:absolute;top:0px;
＿left:0;border:solid 2px red;padding:2px;z-index:10;
}
div.section div.tableContent{
＿position:absolute;left:0;top:0;width:20%;height:100%;
＿background-color:rgb(220,220,255);
}
div.section h2{line-height:2em;background-color:aqua;margin-bottom:10px;}
お礼
感激です。本当にありがとうございます。 図々しくて申し訳ありませんが、お時間があればもう少しお付き合いください。 http://www.victoriassecret.com/clothing/pants 極論すると、上記リンクのようなページをつくりたいですが、もうお察しの通り当方ド素人です。 もしできたらカテゴリ数や画像量など減らした省略バージョンを書いてくださいませんか・・・。 自分なりに手探りで徐々にわかってきつつあるのですが、やはり超えられない壁がありましてにっちもさっちにもいかないのです。甘えた考えではありますが、お許しください。可能であればお願いします。