この質問は実際に何度も尋ねられましたが、私が見つけた回答はどれもうまくいきませんでした. 多分私はそれを間違っています。とにかく、私は CSS div を使用してサイトを作成し、ばかげてブラウザー ウィンドウを使用して、すべてが正しく配置されていることを確認しました。完了してズームアウトすると、すべての画像とその他の div 要素が、予想どおりに固定されるのではなく、移動して移動しました。この問題は、ラッパー div の欠如や、LOT を機能させるためだけに相対および絶対配置を使用したという事実に関係していることを漠然と知っています。私はCSSを初めて使用し、これを使用して作成した最初のサイトです。ありがとう！-ザック
要求された壊れたサイトへのリンクは次のとおりです: http://wctadm.org/
スクリーンショットを埋め込むことはできません。リンクは次のとおりです: http://imgur.com/MmmGceb 1 つのモニターで見たとおりの正しい位置合わせと、ズームアウトして台無しにしたバージョンを示しています。
HTML ファイル:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,800,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default Page</title>
</head>
<body>
<div id="container">
<div id="content" class="clearfix">
<!-- Content //--->
</div>
<div id="header">
<!-- NAVBAR <img src="DM-logo.png" alt="DM Logo" height="81" width="130"> //--->
<ul id="menu" style="position: relative; z-index: 100;">
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Teachers</a>
<ul>
<li><a href="">Mrs. Rosarita Olvina</a></li>
<li><a href="">Mrs. Christine Pavesich</a></li>
<li><a href="">Mr. Francisco Virella</a></li>
</ul>
</li>
<li><a href="">Courses</a>
<ul>
<li><a href="">Graphic Design</a></li>
<li><a href="">Photography</a></li>
<li><a href="">Video Production</a></li>
<li><a href="">Animation</a></li>
<li><a href="">Art</a></li>
</ul>
</li>
<li><a href="">About</a>
<ul>
<li><a href="">What We Do</a></li>
<li><a href="">Where We Go</a></li>
</ul>
</li>
<li><a href="">Home</a></li>
</ul>
<ul id="logo">
<ul>
<li><img src="dm-button.png" style="position: absolute; top: 0px; left: -120px; z-index: 1;" height="120" width="120"/></li>
</ul>
<ul id="welcome">
<ul>
<li><p style="position: absolute; top: 140px; left: 75px; z-index: 2;">Welcome to Digital Media at WCTA</p></li>
</ul>
<ul id="banner">
<ul>
<li><img src="bannerbackgroundDMwithshadow.png" style="position: absolute; top: 81px; left: -120px; z-index: 0;" height="400" width="859"/></li>
</ul>
</div>
</div>
</div>
</div>
<div id="quicklinks">
<div id="links1">
<img src="courses-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Explore courses</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Our courses teach advanced digital media in a wide range of subjects.</p>
<a href="courses.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
</div>
<div id="links2">
<img src="gallery-icon.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">View the gallery</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Gallery of our student's finest work in a variety of mediums.</p>
<a href="gallery.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
</div>
<div id="links3">
<img src="contact-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Contact us</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Drop us a line if you have any questions or concerns regarding our program.</p>
<a href="contact.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
</div>
</div>
<!---------- BLURB //------------------->
<div id="blurb">
<div id="blurbpic">
<img src="placeholder.png" style="position: relative; top: 0px; left: 0px; z-index: 100;" height="250px" width="250px"/>
</div>
<div id="blurbtext">
<p style="text-align: left; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 50px; color:white; font-family:'Open Sans Condensed', sans serif;">Dedicated to excellence</p>
<p style="text-align: left; position: relative; top: -50px; left: 10px; z-index: 99; font-size: 14px; color:white;">Members of WCTA's Digital Media program are expected to work hard, strive high, and have fun while doing it. With courses in areas ranging from Digital Media to Photography, joining the Digital media program is the best choice you could make to start the journey of your career in technology. Digital Media students not only get access to multiple computer labs and software, but they also get to go out in the field regularly to gain real life experience. </p>
</div>
</div>
<!---------- FOOTER //------------------->
<div id="footer">
<ul id="footerpic">
<ul>
<li><img src="footerbackground.png" style="position: relative; top: 0px; left: -194px; z-index: 150;" height="173px" width="859px"/></li>
</ul>
<ul id="footerlogo">
<ul>
<li><img src="DM-logowhite.png" style="position: relative; top: 80px; left: 270px; z-index: 151;" height="58.5" width="88.3"/></li>
</ul>
<ul id="footertext1">
<ul>
<li><p style="position: relative; top: 10px; left: 89px; z-index: 151; font-size: 12px; color:white;">©2013 Zac Clark - Digital Media</p></li>
</ul>
</div>
<ul id="footertext2">
<ul>
<li><p style="position: relative; top: -30px; left: 720px; z-index: 151; font-size: 12px; color:white;">About • Contact • FAQ • Find Us</p></li>
</ul>
</div>
</div> <!-- Wrapper Div //-->
</body>
</html>
CSS ファイル:
@charset "utf-8";
/* Zac Clark - 2013 */
/* --- Primary Content boxes --*/
body {
background: #F7F7F7;
font-family: 'Open Sans', arial, sans-serif;
color: #000000;
font-size: 12px;
/* margin: 0px; */
}
div#container {
width: 859px;
margin: 0px auto;
background: #FFFFFF;
padding: 0px;
}
div#content {
width: 859px;
padding-top: 473px;
background: black;
float: left;
}
div#header {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 481px;
background: #757575;
position: absolute;
top: 0px;
float: left;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:859px;
}
/* --- Quick Links --- */
div#quicklinks {
width: 859px;
margin: 0px auto;
background: white;
top: 286.3px;
height: 286.3px;
}
div#links1 {
width: 286.3px;
float: left;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links2 {
width: 286.3px;
float: left;
margin: 0px auto;
background: white;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links3 {
width: 286.3px;
float: right;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
/* --- Blurb & Image --- */
div#blurb {
width: 859px;
margin: 0px auto;
background: #333333;
top: 300px;
height: 300px;
}
div#blurbpic {
width: 300px;
float: left;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 300px;
}
div#blurbtext {
width: 559px;
float: right;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 10px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 559px;
}
/* --- Clearfix (Ignore) --- */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* --- General Elements --*/
#logo ul li { display: inline; }
#banner ul li { display: inline; }
#welcome ul li {
font-family: 'Open Sans Condensed', sans serif;
font-size: 40px;
display: inline;
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px;
padding: 0px 0px 0px 0px;
background: transparent;
margin-left: 0px;
white-space: nowrap;
}
#footerlogo ul li { display: inline; }
#footerpic ul li { display: inline; }
#footertext1 ul li { display: inline; }
#footertext2 ul li { display: inline; }
/* --- NAVBAR --- */
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
<!---------- FOOTER ------------//>
div#footer {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 173px;
background: #757575;
position: absolute;
top: 0px;
}