Question

所以我想在我的eBay模板中实现一个CSS库。当html被单独查看时，它似乎工作正常，但是当放到eBay上时，格式变得很难看。

http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=271147690203
^这是测试列表的链接。我已经包含了HTML和CSS代码。

希望有人可以帮我解决这个问题。我很擅长制作网站。

HTML代码

<div id="fb_container">

<div id="fb_header">
    <img src="http://fb-ltd.net/blue/Images/fblogo.png" alt="logo" />
    <div id="fb_title">
        <span id="fb_titlehighlight">Mobility</span> Enhanced
    </div>
</div>

<div id="fb_menu">
    <ul>
        <li>
            <a href="#">Shop</a>
        </li>
       <li>
            <a href="#">Feedback</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
     </ul>
</div>

<div class="fb_boxtitle">
    <span class="fb_titleInner">Product Title</span>
</div>

<div class="fb_box">
    <div class="fb_contentInner">
         <div id="ebay_gallery_container">
         <p align="center">
               <ul class="hoverbox">
               <li>
               <a href="http://i.imgur.com/TugKQTK.jpg">
               <img src="http://i.imgur.com/TugKQTK.jpg" />
               <img class="preview" src="http://i.imgur.com/TugKQTK.jpg" /></a>
               </li>
               <li>
               <a href="http://i.imgur.com/ZwMRnHO.jpg">
               <img src="http://i.imgur.com/ZwMRnHO.jpg" />
               <img class="preview" src="http://i.imgur.com/ZwMRnHO.jpg" />
               </a>
               </li>
               </ul>
               </p>
               </div>
               </div>
                            <center>Hover over images for Enlarged view</center>

<br /> 
    <p> 
        TEXT 
    </p>
    </div>
</div>

<div class="fb_boxtitle">
    <span class="fb_titleInner"> Satisfaction Guaranteed</span>
</div>

<div class="fb_box">
    <div class="fb_contentInner">
        <p> 
            TEXT 
        </p>
    </div>
</div>

<div class="fb_boxtitle">
    <span class="fb_titleInner">Payment</span>
</div>

<div class="fb_box">
    <div class="fb_contentInner">
        <p> 
            TEXT 
        </p>
    </div>
</div>

<div class="fb_boxtitle">
    <span class="fb_titleInner">Shipping</span>
</div>

<div class="fb_box">
    <div class="fb_contentInner">
        <p> 
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT        TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
        </p>
    </div>
</div>


<div class="fb_footer">
    <div id="fb_footerLeft"> FB Wireless
    </div>
    <div id="fb_footerRight"> All Rights Reserved
    </div>
</div>
</div>
</body>
</html>

CSS代码

body{
text-align:center;
}
#fb_container{
    width: 900px;
    background: #383d43;
    background-image: url(http://fb-ltd.net/images/body2.png) ;
    background-repeat: repeat ;
    background-size: 46px 29px ;  
    color: #cbd9e7;
    font-family: 'Tahoma, Geneva, sans-serif';
    font-size: 12px;
    margin: 0 auto;
    text-align: left;
}
#fb_container table{
        color: #cbd9e7;
        font-size: 12px;
}
#fb_container table {
margin-bottom:10px;
}
#fb_container td{
padding: 5px;
margin: 0; 
border: solid 1px #999;
}
#fb_container td.light{
    background: #383d43;
}

#fb_container p{margin-top: 0;}
#fb_container a:hover{color: #32b8ff;}
#fb_header{width: 820px; margin: 0 40px 0 40px; padding: 30px 0 15px 0;}
#fb_header img{border: 0px;}
#fb_header #fb_title{color: #c76e6e; font-size: 18px;}
#fb_header #fb_title #fb_titleHighlight{color: #fff;}

#ebay_gallery_container{
    width:100%;
    float:left;
    min-height:200px;
}


.hoverbox
{
    cursor: default;
    list-style: none;
}

.hoverbox a
{
    cursor: default;
}

.hoverbox a .preview
{
    display: none;
}

.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -265px;
        left:100px;
    z-index: 1;
        width:400px !important;
        height:auto !important;
}

.hoverbox img
{
    background: #fff;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
}

.hoverbox li
{
    background: #eee;
    color: inherit;
    display: block;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.hoverbox .preview
{
    border-color: #000;
}

#fb_menu{
    width: 818px;
    height: 40px;
    margin: 0 40px 0 40px;
    padding: 12px 0 11px 0;
    background:url(http://fb-ltd.net/blue/Images/menubg.png) repeat-x;
    border: 1px solid #5d5d5d;
}
#fb_menu ul{
    padding: 0;
    margin: 0;
}
#fb_menu li{
    display: block;
    height: 40px;
    float: left;
    margin: 0 0 0 10px;
}
#fb_menu li a{
    display: inline-block;
    height: 29px;
    padding: 12px 24px 12px 24px;
    color: #cbd9e7;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
}
#fb_menu ul li a:hover{
    color: #cbd9e7;
    background: url(http://fb-ltd.net/blue/Images/blue.png) repeat-x;
    text-decoration: none;
}

.fb_boxTitle{
    width: 818px;
    height: 32px;
    margin: 10px 40px 0 40px;
    padding: 9px 0 0 0;
    color: #fff;
    font-size: 20px;
    background: url(http://fb-ltd.net/blue/Images/blue.png) repeat-x;
    border: 1px solid #5d5d5d;
}
.fb_titleInner{
margin-left:10px;
}
.fb_box{
    width: 818px;
    min-height: 100px;
    margin: 0 0 0 40px;
    background: #2a2d32;
    border: 1px solid #5d5d5d;
    border-top: 0;
}
.fb_contentInner{
    margin: 0 5px 5px 5px;
padding:5px 0 0 0;
}
#fb_footer{
    width: 900px;
    height: 50px;
    margin: 10px 0 0 0;
    background: url(http://fb-ltd.net/blue/Images/footerbg.png) repeat-x ;
    font-size: 14px;
    border-top: 1px solid #3c4249;
}
#fb_footerLeft{margin: 15px 0 0 20px; float:left;}
#fb_footerRight{margin: 15px 20px 0 0; float:right;}

易趣Hoverbox画廊问题

0 个答案: