0
so ist dies mein HTML-Code -Warum bekomme ich horizontale Scroll?
/**
\t font-family: 'Montserrat Subrayada', sans-serif;
\t font-family: 'Josefin Sans', sans-serif;
\t font-family: 'Alex Brush', cursive;
\t font-family: 'Six Caps', sans-serif;
**/
* {
\t margin: 0;
\t padding: 0;
}
body {
\t width: 100vw;
\t background-color: #fff;
\t font-size: 100%;
}
#main {
\t margin: 0;
\t padding: 0;
\t position: relative;
\t height: 100vh;
\t width: 100%;
\t background-image: url('../assets/images/bgpattern.png');
}
#vidbox {
\t margin: 0;
\t padding: 0;
\t position: absolute;
\t top: 0px;
\t left: 0px;
\t width: 100%;
\t height: 100vh;
\t overflow: hidden;
\t z-index: -1;
}
#bgvid{
\t width: 100%;
}
#vidfallback{
\t width: 100%;
}
#navbar {
\t width: 100%;
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
\t background-color: #fff;
}
#navbar li {
\t float: right;
}
#navbar li a {
\t display: block;
\t color: rgb(35,85,125);
\t font-family: 'Josefin Sans', sans-serif;
\t text-decoration: none;
\t font-size: 28px;
\t text-align: center;
\t padding: 35px 40px;
}
#navbar li a:hover{
\t color: #666;
\t -webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
-moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}
#navbar li a:active{
\t -webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
-moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}
#logo {
\t height: 80px;
\t margin: 10px;
}
.left {
\t float: left!important;
\t background-color: rgb(35,85,125);
}
.white{
\t color: #fff!important;
}
#tagline{
\t font-size: 50px;
\t font-family: 'Alex Brush', cursive;
\t margin: 130px;
\t color: #fff;
}
.bigger{
\t font-size: 80px;
}
.box{
\t width: 100%;
\t height: 200px;
}<!DOCTYPE html>
<html>
<head>
\t <title>Testing</title>
\t <link rel="stylesheet" type="text/css" href="css/home.css">
\t <link href="https://fonts.googleapis.com/css?family=Alex+Brush|Josefin+Sans|Montserrat+Subrayada|Six+Caps" rel="stylesheet">
\t <!--<script src="assets/js/jquery-1.12.3.js" type="text/javascript"></script>-->
</head>
<body>
\t <div id="main">
\t \t <div id="vidbox">
\t \t \t <video autoplay poster="" id="bgvid" loop>
\t \t \t \t <source src="assets/video/filxe.mp4" type="video/mp4">
\t \t \t \t <img src="assets/images/vidfallback.png" id="vidfallback">
\t \t \t </video>
\t \t </div>
\t \t <ul id="navbar">
\t \t \t <li class="left"><img src="assets/images/logomini.png" id="logo"></li>
\t \t \t <li class="left"><a href="" class="white">HK Construction Company</a></li>
\t \t \t <li><a href="#home" id="home">Home</a></li>
\t \t \t <li><a href="#">Services</a></li>
\t \t \t <li><a href="#">About Us</a></li>
\t \t </ul>
\t \t <h1 id="tagline"><span class="bigger">"</span> You Dream, We Build <span class="bigger">"</span></h1>
\t </div>
\t <div class="box about">
\t \t
\t </div>
</body>
</html>Ich verstehe nicht, warum bin ich im Browser die horizontale Bildlaufleiste zu bekommen. Ich versuchte alles wie geben sie alle 0 Padding & 0 Marge, scheint nichts zu arbeiten, so kann jeder von euch den Schuldigen.
vielleicht ist etwas Ihre Inhalte überfüllt. Versuchen Sie Überlauf-x: keine; – Rubenxfd
Für Ihr Code-Snippet gibt es keine horizontale Bildlaufleiste. Ich bin in Chrome unter Mac – shaochuancs