こんにちは、私は html と CSS にかなり慣れていないので、解決策がどこにも見つからないように見える問題に遭遇しました。同じように困惑している Web デザインの友人に尋ねました。誰かが助けてくれることを願っています。
このリンクは、私が取り組んでいるプロジェクト ページに移動します: http://dl.dropbox.com/u/25715164/project01.html
ページの最後の div がタイトルのすぐ下に揃うまでスクロールを制限する方法に関して、大きな問題に遭遇しました。現在、画面の端いっぱいにブラウザ ウィンドウを表示すると、2 番目の画像がタイトル ラインのすぐ下に配置されていれば問題なく動作します。ただし、ブラウザー ウィンドウのスケーリングを開始すると、div が適切に整列せず、タイトルと画像の間に奇妙な大きなギャップが残るか、画像が画面の上部をはるかに超えています。リンクをたどると、私の言いたいことがわかると思いますか?
マージン、パディング、div の高さで遊んでみましたが、最後の画像が代わりにフッターであるかどうかを検討していましたが、クラックすることができませんでした!
これは、ページの上部に固定の div タイトルが含まれている必要があり、最終的な画像の上部がブラウザー ウィンドウの上部から約 30 ピクセルになるまでスクロールするコンテンツが含まれている必要があるという点で単純かもしれないと考えました。 -私は完全に困惑しており、あなたができる助けがあれば大歓迎です。HTML と外部 CSS を以下にコピーします。[dreamweaver cs6 の新しいリキッド レイアウトを使用してこのサイトを開始しましたが、スケーリングに少し問題があり、多くの調査アドバイスの後、一般的に固定ピクセルの相対的に配置されたコンテナー div を指し示し、ページの中心に絶対配置の div が含まれています]
前もって感謝します。
/* html */
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="fixedtop1">
<div id="center250a">
<div id="SiteHeadingPortfolio_test">PORTFOLIO</div>
<div id="SiteHeaderPSIdesign_test"> : PRODUCT / SERVICE / INTERACTION DESIGN</div>
<div id="HorizontalRule_test"><hr></div>
</div>
</div>
<div class="project01_wrap"><img src="images/test.png"></div>
<div class="project02_wrap"><img src="images/test.png"></div>
</div>
<p> </p>
</body>
</html>
/* CSS CODE */
@charset "UTF-8";
@import url("webfonts/Ben_Sans_Bold/stylesheet.css");
@import url("webfonts/Ben_Sans_Regular/stylesheet.css");
@import url("webfonts/Ben_Sans_Light/stylesheet.css");
@import url("webfonts/Ben_Sans_RegularItalic/stylesheet.css");
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 20;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 370px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 480px) {
.gridContainer {
width: 1000px;
max-width: 1000px;
padding-left: 0;
padding-right: 0;
padding-top: 10px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
left: 0px;
top: 0px;
}
#SiteHeadingPortfolio {
width: 78px;
display: block;
font-family: "Ben Sans Bold";
font-size: 11.5px;
font-weight: bold;
letter-spacing: 1px;
left: 10px;
top: 10px;
position: absolute;
}
body {
text-align: center;
}
.SiteHeaderPSIdesign {
margin-top: 2px;
font-family: "Ben Sans Regular";
font-size: 10px;
font-weight: normal;
position: absolute;
width: 350px;
left: 38px;
letter-spacing: 1px;
top: 9px;
}
.HorizontalRule {
left: 10px;
top: 22px;
height: 0px;
width: 980px;
position: absolute;
font-family: "Ben Sans Regular";
font-size: 5px;
letter-spacing: 2px;
}
.button_01 {
position: absolute;
height: 185px;
width: 173px;
left: 15px;
top: 38px;
}
.button_image {
position: absolute;
height: 131px;
width: 173px;
}
.button_Title {
position: absolute;
width: 173px;
top: 135px;
font-family: "Ben Sans Regular";
font-size: 11px;
text-align: left;
}
.button_Text {
position: absolute;
width: 160px;
top: 149px;
font-family: "Ben Sans Regular";
font-size: 9px;
left: 15px;
text-align: left;
text-transform: uppercase;
color: #333;
line-height: 14px;
word-spacing: 1.5pt;
}
/* Project Page begins here - TESTING -. */
.project01_wrap {
width: 980px;
height: 670px;
position: absolute;
left: 10px;
top: 38px;
}
.project02_wrap {
width: 980px;
height: 764px;
position: absolute;
left: 10px;
top: 800px;
}
#fixedtop1 { position: fixed; top: 10px; left: 0; right: 0; border: none; z-index: 50; background-color: #FFFFFF; }
#center250a {
width: 980px;
margin: auto;
background-color: #FFFFFF;
}
#SiteHeadingPortfolio_test {
width: 78px;
display: block;
font-family: "Ben Sans Bold";
font-size: 11.5px;
font-weight: bold;
letter-spacing: 1px;
position: absolute;
}
#SiteHeaderPSIdesign_test {
margin-left: 28px;
margin-top: 1.5px;
font-family: "Ben Sans Regular";
font-size: 10px;
font-weight: normal;
position: absolute;
width: 350px;
letter-spacing: 1px;
}
#HorizontalRule_test {
margin-left: 0px;
top: 12px;
height: 0px;
width: 980px;
position: absolute;
font-family: "Ben Sans Regular";
font-size: 5px;
letter-spacing: 2px;
}
}