1. 首頁
  2. 問答
  3. 無法擺脫額外的空間BTW定製滾動條和DIV

無法擺脫額外的空間BTW定製滾動條和DIV

2013-05-26 40 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）;' –

相關問題

 相關問題