Web ページを水平方向に拡大してブラウザ ウィンドウに合わせようとしていますが、コンテンツはページの中央に配置されています。私はどちらか一方を行うことができましたが、両方を同時に機能させる方法を一生理解することはできません。幅と高さを 100% に設定し、本文の余白を 0 auto に設定するとうまく機能しますが、コンテンツが中央に配置されなくなり、すべての div が互いに重なり合ってしまいます。ただし、幅を 900px に設定すると、すべて中央に配置され、見栄えがよくなります。ただし、ブラウザ ウィンドウに合わせて拡大されていないため、その周りに空白があります。
誰かがこれを機能させるための秘訣を教えてもらえますか? このページのように、側面がブラウザに合わせて拡張されますが、すべてのコンテンツが中央に配置されたままになるようにしたいと考えています。
また、ここに私のCSSがあります：
<style type="text/css">
body {
text-align:center;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}
#container {
background-color:#eae5e5;
width:900px;
text-align:left;
margin: 0 auto;
height:auto;
}
#main {
padding-top:200px !important;
padding-bottom:120px !important;
width:900px;
margin-left: auto;
margin-right:auto;
}
#header {
position:fixed;
border-top:solid 15px #4d4d4f;
font-family:Open Sans;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:900px;
padding-bottom:45px;
}
#title {
padding-top:30px;
position:absolute;
margin-left:60px;
}
#footer {
color:#FFF;
position:fixed;
font-family:Open Sans;
font-size:12px;
background-color:#dfadec;
width:900px;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: auto;
}
#nav {
padding-top:70px;
font-size:12px;
color:#CCC;
margin-left:570px;
}
#nav a:link {
color:#CCC;
text-decoration:none;
}
#nav a:hover {
color:#dfadec;
text-decoration:none;
}
h1 {
font-size:60px;
font-family:Open Sans;
color:#4d4d4f;
margin-top:-150px;
}
h2 {
font-size:40px;
font-family:Open Sans;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}
#resume {
background:#5c5c54;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:5px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#resume p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#resume:hover {
background-color:#373732;
color:#FFF;
}
#work {
background:#dfadec;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:150px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#work p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#work:hover {
background-color:#705676;
color:#FFF;
}
#skills {
background:#4d4d4f;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:295px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#skills p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#skills:hover {
background-color:#262628;
color:#FFF;
}
img#icon {
background-color:#4d4d4f;
padding:12px;
}
#intro {
width: 400px;
font-family: Open Sans;
font-size: 12px;
color: #4d4d4f;
margin-left: 320px;
position: absolute;
left: 500px;
top: 522px;
text-align:justify;
}
</style>
助言がありますか？私にお知らせください。そして、HTMLも投稿する必要があるかどうか教えてください..幅などを定義しているので、問題はCSSにあると思いました.
ありがとう！
プージャ