Mee*_*p3D 16 html css standards-compliance width
所以我正在制作一个布局非常有问题的网站.有四个角图像TL,TR,BL和BR由黑色块表示.深橙色区域是主要内容(宽度为960px),外部区域用绿色箭头表示为浏览器窗口.见图:
图http://dotcafedesigns.com/stackoverflow/problem.gif
顶部图像代表最窄的网站 - 如果它大于定义的区域,则不应该允许它比这个(960px)更窄,不应该有滚动条.底部的两个图像代表浏览器的不同宽度.
左下和右下黑色块(图像)应始终位于屏幕的左下角和右下方,除非宽度降至960px,在这种情况下,BL和BR图像应略微进入主区域.如果网站缩小到200px,则BR图像不应该仍然在右侧角落.
在这一点上,我并不真正关心它在IE6中完全正常工作(我可以大致工作)但我甚至无法弄清楚如何在没有Javascript或非常实验性的CSS的情况下完全完成它.目前我正在使用绝对定位的div的哪种工作,但是不能正常工作.
如果没有别的办法,我想我愿意接受一点JS,但我不愿意.
非常感谢!
Mir*_*nne 17
不需要Javascript.至少在大多数现代浏览器中.使用简单的定位和一个@media查询我将其删除:
<head>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: orange;
text-align: center;
color: black;
overflow-x: hidden;
}
#content {
width: 960px;
margin: 0 auto;
padding: 20px 0;
min-height: 800px;
background: #cc6600;
z-index: 0;
}
.image {
background: black;
color: white;
height: 60px;
width: 100px;
padding: 20px 0;
z-index: 1;
opacity: .95;
}
#top {
width: 960px;
margin: 0 auto;
position: relative;
overflow: visible;
}
#top .image {
position: absolute;
}
#top .left {
left: -80px;
}
#top .right {
right: -80px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
}
#bottom .image {
position: absolute;
}
#bottom .left {
left: 0;
}
#bottom .right {
right: 0;
}
@media all and (max-width:1120px) {
#container {
width: 960px;
margin: 0 auto;
position: relative;
overflow: visible;
}
#bottom .left {
left: -80px;
}
#bottom .right {
right: -80px;
}
}
</style>
</head>
<body>
<div id="top">
<div class="left image">left image</div>
<div class="right image">right image</div>
</div>
<div id="content">
content
</div>
<div id="bottom">
<div id="container">
<div class="left image">left image</div>
<div class="right image">right image</div>
</div>
</div>
</body>
这可能属于你对"非常实验性的CSS"的描述,但我认为你会对它有多少支持感到惊讶,并且通过一点JS来引导它是多么容易 - 只需检查浏览器的宽度-size并在宽度低于1120px时添加额外的CSS.