1. 首页
  2. 问答
  3. 无法摆脱额外的空间BTW定制滚动条和DIV

无法摆脱额外的空间BTW定制滚动条和DIV

2013-05-26 41 views
0

，你可以附着在图像上看到（这里也a link看到真人版），我有我的自定义蓝色滚动条和2-3之间的像素的额外空间我文章蓝色框。不能找出它从何而来。任何想法？由于无法摆脱额外的空间BTW定制滚动条和DIV

enter image description here

/* Reset 
/* -------------------------------------------- */ 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
b, strong { 
    font-weight: bold; 
} 
em { 
    font-style: italic; 
} 
/* Font family reference 
/* -------------------------------------------- */ 

/* 

font-family:'FuturaW01-LightOblique'; 
font-family:'Futura W01 Book'; 
font-family:'Futura W01 Book Oblique'; 
font-family:'Futura W01 Medium'; 
font-family:'Futura W01 Heavy'; 
font-family:'Futura W01 Bold'; 

*/ 


/* Global 
/* -------------------------------------------- */ 

html, body { 
    width: 100%; 
    height: 100%; 
    min-width:950px; 

} 
body { 

    margin: 0; 
    padding: 0; 
    font-family: 'Futura W01 Book', Arial, sans-serif; 
    font-size: 14px; 
    line-height: 1.285714286; /* 18px */ 
    color: #2b2b2b; 
    -webkit-font-smoothing: antialiased; 
    z-index: 0; 
    position: absolute; 
    /* background: url(../images/biographie.jpg); */ 
    background: url(../images/tigramback.jpg); 
    top: 0; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    position:fixed; 
} 
#container { 
    width:100%; 
    height:100%; 
    } 
a { 
    outline: none; 
    color: #2b2b2b; 
    text-decoration: none; 
} 

.menu li a { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 10px; 
    line-height: 1; 
    letter-spacing: 0.10em; 
    text-transform: uppercase; 
    padding-bottom: 2px; 
    border-bottom: 1px solid #3B5898; 
} 
.menu li a:hover, .menu li.selected a { 
    border-bottom: 1px solid #fff; 
} 
/* Fade border under links on hover */ 
.csstransitions .menu a, .csstransitions .footer a { 
    -webkit-transition: border, color 0.2s ease-out; 
    -moz-transition: border, color 0.2s ease-out; 
    -ms-transition: border, color 0.2s ease-out; 
    -o-transition: border, color 0.2s ease-out; 
    transition: border, color 0.2s ease-out; 
} 
p a { 
    border-bottom: 1px solid #3B5898; 
} 
p a:hover { 
    border-bottom-color: #fff; 
} 
h1, h2 { 
    text-transform: uppercase; 
} 
h1 { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 20px; 
    letter-spacing: 0.04em; 
    margin-bottom: 1em; 
    padding-top:5px; 
} 
h2 { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 16px; 
    letter-spacing: 0.04em; 
    margin-bottom: 1em; 
    padding-top:5px; 
} 
h3 { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 12px; 
    margin-top: 14px; 
    font-weight: bold; 
    margin-bottom: 1em; 
} 
p { 
    font-size: 14px; 
    margin-bottom: 1.25em; 
} 
strong, b { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-weight: bold; 
} 
img { 
    max-width: 100%; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 
/* Navigation 
/* -------------------------------------------- */ 
.menu { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    min-width: 768px; 
    max-width: 1950px; 
    margin: 0 auto; 
    height: 65px; 
    z-index: 310; 
    color: #2b2b2b; 
    background-color: transparent; 
    background-image: url('../images/shadow-menu.png'); 
    background-position: 100% 100%; 
    background-repeat: repeat-x; 
    padding-bottom: 5px; 
} 
.menu .inner { 
    height: 65px; 
    width: 100%; 
    background: #fff; 
    overflow: hidden; 
    text-align: center; 
} 
.menu .logo { 
    position: absolute; 
    left: 81px; 
    top: 19px; 
} 
.menu ul { 
    display: inline-block; 
    margin: 18px auto 0 auto; 
    position: relative; 
    float: right; 
    padding-right: 200px; 
} 
.menu li { 
    float: left; 
    margin-right: 30px; 
    margin-top: 10px; 
} 
.menu li:last-child { 
    margin-right: 0; 
} 
.menu li a { 
    float: left; 
} 
.menu .pipe { 
    width: 1px; 
    float: left; 
    height: 33px; 
    padding-left: 30px; 
    position: relative; 
    top: -10px; 
    background: url('../images/pipe.gif') 100% 0 repeat-y; 
} 
/* Search */ 
.social { 
    position: absolute; 
    right: 50px; 
    top: 13px; 
    text-align: right; 
} 


.social ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 

} 
.social li { 
    margin: 2px; 
} 


/* Article - white bg */ 

.article-intro{ 
    clear: right; 
    float: left; 
    text-align:justify; 
    border-bottom-left-radius: 35px; 
    border-bottom-right-radius: 35px; 
    border-top-left-radius: 35px; 
    width: 10px; 
    height: 150px; 
    margin-left:150px; 
    position: relative; 
    z-index: 15; 
    margin-top: 90px; 

    opacity:0.95; 

} 
.article { 
    clear: right; 
    float: right; 
    text-align:justify; 
    color:#FFF; 
    opacity:1; 
    width: 550px; 
    padding: 20px 32px 25px 50px; 
    position: relative; 
    z-index: 15; 
    margin-top: 46px; 
    background: #3B5898; 
    overflow:scroll; 
    /* box-shadow:2px 0 5px 0 rgba(0, 0, 0, 0.5);*/ 
    box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5); 

} 

.article .imgShadow{ 
border:none; 
margin-top:-9px; 
} 

.icons { 
    position: absolute; 
    right: 100%; 
    top: 0; 

} 
.icons ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 

} 
.icons li { 

    margin: 0 100px 5px; 
} 
.article p { 
    padding-right:20px; 
} 
.article h1, .article h2 { 
    margin-top: -4px; 
    padding-bottom: 2px; 
} 

/* Footer 
/* -------------------------------------------- */ 
.footer { 
    position: fixed; 
    z-index: 300; 
    bottom: 0; 
    width: 100%; 
    min-width: 768px; 
    max-width: 1950px; 
    margin: 0 auto; 
    background: #fff; 
    height: 40px; 
} 

.footer-hotnews { 
    background: #3B5898; 
    color: #fff; 
    font: italic normal 18px Georgia, serif; 
    text-decoration:none; 
    height: 38px; 
    width: 200px; 
    padding-top: 8px; 
    display: block; 
    text-align: left; 
    padding-left: 50px; 
    float: left; 
} 



.footer-copyrights { 
    color: #333; 
    text-decoration:none; 
    height: 38px; 
    font-size:12px; 

    padding-top: 14px; 
    display: block; 
    text-align: right; 
    padding-right: 50px; 
    float: right; 
} 

.hot_news { 
    color: #fff; 
    text-transform: uppercase; 
    /* border-bottom-color: #2b2b2b; */ 
} 

.hot_news:hover { 
    background-color: #e34732; 
} 

.footer a:hover { 
    border-bottom-color: #ECB825; 
} 

.jspContainer { 
    overflow: hidden; 
    position: relative; 
} 
.jspPane { 
    position: absolute; 
} 
.jspVerticalBar { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 40px; 
    height: 100%; 
    background: red; 
} 
.jspHorizontalBar { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    background: red; 
} 
.jspVerticalBar *, .jspHorizontalBar * { 
    margin: 0; 
    padding: 0; 
} 
.jspCap { 
    display: none; 
} 
.jspHorizontalBar .jspCap { 
    float: left; 
} 
.jspTrack { 
    background: #ffffff; 
    position: relative; 
} 
.jspDrag { 
    background: #3B5898; 
    position: relative; 
    top: 0; 
    left: 0; 
    cursor: pointer; 
} 
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { 
    float: left; 
    height: 100%; 
} 
.jspArrow { 
    background: #ffffff; 
    text-indent: -20000px; 
    display: block; 
    cursor: pointer; 
} 
.jspArrow.jspDisabled { 
    cursor: default; 
    background: #ffffff; 
} 
.jspVerticalBar .jspArrow { 
    height: 30px; 
} 
.jspHorizontalBar .jspArrow { 
    width: 30px; 
    float: left; 
    height: 100%; 
} 
.jspVerticalBar .jspArrow:focus { 
    outline: none; 
} 
.jspCorner { 
    background: #eeeef4; 
    float: left; 
    height: 100%; 
} 
* html .jspCorner { 
    margin: 0 -3px 0 0; 
}

HTML：

<div class="menu"> 
     <div class="inner"> <a href="www.dfdsfdsfs.com/index.html" class="logo">Logo</a> 
    <ul> 
      <li > <a href="www.dfdsfdsfs.com">Category 1</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 2</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 3</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 4</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 5</a> </li> 
      <li class="selected"> <a href="www.dfdsfdsfs.com/">Category 6</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Contact</a> <span class="pipe"></span> </li> 
     </ul> 
    <div class="social"> 
      <ul> 
      <li><img src="images/facebook-icon.png"></li> 
      <li><img src="images/linkedin-icon.png"></li> 
      <li><img src="images/youtube-icon.png"></li> 
      </ul> 
     </div> 
    </div> 
    </div> 
<div id="container" class="scroll-pane"> 
<div class="article-intro"> 
    <div class="icons"> 
     <ul> 
      <li><img src="images/mail-icon.png"></li> 
      <li><img src="images/tel-icon.png""></li> 

     </ul> 
    </div> 
</div> 
<div class="article"> 
    <div class="icons"> 
     <ul> 
      <li><img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="50" height="50"></li> 
      <li><img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="50" height="50"></li> 
     </ul> 
    </div> 
    <img class="imgShadow" src="images/imgshadow.png"> 
<h1>Once upon a time</h1> 
</a><h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side."> 
    <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75"> 
</a><h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
<h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
<h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
    <p><strong>LOREM IPSUM</strong></p> 
      <h3>Tel. +123 456.789 - E-mail: [email protected]</h3> 
      <a class="lefticons" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side."> 
    </div> 


    </div> 
</div> 
<div class="footer"> 
<a href="#_" class="footer-hotnews">Prochains événements</a> 
<a href="#_" class="footer-copyrights">Copyright 2013</a> 
    <div class="modern-ticker mt-round"> 
      <div class="mt-news"> 
       <ul> 
        <li><a href="#" target="_self">News 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news 1 news</a></li> 
        <li><a href="#" target="_self">News 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news 2 news</a></li> 
        <li><a href="#" target="_self">News 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news 3 news</a></li> 
        <li><a href="#" target="_self">News 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news 4 news</a></li> 
        <li><a href="#" target="_self">News 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news 5 news</a></li> 
       </ul> 


      </div> 


     <script type="text/javascript"> 

      $(".modern-ticker").modernTicker({ 
       effect: "scroll", 
       scrollInterval: 20, 
       transitionTime: 500, 
       autoplay: true 
      }); 

     </script> 
</body>

来源

2013-05-26 Greg

回答

1

您应该添加margin-right各地-3px - -4px和溢出的可见

尝试此风格article

.article { 
clear: right; 
float: right; 
text-align: justify; 
color: #FFF; 
opacity: 1; 
width: 550px; 
padding: 20px 32px 25px 50px; 
position: relative; 
z-index: 15; 
margin-top: 46px; 
background: #3B5898; 
overflow: visible; 
box-shadow: -3px 0 5px 0 rgba(0, 0, 0, 0.5); 
margin-right: -4px; 
}

只是提醒，删除最后的报价：<img src="images/tel-icon.png"">

来源

2013-05-26 19:23:11

+0

谢谢。现在几近完美。但随着-3px有一个1个像素的间隙顺便说一句的文章和滚动条，并与-4px看起来都有点重叠，并创造了一种边界。你知道为什么吗？更新的链路：http://goo.gl/dqlMf由于 – Greg

+0

因为'article'使用'箱shadow'，试试这个'箱阴影：-3px 0 5像素0 RGBA（0，0，0，0.5）;' –

相关问题

 相关问题