我正在编写一个网站,我正在尝试做一些我不确定的事情。我有一个我喜欢的布局,但我想允许div调整大小以适应浏览器。在那一刻,布局是这样的: 现在我想保持标题部分的高度和宽度始终相同,与extra和footer div相同。但我希望导航(它需要重命名)和内容divs自动调整,以便始终填充浏览器窗口(理想情况下,顶部和底部有10px边框,但不是必需的)。 整个页面(显然不包括背景)目前保存在容器内。但这是一个固定的高度。这是我的CSS
html,body{
margin:0;
padding:0;
}
body{
background-image:url(images/bg2.jpg);
}
a{
text-decoration: none;
}
#container{
text-align:left;
width:1000px;
height:648px;
margin: 0 auto;
border-radius:30px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
#header{
float:left;
height:123px;
width:1000px;
background-color:#FFFFFF;
border-top-right-radius:30px;
border-top-left-radius:30px;
text-align:center;
}
#links{
float:left;
height:43px;
width:714px;
background-color:#FFFFFF;
text-align:center;
padding-left:286px;
}
.link span{
list-style: none;
border: 6px solid #1c2f45;
font-size: 13px;
height: 25px;
text-align: center;
border-radius: 1em 4em 1em 4em;
float: left;
margin-left: 5px;
padding-top:5px;
width:90px;
}
.linkcurrentpage span{
list-style: none;
border: 6px solid #1c2f45;
background-color: #1c2f45;
font-size: 13px;
color: #FFFFFF;
height: 25px;
text-align: center;
border-radius: 1em 4em 1em 4em;
float: left;
margin-left: 5px;
padding-top:5px;
width:90px;
}
#content{
position:relative;
float:right;
height:420px;
width:737px;
background-color:#FFFFFF;
overflow:auto;
}
#galleryselector {
float: left;
text-align: center;
}
#navigation{
float:left;
width:263px;
height:420px;
}
#extra{
background:#FFFFFF;
float:right;
height:70px;
width:1000px;
}
#footer{
background:#FFFFFF;
float:right;
height:40px;
width:1000px;
margin: 0 auto;
padding-bottom:5px;
text-align: center;
border-bottom-left-radius:40px;
border-bottom-right-radius:40px;
}
#footer p{
margin: 0 auto;
}
有人可以告诉我如何实现这个目标吗?我不太关心在内容div上有一个滚动条,我理想情况下不希望在整个屏幕的页面右侧有一个滚动条。
P.S我不是在网站评论之后,这个网站对我来说不是一个想要为她设计的网站的亲戚,而是想要我的背景(我知道它有点花哨)更新 好的,感谢Hristo我的布局就像我现在想要的那样减去一个小细节),下面的屏幕截图显示了现在的页面,我看到的是顶部的导航按钮(只是应用了边框的跨度标签) ...我希望它们与div集中对齐,我之前找到的唯一方法是对div应用固定数量的填充但是我不知道这是否会再次起作用...我将上传截图(道歉为其中一个h1标签周围的蓝色边框,运行了F12开发人员工具)以及我现在所处的链接部分的css。
#links{
float:left;
height:43px;
width:100%;
background-color:#FFFFFF;
text-align:center;
}
.link span{
list-style: none;
border: 6px solid #1c2f45;
font-size: 13px;
height: 25px;
text-align: center;
border-radius: 1em 4em 1em 4em;
float: left;
margin-left: 5px;
padding-top:5px;
width:90px;
}
.linkcurrentpage span{
list-style: none;
border: 6px solid #1c2f45;
background-color: #1c2f45;
font-size: 13px;
color: #FFFFFF;
height: 25px;
text-align: center;
border-radius: 1em 4em 1em 4em;
float: left;
margin-left: 5px;
padding-top:5px;
width:90px;
}
答案 0 :(得分:0)
查看小提琴...... http://jsfiddle.net/UnsungHero97/jbQfr/1/
另外,请查看this article on horizontally centering menus。
顺便说一下,我想就你的网站布局给我两分钱。您绝对需要考虑重组和重新组织您的网站。许多用户会对当前的布局感到沮丧。
例如,尝试水平和垂直调整浏览器大小...注意窗口太短或太窄时的行为;考虑使用min-width
和min-height
。
但这只是我的意见。
如果您有其他问题,请告诉我。
这样的事情...... http://jsfiddle.net/UnsungHero97/qe6P8/9/embedded/result/
我最近问了一个关于布局类似于你的设计的问题。看看这个问题......
问题:complicated CSS layout... need some help
回答:one of the answers和the fiddle for the layout
...您可能会对如何实现您所寻找的目标有所了解。
我希望这会有所帮助 赫里斯托斯