的div造成滚动

目前，我试图模仿这个网站获得一些实践 Link 的div造成滚动

但是我有网站的布局主要问题。似乎我使用的很多position: relative;这是导致我的网站搞砸了导航栏等。我不知道是否有一个更简单的方法是？正如你可以通过网站所述。标志和导航栏已左右浮动，但其位于屏幕中间。这是我无法修复的另一个问题。当我将我的东西飘到右边和左边时，它一直走到边界。这就是为什么我使用position属性把它放在中间。

另一个大问题是，该网站应该没有滚动到右侧，但你可以去右边，并在我的下降。首页应该全部在屏幕上，不滚动。我再一次相信这是下降到事业部结构

在我已成立的背景图像的时刻。两个导航栏。顶部和底部的一个。我已经把两个日志，并把导航栏中。但如上所述的问题与divs。

HTML: 
<body> 
<div class="container"></div> 

<ul class="nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/about/">About</a></li> 
    <li><a href="/Member/">member</a></li> 
</ul> 

<div class="container1"> 
    <p>a</p> 
     <div class="botLay"> 

     </div> 
</div> 

<div class="logo"> 
<img src="Image/Logo.png"> 
</div> 

<div class="logo1"> 
<img src="Image/Logo.png"> 
</div> 
</body>

Nav div是顶级的黑色酒吧。容器1是底部条。标志1和2是两个标志。

CSS：

html { 
background: url(../Image/BackgroundImage.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

html, body { 
    height: 100%; 
} 


.logo{ 
    position: relative; 
    top: -157px; 
    left: 450px; 
    width: 100px; 
} 
.logo1{ 
    position: relative; 
    top: 521px; 
    left: 450px; 
} 
.container1{ 
    position: relative; 
    top: 446px; 
    right: 40px; 
    background-color: rgba(0, 0, 0, 0.65); 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
    width: 2000px; 
    padding:15px; 

} 
.nav{ 
    position: relative; 
    top: 36px; 
    right: 40px; 
    background-color: rgba(0, 0, 0, 0.65); 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
    list-style:none; 
    text-align:center; 
    width: 2000px; 
} 
.nav li { 
    display: inline-block; 
    position: relative; 
    left: 280px; 
} 
.nav li + li:before { 
    content: ""; 
    display: inline-block; 
    vertical-align: middle; 
    border-left: 1px solid #ffffff; 
    padding-left: 8px; 
    height: 28px; 
} 
.nav a{ 
    display:inline-block; 
    padding:35px; 
    text-decoration: none; 
    color: white; 
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif; 
    text-transform: uppercase; 
} 
ul a:hover { 
color: #ffcb80; 
}

上解决这个代码，并建议任何帮助将大大学徒。由于

来源

2016-01-21 MadMan

给你一个简单的解决方案

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
background: url('http://www.motionbackgroundsforfree.com/wp-content/uploads/2012/02/Screen-shot-2012-02-07-at-10.02.45-AM.png') no-repeat center center fixed; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
background-size: cover; 
 
} 
 

 
header > .logo{ 
 
    float: left; 
 
    margin-left: 20& 
 
    } 
 
    
 

 
header nav { 
 
    float: right; 
 
} 
 

 
header { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
.nav { 
 
    margin-right: 20%; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    position: relative; 
 
    
 
} 
 
.nav li + li:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border-left: 1px solid #ffffff; 
 
    padding-left: 8px; 
 
    height: 28px; 
 
} 
 
.nav a{ 
 
    display:inline-block; 
 
    padding:28px; 
 
    text-decoration: none; 
 
    color: white; 
 
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif; 
 
    text-transform: uppercase; 
 
} 
 
ul a:hover { 
 
color: #ffcb80; 
 
} 
 

 

 
footer > .logo{ 
 
    float: left; 
 
    margin-left: 200px 
 
} 
 
    
 

 

 
footer { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    width: 100%; 
 
    height: 100px; 
 
position: absolute 
 
    bottom: 0 
 
}

<header> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/140x100"> 
 
    </div> 
 
    <nav> 
 
    <ul class="nav"> 
 
    <li><a href="/">Home</a></li> 
 
    <li><a href="/about/">About</a></li> 
 
    <li><a href="/Member/">member</a></li> 
 
</ul> 
 
    </nav> 
 

 
</header> 
 

 
<section> 
 

 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</section> 
 

 
<footer> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/140x100"> 
 
    </div> 
 

 

 
</footer>

考虑添加响应导航菜单http://codepen.io/marti1125/pen/YwYOxw

来源

2016-01-21 16:57:52 Osgux

非常感谢。这是完美的:) – MadMan

但是还有1个问题抱歉！如果我想将页脚移动到页面末尾，我该怎么做？ – MadMan

尝试在脚下加{位置：绝对底部：0} – Osgux

进行这些更改

.logo{  
    left: 150px; 
    } 

    body {  
    overflow-y:hidden; /* For right scrollbar*/ 
    /* overflow-x:hidden for horizontal scrollbar */ 
    } 

    .nav li { 
    left: 1580px; 
    }

我会建议你做一些试验和变化，按您的要求，因为位置是相对的。我还建议你使用Mozilla firebug，这样可以让你更容易理解。如果你得到你想要的东西，请告诉我。

来源

2016-01-21 16:50:16 HebleV

可惜不是:(它实际上是走了，更糟的是，我认为主要的问题是我的事业部布局/你会知道如何以正确的方式创建div？ – MadMan

你可以给我一个小提琴，因为我看到在这里工作，我不认为任何问题与div适当关闭 – HebleV

接受的答案是否显示右侧滚动条？ – HebleV

的div造成滚动

回答

相关问题