1. 首頁
  2. 問答
  3. 無端空白

無端空白

2013-08-27 32 views
0

我在建立一個響應式網站，我遇到了問題。該網站的移動版本的寬度需要100％，我設法做到這一點，但有些東西是在右側創建空白（這會導致水平滾動）。無端空白

我一直在尋找這一切的原因，但我無法找到它。

當窗口寬度低於600像素時出現問題。

我的網站的代碼：

HTML

<body> 
<div class="container"> 
    <header> 
     <div class="top-border"></div> 
     <div class="header-content"> 
      <div class="logo"><img alt="Tuinservice Duckers" src="images/logo.png" width="294" height="64" /></div> 
      <div class="menuknop">Menu</div> 
      <nav class="menu"> 
       <ul> 
        <li class="geenmargemenu"><a class="active" href="#">Home</a></li> 
        <li><a href="#">Nieuws</a></li> 
        <li><a href="#">Over ons</a></li> 
        <li><a href="#">Foto's</a></li> 
        <li><a href="#">Tuintips</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
      <div class="clear"></div> 
     </div> 
     <div class="clear"></div> 
    </header> 

    <div class="fullwidthimg"> 
    <div class="message"> 
    <h1 class="displayfull headerheading">Welkom, wij zijn Tuinservice Duckers.</h1> 
    <h1 class="displaymobile headerheading">Home</h1> 
    <a href="#" class="button"><h2>Bekijk onze tuinen</h2></a></div> 
    <img width="1920" height="350" alt="Afbeelding Tuin" src="images/slider/IMG_4708.jpg" /> 
    <div class="clear"></div> 
    </div> 


    <div class="content"> 
    <h1 class="homedriekolom">Wij zijn een gepassioneerd hoveniersbedrijf gevestigd in Stein.</h1> 
    </div> 

    <div class="contentcontainer"> 
    <div class="content"> 
    <div class="glyph driekolom begindivs"> 
     <div class="fs1" aria-hidden="true" data-icon="&#xf383;"></div> 
     <h2>Ontwerp</h2> 
     <p>Samen met u ontwerpen wij een unieke tuin, een project op maat dat volledig aan uw wensen voldoet. Wij zullen niet tevreden zijn totdat u dat ook bent.</p> 
    </div> 
    <div class="glyph driekolom negenzestigmarge begindivs"> 
     <div class="fs1" aria-hidden="true" data-icon="&#xf290;"></div> 
     <h2>Aanleg</h2> 
     <p>Ons professionele team legt op vakkundige wijze uw tuin aan en denkt daarbij aan elk detail. De aanleg wordt volledig verzorgd zodat u uw handen vrij heeft.</p> 
    </div> 
    <div class="glyph driekolom begindivs"> 
     <div class="fs1" aria-hidden="true" data-icon="&#xf039;"></div> 
     <h2>Onderhoud</h2> 
     <p>Ook voor het onderhouden van uw tuin kunt u terecht bij Tuinservice Duckers. Zo bent u er altijd van verzekerd dat uw tuin in de perfecte staat verkeerd.</p> 
    </div> 
    <div class="clear"></div> 
    </div> 
    </div> 



    <div class="content"> 
    <h1 class="homedriekolom">Onze tuinen</h1> 
    <span class="onderschrift">Onze tuinontwerpen kenmerken zich door een mooi lijnenspel, waarbij rust in het ontwerp de boventoon voert. Zelf noemen wij onze ontwerpen 'no-nonsense tuinen', met niet veel poespas maar zoals tuinen behoren te zijn.</span> 
    <div class="driekolimg"><img src="images/design/homeimages/IMG_1511.jpg" /></div> 
    <div class="driekolimg"><img src="images/design/homeimages/IMG_4666.jpg" /></div> 
    <div class="driekolimg negenzestigweg"><img src="images/design/homeimages/IMG_4708.jpg"/></div> 
    <div class="clear"></div> 
    </div> 

    <div class="contentnotop hidemobile"> 
    <h1 class="homedriekolom">Partners</h1> 
    <span class="onderschrift">Voor het aanleggen van onze tuinen gebruiken wij alleen materiaal van de hoogste kwaliteit, dit wordt mogelijk gemaakt door de volgende bedrijven.</span> 
    <div class="vierkolom vierkolimg"><a href="http://www.tuinserviceduckers.nl/"><img src="images/logo-s/BW_Duckers.png" onmouseover="this.src='images/logo-s/Duckers.png'" onmouseout="this.src='images/logo-s/BW_Duckers.png'" /></a></div> 
    <div class="vierkolom vierkolimg"><a href="http://in-lite.nl/" target="_blank"><img src="images/logo-s/BW_Inlite.png" onmouseover="this.src='images/logo-s/Inlite.png'" onmouseout="this.src='images/logo-s/BW_Inlite.png'" /></a></div> 
    <div class="vierkolom vierkolimg"><a href="http://www.tigerturf.nl/" target="_blank"><img src="images/logo-s/BW_TigerTurf.png" onmouseover="this.src='images/logo-s/TigerTurf.png'" onmouseout="this.src='images/logo-s/BW_TigerTurf.png'" /></a></div> 
    <div class="vierkolom vierkolimg"><a href="http://www.gardena.com/nl/" target="_blank"><img src="images/logo-s/BW_Gardena.png" onmouseover="this.src='images/logo-s/Gardena.png'" onmouseout="this.src='images/logo-s/BW_Gardena.png'" /></a></div> 
    <div class="clear"></div> 
    </div> 
    <div class="push"></div> 
    </div> 

    <footer class="footer"> 

    <div class="footercontainer"> 

    <div class="footerkolom hidemobile"> 
    <h2>Over ons</h2> 
    <p>Als gepassioneerd hoveniersbedrijf houden wij ons voornamelijk bezig met het aanleggen van tuinen en bestratingen. Ook voor het ontwerp en onderhoud kunt u bij ons terecht.</p> 
    </div> 
    <div class="footerkolom"> 
    <h2>Contact</h2> 
    <p> 
    <span class="vijfhonderd">Tuinservice Duckers</span><br /> 
    Maasbanderkerkweg 36<br /> 
    6171 RT, Stein<br /> 
    +31 (0) 46 433 81 46<br /> 
    [email protected] 
    </p> 
    </div> 
    <div class="footerkolom negenzestigweg"> 
    <h2>Laatste nieuws</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit accumsan quam, sodales vulputate velit dapibus ac. Nam nibh augue, congue sit amet ornare quis, imperdiet rutrum magna.</p> 
    </div> 
    <div class="clear"></div> 
    </div> 

    <div class="clear"></div> 
    </footer> 
    <div class="footerbottom"> 
    <div class="footerbottomkolom"> 
    <div class="rights hidemobile">&copy; Tuinservice Duckers, <a href="http://www.visiamedia.nl" target="_blank" title="Webdesign & Grafisch ontwerp Limburg"><strong>design</strong> door Visia Media</a></div> 
    <div class="socialmedia"><a href="http://www.facebook.com/TuinserviceDuckers" target="_blank" title="Volg Tuinservice Duckers op Facebook"><div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div></a><a href="http://www.twitter.com/tsDuckers" target="_blank" title="Volg Tuinservice Duckers op Twitter"><div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div></a><a href="http://plus.google.com/118078160798794822832/" target="_blank" title="Volg Tuinservice Duckers op Google+"><div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div></a></div> 
    <div class="clear"></div> 
    </div> 
    <div class="clear"></div> 
    </div> 

</body>

CSS：

@charset "utf-8"; 

    * { 
    margin:0px; 
    padding:0px; 
    -webkit-appearance: none; 
    font-family: 'Lato', sans-serif; 
    font-weight:400; 
    color:#676767; 
    font-size:15px; 
    text-decoration:none; 
    border:none; 
    line-height:145%; 
    } 

    h1, h2, h3, h4, h5, h6, h7, .fs1 { 
    color:#403f3f; 
    font-weight:300; 
    } 

    strong { 
    font-weight:500; 
    color:inherit; 
    font-size:inherit; 
    } 

    h1.homedriekolom { 
    text-align:center; 
    font-size:30px; 
    line-height:30px; 
    } 
h1.homedriekolom strong { 
    font-weight:500; 
} 
.onderschrift { 
    text-align:center; 
    font-size:17px; 
    font-weight:300; 
    display:inline-block; 
    padding:20px 0px 40px; 
    color:#403f3f; 
} 
span.homequote { 
    text-align:center; 
    font-size:21px; 
    font-style:italic; 
    display:inline-block; 
    font-weight:300; 
} 

body, html { 
    background-color:white; 
    height:100%; 
    width:100%; 
} 

.container { 
    width:100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-top:0; 
    margin-left:auto; 
    margin-right:auto; 
} 

header { 
    width:100%; 
} 

.top-border { 
    width:100%; 
    height:6px; 
    background-color:#9cab5c; 
} 

.header-content { 
    width:950px; 
    margin:auto; 
    padding:0 5px; 
} 

.logo { 
    float:left; 
} 
.logo img { 
    height:32px; 
    margin-top:16px; 
    width:auto !important; 
} 

.menu { 
    float:right; 
    margin:20px 0; 
} 
.menu ul { 
    list-style:none; 
} 
.menu ul li { 
    display:inline; 
    margin-left:22px; 
} 
.menu ul li a { 
    color:#565656; 
} 
.menu ul li a:hover, .menu ul li a.active { 
    color:#9cab5c; 
} 

.clear { 
    width:100%; 
    clear:both; 
    margin-top:-1px; 
} 

.fullwidthimg { 
    position:relative; 
} 
.fullwidthimg, .fullwidthimg img { 
    width:100%; 
    height:auto !important; 
} 

.fullwidthimg .message { 
    position:absolute; 
    left:50%; 
    width:950px; 
    padding:0 5px; 
    margin-left:-480px; 
    text-align:center; 
    height:136px; 
    top:50%; 
    margin-top:-68px; 
} 
.fullwidthimg .message h1 { 
    color:white; 
    font-size:43px; 
    font-weight:300; 
    text-shadow: 0px 1px 1px #384523; 
} 
.fullwidthimg .message .button { 
    padding:15px 30px; 
    background-color:#9cab5c; 
    margin-top:14px; 
    display:inline-block; 
} 
.fullwidthimg .message .button h2 { 
    color:white; 
    font-size:15px; 
    text-transform:uppercase; 
    font-weight:400; 
} 
.fullwidthimg .message .button:hover { 
    background-color:#8d9b50; 
} 

.contentnotop { 
    width:950px; 
    margin:0px auto; 
    padding:0px 5px 40px; 
} 
.contentnotop p { 
    margin-bottom:7px; 
} 

.content { 
    width:950px; 
    margin:0px auto; 
    padding:60px 8px; 
} 
.contentcontainer { 
    width:100%; 
    background-color:#f0f0f0; 
} 

.content p { 
    margin-bottom:7px; 
} 

.begindivs { 
    text-align:center; 
} 
.begindivs .fs1 { 
    font-size:40px; 
    line-height:40px; 
} 
.begindivs h2 { 
    display:inline-block; 
    font-size:22px; 
    font-weight:500; 
    margin:20px 0 -5px; 
} 
.begindivs p { 
    width:84%; 
    margin:20px auto 0; 
    font-size:14px; 
} 
.driekolom { 
    width:33.3%; 
    float:left; 
} 
.driekolimg { 
    width:33.3%; 
    float:left; 
} 
.driekolimg img { 
    width:93%; 
    height:auto; 
    margin:0 auto; 
    display:block; 
} 

.vierkolom { 
    width:25%; 
    height:12,5%; 
    float:left; 
    overflow:hidden; 
} 
.vierkolimg img { 
    width:70%; 
    margin-top:-50%; 
    height:auto; 
    margin:0 auto; 
    display:block; 
} 

footer { 
    margin-top:32px; 
    width:100%; 
    background-color:#9cab5c; 
    height:300px; 
    color:white; 
} 
.footerbottom { 
    background-color:#8d9b50; 
    color:white; 
} 
.footerbottomkolom { 
    color:white; 
    width:960px; 
    margin:auto; 
    font-size:17px; 
    padding:12px 0 12px; 
} 
.footerbottomkolom a { 
    font-size:17px; 
    color:white; 
} 
footer a { 
    color:white; 
} 
.socialmedia { 
    float:right; 
    width:auto; 
    text-align:right; 
} 
.socialmedia .fs1 { 
    display:inline-block; 
    font-size:20px; 
    margin:5px 0px 0px 13px; 
} 
.socialmedia * { 
    font-size:inherit; 
    color:white; 
} 
.rights { 
    font-size:inherit; 
    color:white; 
    float:left; 
} 

.push { 
    height:300px; 
} 

.footercontainer { 
    width:950px; 
    padding:67px 5px; 
    margin:0 auto; 
} 
.footerkolom { 
    width:28.3%; 
    float:left; 
    padding-right:5%; 
} 
.footerkolom h2 { 
    color:white; 
    font-weight:600; 
    font-size:19px; 
    line-height:19px; 
    margin-bottom:23px; 
} 
.footerkolom p { 
    color:white; 
    line-height:22px; 
} 

.vijfhonderd { 
    font-weight:bold; 
    color:white; 
} 

.displaymobile { 
    display:none; 
} 


/* ICONS */ 

@font-face { 
    font-family: 'whhglyphs'; 
    src:url('fonts/whhglyphs.eot'); 
    src:url('fonts/whhglyphs.eot?#iefix') format('embedded-opentype'), 
     url('fonts/whhglyphs.woff') format('woff'), 
     url('fonts/whhglyphs.ttf') format('truetype'), 
     url('fonts/whhglyphs.svg#whhglyphs') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[data-icon]:before { 
    font-family: 'whhglyphs'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

.menuknop { 
    display:none; 
} 

@media all and (max-width: 960px) { 

.fullwidthimg .message .button { 
    padding:0px; 
    background-color:#9cab5c; 
    margin:0px; 
    display:none; 
} 
.fullwidthimg, .fullwidthimg img { 
    width:100%; 
    height:auto !important; 
} 

.fullwidthimg .message { 
    position:absolute; 
    left:50%; 
    width:96%; 
    padding:0 2%; 
    margin-left:-50%; 
    text-align:center; 
    padding:0; 
    height:34px; 
    top:50%; 
    margin-top:-22px; 
} 
    .fullwidthimg .message h1 { 
    color:white; 
    font-size:34px; 
    line-height:34px; 
    font-weight:300; 
    text-shadow: 0px 1px 1px #384523; 
    } 

    .header-content { 
    width:100%; 
    padding:0px 0%; 
    } 

    h1.homedriekolom { 
    line-height:135%; 
    } 

    .content, .contentnotop { 
    width:96%; 
    padding: auto 2%; 
    } 

    .negenzestigweg { 
    display:none; 
    } 

    .driekolimg { 
    width:48%; 
    margin:1%; 
    } 

    .driekolimg img { 
    width:100% !important; 
    } 

    .driekolom { 
    width:100%; 
    } 
    .negenzestigmarge { 
    margin:60px 0px; 
    } 
    .driekolom p { 
    width:65%; 
    } 

    .footercontainer { 
    width:100%; 
    padding:67px 0px !important; 
    } 

    .footerkolom { 
    width:46%; 
    padding-left:2% !important; 
    padding-right:2% !important; 
    float:left; 
} 

.footerbottom { 
    width:100% !important; 
} 
.footerbottomkolom { 
    width:96%; 
    padding:auto 2% auto 2% !important; 
} 

.menu ul li.geenmargemenu { 
    margin-left:10px !important; 
} 

.logo { 
    margin-left:2%; 
} 
.menu { 
    margin-right:2%; 
} 

} 

@media all and (max-width: 600px) { 


    html, body { 
     width:100% !important; 
     padding:0 !important; 
     margin:0 !important; 
    } 

    .header, .header-content { 
     width:100%; 
     padding:0 !important; 
     margin:0 !important; 
    } 

    .menuknop { 
    display:block !important; 
    color:white; 
    background-color:#8d9b50; 
    width:92% !important; 
    cursor:pointer; 
    font-size:18px; 
    padding:5px 4% !important; 
    margin:0 !important; 
} 

    .menu { 
     width:100%; 
     margin:0 !important; 
     display:none; 
     padding:0 !important; 
    } 
    .menu ul li, .menu ul li.geenmargemenu { 
     width:100%; 
     display:block; 
     margin:0 !important; 
     padding:0 !important; 
     background-color:#9cab5c; 
    } 
    .menu ul li:hover { 
     background-color:#8d9b50; 
    } 

    .menu ul li a { 
     color:white; 
     font-size:18px; 
     padding:5px 4%; 
     width:92%; 
     display:block; 
    } 
    .menu ul li a:hover, .menu ul li a.active { 
     color:white; 
    } 

    .logo { 
     float:none; 
     margin:auto; 
     display:block; 
     width:100%; 
     padding:0 !important; 
     height:auto !important; 
    } 
    .logo img { 
     width:60% !important; 
     height:auto !important; 
     display:block; 
     margin:26px 20% !important; 
    } 

    .displaymobile { 
     display:block; 
    } 
    .displayfull, .hidemobile { 
     display:none; 
    } 

    .footerkolom { 
    width:96%; 
    margin-left:2% !important; 
    margin-right:2% !important; 
    float:left; 
    } 

    .driekolimg { 
    width:96% !important; 
    margin:2% !important; 
    padding:0 !important; 
    } 

    .driekolimg img { 
    width:100% !important; 
    padding:0 !important; 
    margin:0 !important; 
    } 

    .socialmedia { 
    width:100%; 
    text-align:center; 
    margin:0 !important; 
    padding:0 !important; 
    } 

    }

這是我在談論的頁面：

http://www.visiamedia.nl/duckers/

來源

2013-08-27 Maarten Emmerink

+0

你的代碼在哪裏？ （-1） – Doorknob

+0

正如我在帖子中悲傷的一樣，我沒有發佈代碼，因爲我認爲只是檢查元素會更容易，我會馬上發佈代碼。 –

+0

當你解決問題時會發生什麼？那麼這個問題將是無用的，因爲我們將無法看到破損的代碼。 – Doorknob

回答

1 
.content { 
    padding: 60px 8px; 
}

集即8像素爲零：問題是由在content DIV填充在線174引起的。

來源

2013-08-27 23:55:45

+0

我甚至沒有注意到你的答案（我很抱歉，但我是這個網站的新手）。你是對的，非常感謝！ –

相關問題

 相關問題