所以,我有几个问题。有问题的网站在这里:
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&id=629071&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>