Unerwünschte horizontale Bildlaufleiste

Bin ich ein bisschen ein problem. Für einige Grund, eine horizontale scroll-Leiste hält erscheinen von meinem code. Ich habe alles versucht, aber ich kann nicht scheinen, um es zu entfernen. Der folgende link ist eine live-Vorschau des Codes.

http://jsfiddle.net/y5x7V/

HTML

 <body>
 <section class="contain">
 <div id="section-nav" class="section-nav">
 <div class="top">
 <ul>
 <li class="logo"><a href="#">Magna Contra</a></li>
 <li class="active"><a href="#">Blog With Us</a></li>
 <li><a href="#">Compxta</a></li>
 <li><a href="#">Laurie</a></li>
 <li><a href="#">SUBTITLESOFLIFE</a></li>
 </ul>
 </div>
 </div>
 </section>

 <div class="bg">

 <h1>SUBTITLESOFLIFE</h1>
 </div>

 <ul class="check">
 <li class="bold"><a href="#">Hot Trends</a></li>
 <li class="topic"><a href="#">Daft Punk</a></li>
 <li class="topic"><a href="#">#bbcqt</a></li>
 <li class="topic"><a href="#">Petite Noir - Major</a></li>
 <li class="topic"><a href="#">Alt J Album Teaser</a></li>
 <li class="topic"><a href="#">Materialistic Happine$$</a></li>
 <li class="topic"><a href="#">WOLF</a></li>
 </ul>

 <div class="contar">
  Lorem Dosi
 </div>

 </body>
 </html>

CSS

ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}

.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;

}




::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}

li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}

li a{
  text-decoration: none;
  color:#bbbbbb;
  font-family: "proxima-nova",sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.78em;
letter-spacing: .2em}

hr{
  color:#dfe0db;
    border: 0;
background-color: #dfe0db;
height: 1px;
}

.bold{
  display: inline;
}

.bold a{
  color:#e94378;
}
.topic{
  display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;

}

.topic a{
-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}

.topic a:hover{
  color:#e94378;text-decoration:none}

}

.logo a{
  color:#bbb;
  font-size: 0.78em;
  text-decoration: none;
  text-transform: uppercase;
}


img#hv {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

img#hv:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
.image {position: relative; text-align: center;width:100%;height:75%;}

.image span {position: absolute; line-height: 20px; display: block; top: 50%; 
    margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
    text-transform: uppercase;
    font-size: 1.5em; letter-spacing:;}


@media screen and (max-width:800px) { 
   .image span { 
        font-size:0.8em; 
    }
}
@media screen and (max-width:400px) { 
    .image span {
        font-size:0.7em; 
    }
}



.bg{
  background-color: #e94378;
}

img.ri
 {
 position: relative;
 max-width: 100%;
 width:100%;
 display: inline-block;
 vertical-align: middle;
 }

 @media screen and (orientation: portrait) {
 img.ri { max-width: 100%; }
 }
 @media screen and (orientation: landscape) {
 img.ri { max-height: 100%; }
 }


.text{
font-family: "proxima-nova";
  font-size: 1em;
letter-spacing: .2em;
  text-transform: uppercase;
background-color: #e94378;
padding:20px;
color:yellow;
position: absolute;
left:200px;
bottom:50px;
}

.tex{
  font-family: "proxima-nova",sans-serif;
  font-size: 2.5em;
  letter-spacing: 3px;
  text-transform: uppercase;
  bottom:160px;
  left: 320px;
  color:white;
  padding: 10px;


}

.image{
  vertical-align: middle;
}
.logo a:hover{
color:white;
}
.active a{
  color:white;
}

.contain{
  display: table;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.block {
  display: table-row;
  height: 1px;
}
.navigation {
  display: inline-block;
  padding: 10px;
  width:100%;
  margin: auto;
  height: 150px;
}

.top {
  background-color: #444;
  width:100%;
  display: inline-block;
  padding: 10px;
  text-align: center;


}

.navigation:nth-child(odd) {
  background: #222;

}
.push {
  height: auto;
}
.contar {
  margin: 0 auto;
  text-align: center;
  width:100%;
  height:400px;
  background-color: white;


}

img.ft{
  float:left;
}
.featured{
  background-color: white;
  width:69%;
  text-align: center;
  margin: 0 auto;
  display: inline-block;;
}
.block:nth-child(odd) {
  background: #fff;
}


.search {
border:0px; 
background-color:transparent; 
color:white;
display: inline-block;
height:28px;
}

.section-nav a{ -webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}



h1{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}

h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}



.txt{
  font:800 proxima-nova;
}







h2{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}

h2 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}

Sie haben einige sehr ungültiges HTML.
Sie brauchen nicht alle diese </li> vor <div class="contar">
Danke habe ich jetzt entfernt.

InformationsquelleAutor Kadeem Laurie | 2013-06-11

css html

2

Nicht verwenden overflow-x: hidden - es werden nur Papiere über die Risse, es behebt nicht das Problem. Sie können es zu beheben, mithilfe der box-sizing Eigenschaft auf die top-div:
```
.top {
    background-color: #444;
    width:100%;
    display: inline-block;
    padding: 10px;
    text-align: center;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

}
```
Dieser nimmt Ihr padding: 10px berücksichtigt werden, wenn die Anwendung 100% Breite.

Können Sie auch einen polyfill zu prüfen, browser-Unterstützung, mit der Modernizr plugin.

InformationsquelleAutor blend
1

Können Sie einstellen overflow-x im Körper versteckt

http://jsfiddle.net/y5x7V/1/
```
body {
  line-height: 1;
  text-align: center;
  overflow-x: hidden;
}
```
InformationsquelleAutor Smeegs
1

hinzufügen
overflow-x:hidden

den main-wrapper-Klasse

InformationsquelleAutor
0

Dies ist, weil Sie die Kombination der beiden 100% width und padding. Wenn 100% der Breite ergibt 100px, zum Beispiel durch hinzufügen 5px padding Links und rechts auf der Oberseite, das zu Ihrem element, haben eine gesamte Breite von 110px. Sie können dies umgehen, durch ändern des Elements box-sizing.
```
.bottom, .top {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
```
JSFiddle demo.

InformationsquelleAutor James Donnelly
0

Sie können dieses Problem beheben, richtig anstatt hacking in einigen CSS zum ausblenden der scrollbar durch die Festsetzung der top Klasse in der CSS. Legen Sie die Polsterung auf 0 ist (es nimmt die volle Breite des übergeordneten Elements), indem Sie:

padding:0;

zu .top

JSFiddle

Können Sie die Polsterung height-Eigenschaft, um den original-look, das ist nur ein quick-fix für die demo, warum es zu brechen.

InformationsquelleAutor NibblyPig

Ändern

.top {padding:10px;}

.top {padding:10px 0; }

InformationsquelleAutor Nick R

0

Linie 261 von css, können Sie ändern aus padding: 10px; zu padding: 10px 0;.

InformationsquelleAutor Albzi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.