网站上的Divs导致滚动 [英] Divs on website causing scrolling
问题描述
目前我正试图模仿这个网站以获得一些练习
链接：艺术家网站模板| WIX [ ^ ]
但是我的布局遇到了重大问题现场。我似乎在使用这个职位：亲属;很多导致我的网站搞砸导航栏等等。我不确定是否有更简单的方法吗？正如你可以通过网站告诉的那样。徽标和导航栏已经浮动到左右两侧，但它位于屏幕中间。这是另一个我无法解决的问题。当我向右和向左漂浮时，它一直向边界移动。这就是我使用position属性把它放在中间的原因。
另一个大问题是该网站应该没有向右滚动但你可以去正确的，下去我的。首页应该都在屏幕上，没有滚动。我再次相信这归结为Div结构
目前我已经设置了背景图像。两个导航栏。顶部的一个和底部的一个。我已经放入了两个日志，并将导航栏放入。但是如上所述，div有问题。
HTML：
At the moment i am trying to mimic this website to get some practice in
Link: The Artist Website Template | WIX[^]
However i am having major problems with the layout of the site. It seems that i am using the position: relative; a lot which is causing my website to screw up with the navigation bar etc. I am not sure if there is a easier way to do is? As you can tell by the website. There logo and nav bar have been floated to the right and left , however its in the middle of the screen. This is anther problem which i can't fix. When i floated mine to the right and left it went all the way to the border. This is why i used the position attribute to put it in the middle.
Anther big problem is that the site should have no scrolling to the right but u can go to the right and go down on mine. The front page should all be on the screen with no scrolling. Again i believe this is down to the Div structure
At the moment i have set up the background image. The two nav bars. The one at the top and the one at the bottom. I have put in the two logs, and put the navigation bar in. However as mentioned above got problems with the 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>
导航div是顶部黑条。容器1是底杆。徽标1和2是两个徽标。
CSS：
The Nav div being the top black bar. The container 1 being the bottom bar. The logo 1 and 2 being the two logos.
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;
}
任何有关修复此代码和建议的帮助都将大大学徒。
Any help on fixing this code and advice would be greatly apprenticed.
推荐答案
对于居中效果，请尝试以下方法：
For the centered effect try this:
<div id="top-element-full-width" style="removed 100px; text-align: center; removed: fixed (or absolute or relative);">
<div id="centered-container" style="width: 60%; margin: auto; removed: relative;><br mode=" hold=" /> <div id=" logo=" style=" nav=" style="></div></div>
顶部是全宽，有点偏离页面顶部。
居中位于中间，宽度为内容。保证金：自动处理中心。
内部元素浮动，因此它们最终位于包含元素的左右边界。
在尝试任何设计之前学习并理解浮动和定位然后再使用表格，你将拯救自己的挫折世界。
此外，还有很多简单易学的例子。复制现有的网站设计并不是一个好的设计决策（除了任何知识产权问题）。
如果这有帮助，请接受它作为解决方案。谢谢。
Top one is full width, somewhat off the top of the page.
Centered is in the middle, width of your content. Margin: auto takes care of centering.
Inside elements are floated so they end up at left and right border OF THE CONTAINING ELEMENT.
Learn and understand floating and positioning before you attempt any design more advanced then using tables, you'll save yourself world of frustration.
Also, there are plenty of examples for easier learning. Copying existing site design is NOT good design decision (apart from any intellectual rights problems).
If this helps please accept it as a solution. Thank you.
这篇关于网站上的Divs导致滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
