1

所以,我有几个问题。有问题的网站在这里:

www.vutallindustries.com/penultimatum

我想要做的是让中心框在已经在侧面的两个 div 之间伸展,但也占据整个屏幕(只是不要超过我已经设置的上边距),目前,DIV 将伸展使用文本并根据需要调整大小,但前提是我输入了那么多文本。不喜欢依靠文字来做我的工作!

另一件事是,由于人们将通过各种媒体访问此站点,因此当屏幕被拉伸或分辨率不同时,重要的是不要重叠。我玩过不同的浮动和宽度,但这是我能想到的最好的。

此外,在图库链接上,知道如何将这些图像按原样插入但不透明吗?我想保持中间 div 透明,但不是屏幕截图。感谢你的帮助!

您可能会看到任何其他提示错误,或者您可以找到的编码优化也将不胜感激!

这是样式表:

body {
background-color:#000000;
background-image:url(http://www.vutallindustries.com/websitefiles/welcomepage.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
color:#000000;
margin: 0px;
padding: 0px;
}
/* Corp Logo */
.logo {
position: fixed;
height: 128px;
width: 128px;
left: 0px;
top: 0px;
}
/* EVE Logo */
.logo2 {
position: absolute;
height: 128px;
width: 128px;
top: 0px;
right: 0px;
}
/* Site Navigation menu */
.menu {
position: fixed;
width: 128px;
height: 100%;
left: 0px;
top: 128px;
background-color:#FFFFFF;
border: 1px solid black;
text-align:left;
opacity:0.6;
filter:alpha(opacity=60);
}
/* Official EVE news via RSS */
.news {
float:right;
width: 128px;
height: auto;
margin-top: 129px;
margin-right:0px;
background-color:#FFFFFF;
border: 1px solid black;
text-align:left;
opacity:0.6;
filter:alpha(opacity=60);
}
/* website content */
.content {
width: auto;
height: 100%;
text-align: center;
background-color:#FFFFFF;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
}
/* centers website content */
div.centerbox-outer {
margin-top:129px;
margin-right:136px;
float: left;
position:fixed;
left:136px;
}

这是主要的索引 HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
    <title>Penultimatum</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link REL="StyleSheet" TYPE="text/css" HREF="layout.css">
</head>
<body>
    <div class="logo">
        <img src="http://www.vutallindustries.com/websitefiles/emblem.png" alt="Penultimatum">
    </div>
    <div class="menu">
        <p> <b> <a href="http://www.vutallindustries.com/penultimatum" target="_self">Home</a> </b>

        </p>
        <p> <b> <a href="http://www.vutallindustries.com/penultimatum/forum" target="_self">Forum</a> </b>

        </p>
        <p> <b> <a href="http://www.vutallindustries.com/penultimatum/gallery.html" target="_self">Gallery</a> </b>

        </p>
        <p> <b>Note: if anyone can figure out how to make the center box centered and scroll with, it would be much appreciated. </b>

        </p>
    </div>
    <div class="logo2">
        <img src="http://www.vutallindustries.com/websitefiles/evelogo.jpg" alt="Penultimatum">
    </div>
    <div class="news">
        <p>
            <script type="text/javascript" src="http://output42.rssinclude.com/output?type=js&amp;id=629071&amp;hash=623340dcbe5d6196e04dc473e9f193b0"></script>
        </p>
    </div>
    <div class="centerbox-outer">
        <div class="centerbox-inner">
            <div class="content">
            <p> <b>Welcome to the EVE Online corporation, Penultimatum! We are currently standing up offices, and this website is under construction. Check back in later for more details</b>
            </p>
            </div>
        </div>
    </div>
    </body>
</html>

然后画廊页面和索引一样,它只是用下面的代码替换了关于欢迎来到 EVE 在线公司的行:

<p>
                <center>
                <a href="http://www.vutallindustries.com/websitefiles/test.png">
                    <img src="http://www.vutallindustries.com/websitefiles/test.png" alt="Vutall's Character"
                    width="auto" height="150">
                    </a>
                </center>
                </p>
                <p>
                <center>
                Vutall's Character
                </center>
                </p>
4

1 回答 1

0

我终于在这里想出了解决方案:http: //jsfiddle.net/yKVq4/5/

变更摘要

  1. 我清理了很多你的代码,因为有很多多余的东西。
  2. 我在左侧和右侧添加了容器,因为这会阻止诸如书写position:fixed之类width:128px的事情。
  3. 我发现当我将位置更改div.centerbox-outer为相对,但position:fixed后来一直保持下去时,代码突然居中,现在总是跨越整个长度,无论如何。在玩弄了一些代码之后,它的组合就是right这样left position做的。
  4. 因为我将容器的对齐方式从 更改position:fixed;float,所以结果是一个响应速度更快的解决方案。这是相当粗糙的,但它会完成工作。

我希望这就是你要找的。

编辑

我发现如果我将div.centerbox-outer's 的定位改为absolute,然后在 ' 中添加一个margin-right.menu-container那么响应式设计前景会更好

更新

我想出了一个可能的响应式设计布局http://jsfiddle.net/yKVq4/42/

概括

  • 一旦屏幕小于 400 像素,请将欢迎横幅移到顶部以使其不碍事。
  • 缩小超过 300 像素后将菜单大小增加到 100% 并移除浮动。与其他浮动容器相同。还使图像响应

其他变化

  • 给菜单增加了一些简单的样式,改成无序列表后
  • 添加了过渡
  • 修复了后台不工作的问题,虽然现在还没有修复。

我改变了很多。但这是因为我非常喜欢编码;)

于 2013-02-05T04:41:16.350 回答