それで、いくつか質問があります。問題のサイトはこちら：
www.vutallindustries.com/penultimatum
私がやろうとしているのは、中央のボックスをすでに横にある 2 つの 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 online corp へようこそに関する行を次のコードに置き換えただけです。
<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>